深入剖析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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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语法(1)
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
javascript 写类方式之五
2009/07/05 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python线程的两种编程方式
2015/04/14 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
详解Python 正则表达式模块
2018/11/05 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python线程里哪种模块比较适合
2020/08/02 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
优秀党务工作者事迹材料
2014/05/07 职场文书
网站推广策划方案
2014/06/04 职场文书
农村文化活动总结
2014/08/28 职场文书
收款委托书
2014/10/14 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
硕士学位论文评语
2014/12/31 职场文书
张丽莉观后感
2015/06/16 职场文书