微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

继承的实现方式及原型概述

2015-07-29 19:55 前端大全

(点击上方,可快速关注)


作者:名一的博客

网址:http://segmentfault.com/a/1190000002989513

点击“阅读原文”可查看本文网页版


对于 OO 语言,有一句话叫“Everything is object”,虽然 JavaScript 不是严格意义上的面向对象语言,但如果想要理解 JS 中的继承,这句话必须时刻铭记于心。


JS 的语法非常灵活,所以有人觉得它简单,因为怎么写都是对的;也有人觉得它难,因为很难解释某些语法的设计,谁能告诉我为什么 typeof null 是 object 而 typeof undefined 是 undefined 吗?并且这是在 null == undefined 的前提下。很多我们自认为“懂”了的知识点,细细琢磨起来,还是会发现有很多盲点,“无畏源于无知”吧……


1. 简单对象


既然是讲继承,自然是从最简单的对象说起:


var dog = {

name: 'tom'

}


这便是对象直接量了。每一个对象直接量都是 Object 的子类,即


dog instanceof Object; // true


2. 构造函数


JS 中的构造函数与普通函数并没有什么两样,只不过在调用时,前面加上了 new 关键字,就当成是构造函数了。


function Dog(name) {

this.name = name;

}


var dog = new Dog('tom');


dog instanceof Dog; // true


两个问题,第一,不加 new 关键字有什么后果?


那么 Dog 函数中的 this 在上下文(Context)中被解释为全局变量,具体在浏览器端的话是 window 对象,在 node 环境下是一个 global 对象。


第二,dog 的值是什么?很简单,undefined 。Dog 函数没有返回任何值,执行结束后,dog 的值自然是 undefined 。


关于 new 的过程,这里也顺便介绍一下,这个对后面理解原型(prototype)有很大的帮助:


  1. 创建一个空的对象,仅包含 Object 的属性和方法。

  2. 将 prototype 中的属性和方法创建一份引用,赋给新对象。

  3. 将 this 上的属性和方法新建一份,赋给新对象。

  4. 返回 this 对象,忽略 return 语句。


需要明确的是,prototype 上的属性和方法是实例间共享的,this 上的属性和方法是每个实例独有的。


3. 引入 prototype


现在为 Dog 函数加上 prototype,看一个例子:


function Dog(name) {

this.name = name;

this.bark = function() {};

}


Dog.prototype.jump = function() {};

Dog.prototype.species = 'Labrador';

Dog.prototype.teeth = ['1', '2', '3', '4'];


var dog1 = new Dog('tom'),

dog2 = new Dog('jerry');


dog1.bark !== dog2.bark; // true

dog1.jump === dog2.jump; // true


dog1.teeth.push('5');

dog2.teeth; // ['1', '2', '3', '4', '5']


看到有注释的那三行应该可以明白“引用”和“新建”的区别了。


那么我们经常说到的“原型链”到底是什么呢?这个术语出现在继承当中,它用于表示对象实例中的属性和方法来自于何处(哪个父类)。好吧,这是笔者的解释。


- Object

bark: Dog/this.bark()

name: 'tom'

- __proto__: Object

jump: Dog.prototype.jump()

species: 'Labrador'

+ teeth: Array[4]

+ constructor: Dog()

+ __proto__: Object


上面的是 dog1 的原型链,不知道够不够直观地描述“链”这个概念。


其中,bark 和 name 是定义在 this 中的,所以最顶层可以看到它俩。

然后,每一个对象都会有一个 __proto__ 属性(IE 11+),它表示定义在原型上的属性和方法,所以 jump、species 和 teeth 自然就在这儿了。

最后就一直向上找 __proto__ 中的属性和方法。


4. 继承的几种实现


4.1 通过 call 或者 apply


继承在编程中有两种说法,一个叫 inherit,另一个是 extend 。前者是严格意义上的继承,即存在父子关系,而后者仅仅是一个类扩展了另一个类的属性和方法。那么 call 和 apply 就属于后者的范畴。怎么说?


function Animal(gender) {

this.gender = gender;

}


function Dog(name, gender) {

Animal.call(this, gender);

this.name = name;

}


var dog = new Dog('tom', 'male');


dog instanceof Animal; // false


虽然在 dog 对象中有 gender 属性,但 dog 却不是 Animal 类型。甚至,这种方式只能“继承”父类在 this 上定义的属性和方法,并不能继承 Animal.prototype 中的属性和方法。


4.2 通过 prototype 实现继承


