深入剖析JavaScript面向对象编程


Posted in Javascript onJuly 12, 2016

二. Javascript 面向对象编程:构造函数的继承

本节主要介绍,如何生成一个"继承"多个对象的实例。

比如,现在有一个"动物"对象的构造函数,

function Animal(){ 
this.species = "动物"; 
}

还有一个"猫"对象的构造函数,

function Cat(name,color){ 
this.name = name; 
this.color = color; 
}

怎样才能使"猫"继承"动物"呢?

1. 构造函数绑定

最简单的方法,大概就是使用call或apply方法,将父对象的构造函数绑定在子对象上,也就是在子对象构造函数中加一行:

 function Cat(name,color){ 
Animal.apply(this, arguments); 
this.name = name; 
this.color = color; 
} 
var cat1 = new Cat("大毛","黄色"); 
alert(cat1.species); // 动物

2. prototype模式

更常见的做法,则是使用prototype属性。

如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

Cat.prototype = new Animal(); 
Cat.prototype.constructor = Cat; 
var cat1 = new Cat("大毛","黄色"); 
alert(cat1.species); // 动物

代码的第一行,我们将Cat的prototype对象指向一个Animal的实例。

1.Cat.prototype = new Animal();

它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。但是,第二行又是什么意思呢?

1.Cat.prototype.constructor = Cat;

原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。也就是说,Cat.prototype 这个对象的constructor属性,是指向Cat的。

我们在前一步已经删除了这个prototype对象原来的值,所以新的prototype对象没有constructor属性,所以我们必须手动加上去,否则后面的"继承链"会出问题。这就是第二行的意思。

总之,这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象,

1.o.prototype = {};

那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

1.o.prototype.constructor = o;

3. 直接继承prototype

由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。

现在,我们先将Animal对象改写:

1.function Animal(){ } 
2.Animal.prototype.species = "动物";

然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。

Cat.prototype = Animal.prototype; 
CatCat.prototype.constructor = Cat; 
var cat1 = new Cat("大毛","黄色"); 
alert(cat1.species); // 动物

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到 Animal.prototype。

所以,上面这一段代码其实是有问题的。请看第二行

1.Cat.prototype.constructor = Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了!

1.alert(Animal.prototype.constructor); // Cat

4. 利用空对象作为中介

由于"直接继承prototype"存在上述的缺点,所以可以利用一个空对象作为中介。

var F = function(){}; 
F.prototype = Animal.prototype; 
Cat.prototype = new F(); 
Cat.prototype.constructor = Cat;

F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

1.alert(Animal.prototype.constructor); // Animal

5. prototype模式的封装函数

我们将上面的方法,封装成一个函数,便于使用。

function extend(Child, Parent) { 
 
var F = function(){}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 
}

使用的时候,方法如下

extend(Cat,Animal); 
var cat1 = new Cat("大毛","黄色"); 
alert(cat1.species); // 动物

这个extend函数,就是YUI库如何实现继承的方法。

另外,说明一点。函数体最后一行

1.Child.uber = Parent.prototype;

意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于是在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。

6. 拷贝继承

上面是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用"拷贝"方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,不也能够实现继承吗?

首先,还是把Animal的所有不变属性,都放到它的prototype对象上。

1.function Animal(){} 
2.Animal.prototype.species = "动物";

然后,再写一个函数,实现属性拷贝的目的。

function extend2(Child, Parent) { 
var p = Parent.prototype; 
var c = Child.prototype; 
for (var i in p) { 
c[i] = p[i]; 
} 
c.uber = p; 
}

这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。

使用的时候,这样写:

extend2(Cat, Animal); 
var cat1 = new Cat("大毛","黄色"); 
alert(cat1.species); // 动物

以上这篇深入剖析JavaScript面向对象编程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
js读取本地文件的实例
Dec 22 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
JS及PHP代码编写八大排序算法
Jul 12 #Javascript
微信支付 JS API支付接口详解
Jul 11 #Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 #Javascript
JS判断日期格式是否合法的简单实例
Jul 11 #Javascript
深入浅析JavaScript中的scrollTop
Jul 11 #Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 #Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 #Javascript
You might like
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php实现的二分查找算法示例
2017/06/20 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python编程求质数实例代码
2018/01/31 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
调解员先进事迹材料
2014/02/07 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
元旦晚会主持词
2014/03/24 职场文书
小学数学课后反思
2014/04/23 职场文书
企业安全标语
2014/06/07 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis