原型和原型链
原型prototype,在创建新函数的时候,会自动生成,而prototype中也会有一个constructor,回指创建该prototype的函数对象。
__proto__是对象或者实例中内置的[[prototype]],其指向的是产生该对象的对象的prototype,在浏览器中提供了__proto__让我们可以访问,通过__proto__的指向形成的一个链条,就称做原型链,原型链的整个链路是:实例对象- ->构造函数的prototype- ->Object的prototype- ->null。
我们在访问对象的属性或者方法的时候,首先从本对象寻找,如果本对象不存在该属性或者方法时,就会沿着原型链向上寻找,直至找到该属性或者方法,或者到null时停止。
这也解释了为什么数组对象上没有push,pop,shift,unshift等方法,却可以访问。
constructor
constructor属性指向的是生成该函数(对象)的函数(对象),例如1
2
3
4
5
6
7
8
9
10
11
12
13
14
15var a = function(){};
var b = new a();
var c = {};
var d = [];
//以下皆为true
console.log(b.constructor === a) //因为实例b是由构造函数产生的
console.log(a.constructor === Function)//函数a实际是Function的实例,同理
console.log(c.constructor === Object)//空对象c是Object的实例
console.log(d.constructor === Array)//空对象c是Object的实例
console.log(Object.constructor === Function)//Object自身就是一个构造函数,同理
console.log(Array.constructor === Function)//Array自身也是一个构造函数
//---------------------------------------------------------------
//首先__proto__指向的是产生该对象的对象的prototype,
//也即a.prototype,prototype中也的constructor,回指创建该prototype的函数对象,也即函数a
console.log(b.__proto__.constructor === a)
这里顺便说一下instanceof,A instanceof B 是在 A 的原型链中找 B 的 prototype,找到返回 true,找不到返回 false1
2
3
4
5
6//有个奇怪的现象,下面都返回true,这是为什么呢?
//因为JS中一切都继承自Object,除了最顶层的null,
//所以在Function的原型链中能找到Object.prototype
console.log(Function instanceof Object)
//而Object自身就是一个构造函数,因此在Object的原型链中也能找到Function.prototype
console.log(Object instanceof Function)
通过原型链实现继承
由上面的分析,我们可以利用原型链实现继承的逻辑,继承是面向对象中的一个很重要的概念1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73function Dog(name){
this.name = name;
this.say1 = function(){
console.log(this.name)
}
}
Dog.prototype.say2 = function(){
console.log(this.name)
}
Dog.prototype.test = 1
//say本来应该是所有Dog实例的共有方法,
//如果放在构造函数中,那么就会导致没办法数据共享,每一个实例都有自己的属性和方法的副本,这是对资源的极大浪费
//如果放在Dog.prototype中,那么利用原型链的特性,就可以让所有实例共用一个方法,
//需要注意的是,由于共用了一个方法,对属性的更改是对所有实例透明的
var dog1 = new Dog('lalala');
let dog2 = new Dog('wahaha');
dog1.test++;//2
dog2.test++;//3
console.log(dog1.say1 === dog2.say1)// false
console.log(dog1.say2 === dog2.say2)// true
//现在,我们可以尝试着去实现继承了
//我们是通过原型链去实现继承的,
//之前的原型链是:Dog实例 --> Dog函数 --> Object --> null
//那么现在的原型链需要改成 Dog实例 --> Dog函数 --> Dog父类(Animal函数) --> Object --> null
//第一种方案,改变Dog函数的prototype,让他指向Animal的实例
function Animal(){
this.species = 'unknown';
}
Dog.prototype = new Animal();
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;
//第二钟方案,改变Dog函数的prototype,让他指向Animal的prototype
function Animal(){}
Animal.prototype.species = 'unknown';
Dog.prototype = Animal.prototype;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;
//第三种方案,调用apply或call,将Animal的this绑定到Dog中
function Animal(){
this.species = 'unknown';
}
function Dog(name){
Animal.apply(this, arguments);
this.name = name;
}
//第四种方法,通过Object.create()方法实现继承,过滤掉了父类实例属性,Dog.prototype中就没有了Animal的实例化数据了
//这种方法也是ES6中Class被babel编译成ES5所用的方法
function Animal(){
this.species = 'unknown';
}
function Dog(name){
Animal.apply(this, arguments);
this.name = name;
}
//这里模拟了 Dog.prototype = Object.create(Animal.prototype)
var f = function(){};
f.prototype = Animal.pototype;
Dog.prototype = new f();
Dog.__proto__ = Animal;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;
//现在就能访问到Animal中的species属性了
var dog = new Dog('lalala');
dog.species;//unknown
以上这些就是利用原型链实现继承的一些方法
ES6的class类
有了以上的知识,我们就可以研究一下ES6的class类了,这个语法糖能让我们更容易的实现类和继承,其提供了extends,static,super等关键字
1 | //这是es6的代码实现 |
总结
- 通过以上分析,对原型和原型链有了更加深入和清晰的了解,也熟悉了constructor和instanceof的用法,加深了基于原型链的继承方式的了解,理清了这块知识。
- 在对ES6的class通过babel编译后的源码的分析中,也了解到了Object.create和Object.setPrototypeOf的用法,挖掘了如何去模拟super,extends和static的实现。