要实现继承,必须包含“原型”的概念。下面是很常用的继承方式。


function Dog(name) {

Animal.call(this);

}


Dog.prototype = new Animal(); // 先假设 Animal 函数没有参数

Dog.prototype.constructor = Dog;


var dog = new Dog('tom');


dog instanceof Animal; // true


继承的结果有两个:一、获得父类的属性和方法;二、正确通过 instanceof 的测试。


prototype 也是对象,它是创建实例时的装配机,这个在前面有提过。new Animal() 的值包含 Animal 实例所有的属性和方法,既然它赋给了 Dog 的 prototype,那么 Dog 的实例自然就获得了父类的所有属性和方法。


并且,通过这个例子可以知道,改变 Dog 的 prototype 属性可以改变 instanceof 的测试结果,也就是改变了父类。


然后,为什么要在 Dog 的构造函数中调用 Animal.call(this)?


因为 Animal 中可能在 this 上定义了方法和函数,如果没有这句话,那么所有的这一切都会给到 Dog 的 prototype 上,根据前面的知识我们知道,prototype 中的属性和方法在实例间是共享的。


我们希望将这些属性和方法依然保留在实例自身的空间,而不是共享,因此需要重写一份。


至于为什么要修改 constructor,只能说是为了正确的显示原型链吧,它并不会影响 instanceof 的判断。或者有其他更深的道理我并不知道……


4.3 利用空对象实现继承


上面的继承方式已经近乎完美了,除了两点:


一、Animal 有构造参数,并且使用了这些参数怎么办?

二、在 Dog.prototype 中多了一份定义在 Animal 实例中冗余的属性和方法。


function Animal(name) {

name.doSomething();

}


function Dog(name) {

Animal.call(this, name);

}


Dog.prototype = new Animal(); // 由于没有传入name变量,在调用Animal的构造函数时,会出错

Dog.prototype.constructor = Dog;


这个问题可以通过一个空对象来解决(改自 Douglas Crockford)。


function DummyAnimal() {}

DummyAnimal.prototype = Animal.prototype;


Dog.prototype = new DummyAnimal();

Dog.prototype.constructor = Dog;


他的原始方法是下面的 object:


function object(o) {

function F() {}

F.prototype = o;

return new F();

}


Dog.prototype = object(Animal.prototype);

Dog.prototype.constructor = Dog;


4.4 利用 __proto__ 实现继承


现在就只剩下一个问题了,如何把冗余属性和方法去掉?


其实,从第 3 小节介绍原型的时候就提到了 __proto__ 属性,instanceof 运算符是通过它来判断是否属于某个类型的。


所以我们可以这么继承:


function Dog() {

Animal.call(this);

}


Dog.prototype = {

__proto__: Animal.prototype,

constructor: Dog

};


如果不考虑兼容性的话,这应该是从 OO 的角度来看最贴切的继承方式了。


4.5 拷贝继承


这个方式也只能称之为 extend 而不是 inherit,所以也没必要展开说。


像 Backbone.Model.extend、jQuery.extend 或者 _.extend 都是拷贝继承,可以稍微看一下它们是怎么实现的。(或者等我自己再好好研究之后过来把这部分补上吧)


5. 个人小结


当我们在讨论继承的实现方式时,给我的感觉就像孔乙己在炫耀“茴香豆”的“茴”有几种写法一样。继承是 JS 中占比很大的一块内容,所以很多库都有自己的实现方式,它们并没有使用我认为的“最贴切”的方法,为什么?JS 就是 JS,它生来就设计得非常灵活,所以我们为什么不利用这个特性,而非得将 OO 的做法强加于它呢?


通过继承,我们更多的是希望获得父类的属性和方法,至于是否要保证严格的父类/子类关系,很多时候并不在乎,而拷贝继承最能体现这一点。对于基于原型的继承,会在代码中看到各种用 function 定义的类型,而拷贝继承更通用,它只是将一个对象的属性和方法拷贝(扩展)到另一个对象而已,并不关心原型链是什么。


当然,在我鼓吹拷贝继承多么多么好时,基于原型的继承自然有它不可取代的理由。所以具体问题得具体分析,当具体的使用场景没定下来时,就不存在最好的方法。


个人见解,能帮助大家更加理解继承一点就最好,如果有什么不对的,请多多指教!




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 《Python程序设计》系列教材 前端巅峰论:框架之争,出路何在? CRAN上R包的十年增长史 AngularJs On Rails 【盘点】电影中八大邪恶的超级计算机