在我们程序猿界一直流传这这么一个joke,没女票我们可以new一个、没房子没票子没车子我们同样new一个!当然这听着更像是一种自嘲,毕竟我们程序猿都爱自嘲,哈哈,废话不多说,今天就由我带着你们来入JavaScript面向对象这个坑!千万别弃坑!

一、理解对象:

创建对象的两种方法:直接声明、Object的实例化

直接声明:

 Var zhangsan = {

 Name : “zhangsan”,

 Age : 29,

 //创建一个introduce函数,用于返回张三的姓名

 introduce.function(){

 return zhangsan.name;

 }

 }

Object的实例化:

 Var zhangsan = new Object();

 zhangsan.name = “zhangsan”;

 zhangsan.age = 29;

 zhangsan.introduce = function(){

 return zhangsan.name;

 };

调用方法:

 Document.write(zhangsan.name+zhangsan.age);或者

 Alert(zhangsan.introduce());

二、类的实现:

 

工厂生产对象:适用于当需要大规模输出对象时的问题

 Function CreateCar(engine,tire){

 Var car = new Object();

 car.engine=engine;

 car.tire   = tire;

 return car;

 }

调用工厂生产对象:

Var Audi = CreateCar(”four-engine”,”four-tire”);

生产出Audi一辆,即new了一个对象

说白了,工厂模式就是把创建对象的方法封装在函数中。

 

实际上,当你用instanceof运算符对实例Audi检测时:

Alert(Audi instanceof car);

结果会弹出对话框显示false。

即Audi不是car实例化出的对象!

 

三、构造函数

为解决上述问题特引入构造函数大佬

将以上的代码略作改写:

 Function CreateCar(engine,tire){

 this.engine=engine;

 this.tire=tire;

 this.drive = function(){

 document.wirte(this.engine+this.tire);

 };

 }

其实构造函数就是一个带this的普通函数,它不是大佬,哈哈!它里面的this就指通过这个构造函数生成一个新的对象。

 

虽说我们揭开了它大佬的面纱,但大佬还是大佬,它还是有用的..

 

 Var Audi = new car(”four-engine”,”four-tire”);

 Alert(Audi instanceof car);

结果惊人的弹出显示:true

大佬果然是大佬!

但问题又来了,大佬也不是没有缺点,它的模式虽然好用,但是存在浪费内存的嫌疑,这就让大佬的声誉受到了严重的影响:

每一次生成一个person对象,都必须重新构建一遍sayName函数,真的麻烦!

 

铛,铛,铛!震惊 “全局函数” 出场竟然..

 

 Function sayName(){

    Document.write(this.name);

 }

然后再把person类中将sayName()指向外部的sayName()

this.sayName = sayName;

厉害了wold哥!

 

问题又来了,在全局变量中定义的函数只能被某个对象所调用,让这个函数有点名不副实的样子,而且当对象如果需要很多方法,就需要定义同样多的全局变量。这样对象的封装就毫无意义可言。这些问题我们都可以通过原型模式(Prototype)来解决。

原来一山更比一山高啊,这世外高人第一次见..

    Person.prototype.sayName = function (){

        document.write (this.name);

};

与之前的:

Function sayName(){

   Document.write(this.name);

}

相比,第二个好low!

 

那么这位世外高人有什么用呢?

 

废话不多说上代码:

personA.sayName = function(){

    document.write("personA:"+this.name+"<br/>");

}//对父对象中的方法进行复写,personA是person函数实例化出的一个新对象

哇!QAQ

本期的风趣的JavaScript面向对象课程就结束啦,谢谢大家的浏览和指正!我们下期再见!

风趣的JavaScript面向对象入门课程一的更多相关文章

  1. JavaScript面向对象入门

    什么是JavaScript? 我们可以从几个方面去说JavaScript是什么: 基于对象 javaScript中内置了许多对象供我们使用[String.Date.Array]等等 javaScrip ...

  2. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  3. JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

    写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...

  4. JavaScript面向对象编程入门

    来源极客网 function Person() { var _this = {} //创建一个空的对象,接着我们利用这个"空的对象"承载Person的属性和方法 _this.say ...

  5. JavaScript面向对象轻松入门之综合

    javascrpit面向对象之综合   这一章是对前几章的一个总结,通过一个案例来综合认识javascript面向对象的基本用法   需求: 几乎所有的web应用都需要保存数据一些到本地,那么我们就来 ...

  6. JavaScript基础入门12 - 面向对象编程

    目录 JavaScript 面向对象编程 前言 构造函数创建对象 instanceof constructor 返回值 原型对象 关于对象的属性查找 in hasOwnProperty() JS当中实 ...

  7. 《javascript面向对象精要》读书笔记

    <javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...

  8. 快速学习JavaScript面向对象编程

    到处都是属性.方法,代码极其难懂,天哪,我的程序员,你究竟在做什么?仔细看看这篇指南,让我们一起写出优雅的面向对象的JavaScript代码吧! 作为一个开发者,能否写出优雅的代码对于你的职业生涯至关 ...

  9. 第一百零九节,JavaScript面向对象与原型

    JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...

随机推荐

  1. 数据库索引B-树和B+树

    一开始学习数据结构的时候,主要学习的是数组,队列,链表,队列,栈,树这些数据结构,其中树主要学习二叉树,平衡二叉树,二叉搜索树等这些子节点最多只有两个的树结构.但是,当我们接触数据库的时候,你会发现数 ...

  2. 程序员也是弱势群体?——从WePhone开发者事件说起

    作为一名不爱凑热闹的人,今天一直在持续关注一个热点事件--WePhone开发者自杀,即使前几天热议的孕妇跳楼新闻我都不太关注,但是这个事件却让我深深的震撼,花了几个小时在微博上搜索了相关的信息,去了解 ...

  3. js学习--变量作用域和作用域链

    作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...

  4. 闭锁——CountDownLatch

    一.概念 闭锁是一个同步工具类,主要用于等待其他线程活动结束后,再执行后续的操作.例如:在王者荣耀游戏中,需要10名玩家都准备就绪后,游戏才能开始. CountDownLatch是concurrent ...

  5. 制作Visual Studio 2017 (VS 2017) 离线安装包

    史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...

  6. 通过createObjectURL实现图片预览

    实现原理:通过createObjectURL 创建一个临时指向某地址的二进制对象. 过程:点击触发隐藏的 input   file  的点击事件,使用createObjectURL读取 file,创建 ...

  7. JS中的运算符和JS中的分支结构

    JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...

  8. 团队作业4---第一次项目冲刺(ALpha)版本 第五天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.根据测试需求功能,部分基础功能不能实现,性能不达标,后续已完成 ...

  9. 201521123088《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析1.1 解释ArrayList的contains源代码源代码: //contain ...

  10. 201521123053《Java课程设计》第七周学习总结

    1. 本章学习总结 2. 书面作业 Q1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:代码如下 public boolean contains(Objec ...