欢迎来个人博客阅读:「JavaScript 原型中的哲学思想」javascript
记得当年初试前端的时候,学习JavaScript过程当中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看到有关原型的讲解时,老是心存疑虑。前端
当在JavaScript世界中走过很多旅程以后,再次萌发起研究这部分知识的欲望,翻阅了很多书籍和资料,才搞懂__proto__
和prototype
的概念。java
故以做此笔记,往后忘了能够回来看看。若是你看的过程当中以为理解有些困难,把例子在代码中跑一跑,亲手试一试也许能解决很多疑惑。浏览器
却不知,JavaScript的世界中的对象,追根溯源来自于一个 null函数
「一切皆为对象」,这句着实是一手好营销,易记,易上口,印象深入。学习
万物初生时,一个null
对象,凭空而生,接着Object
、Function
学着null
的模样塑造了本身,而且它们彼此之间喜结连理,提供了prototype
和constructor
,一个给子孙提供了基因,一个则制造万千子子孙孙。ui
在JavaScript中,null
也是做为一个对象存在,基于它继承的子子孙孙,当属对象。乍一看,null
像是上帝,而Object
和Function
犹如JavaScript世界中的亚当与夏娃。spa
__proto__
在JavaScript中,每一个对象都拥有一个原型对象,而指向该原型对象的内部指针则是__proto__
,经过它能够从中继承原型对象的属性,原型是JavaScript中的基因连接,有了这个,才能知道这个对象的祖祖辈辈。从对象中的__proto__
能够访问到他所继承的原型对象。prototype
var a = new Array();
a.__proto__ === Array.prototype // true复制代码
上面代码中,建立了一个Array的实例a
,该实例的原型指向了Array.prototype
。Array.prototype
自己也是一个对象,也有继承的原型:3d
a.__proto__.__proto__ === Object.prototype // true
// 等同于 Array.prototype.__proto__ === Object.prototype复制代码
这就说了明了,Array自己也是继承自Object的,那么Object的原型指向的是谁呢?
a.__proto__.__proto__.__proto__ === null // true
// 等同于 Object.prototype.__proto__ === null复制代码
因此说,JavaScript中的对象,追根溯源都是来自一个null对象。佛曰:万物皆空,善哉善哉。
除了使用.__proto__
方式访问对象的原型,还能够经过Object.getPrototypeOf
方法来获取对象的原型,以及经过Object.setPrototypeOf
方法来重写对象的原型。
值得注意的是,按照语言标准,__proto__
属性只有浏览器才须要部署,其余环境能够没有这个属性,并且先后的两根下划线,表示它本质是一个内部属性,不该该对使用者暴露。所以,应该尽可能少用这个属性,而是用 Object.getPrototypeof
和Object.setPrototypeOf
,进行原型对象的读写操做。这里用__proto__
属性来描述对象中的原型,是由于这样来得更加形象,且容易理解。
prototype
函数做为JavaScript中的一等公民,它既是函数又是对象,函数的原型指向的是Function.prototype
var Foo = function() {}
Foo.__proto__ === Function.prototype // true复制代码
函数实例除了拥有__proto__
属性以外,还拥有prototype
属性。经过该函数构造的新的实例对象,其原型指针__proto__
会指向该函数的prototype
属性。
var a = new Foo();
a.__proto__ === Foo.prototype; // true复制代码
而函数的prototype
属性,自己是一个由Object
构造的实例对象。
Foo.prototype.__proto__ === Object.prototype; // true复制代码
prototype
属性很特殊,它还有一个隐式的constructor
,指向了构造函数自己。
Foo.prototype.constructor === Foo; // true
a.constructor === Foo; // true
a.constructor === Foo.prototype.constructor; // true复制代码
PS: a.constructor
属性并不属于a
(a.hasOwnProperty("constructor") === false
),而是读取的a.__proto__.constructor
,因此上图用虚线表示a.constructor
,方便理解。
概念:
原型链做为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。
每一个构造函数都有一个原型对象(prototype
),原型对象都包含一个指向构造函数的指针(constructor
),而实例都包含一个指向原型对象的内部指针(__proto__
)。
那么,假如咱们让原型对象等于另外一个类型的实例,此时的原型对象将包含一个指向另外一个原型的指针,相应地,另外一个原型中也包含着一个指向另外一个构造函数的指针。假如另外一个原型又是另外一个类型的实例,那么上述关系依然成立。如此层层递进,就构造了实例与原型的链条,这就是原型链的基本概念。
意义:“原型链”的做用在于,当读取对象的某个属性时,JavaScript引擎先寻找对象自己的属性,若是找不到,就到它的原型去找,若是仍是找不到,就到原型的原型去找。以此类推,若是直到最顶层的Object.prototype仍是找不到,则返回undefine。
在JavaScript中,也存在鉴定亲子之间DNA关系的方法:
var Bar = function() {}
var b = new Bar();
b instanceof Bar // true
Bar.prototype.isPrototypeOf(b) // true
Object.prototype.isPrototypeOf(Bar) // true复制代码
要注意,实例b
的原型是Bar.prototype
而不是Bar
这是一张描述了Object
、Function
以及一个函数实例Foo
他们之间原型之间联系。若是理解了上面的概念,这张图是不难读懂。
从上图中,能看到一个有趣的地方。
Function.prototype.__proto__
指向了 Object.prototype
,这说明Function.prototype
是一个 Object
实例,那么应当是先有的Object
再有Function
。Object.prototype.constructor.__proto__
又指向了 Function.prototype
。这样看来,没有Function
,Object
也不能建立实例。这就产生了一种类「先有鸡仍是先有蛋」的经典问题,究竟是先有的Object
仍是先有的Function
呢?
这么哲学向的问题,留给你思考了。
我只是感慨:越往JavaScript的深处探索,越以为这一门语言很哲学。
update on 2017/01/05
时隔半年,偶尔翻开这篇文章。
对于这个问题,又有了新的思考。
愿意跟能看到这里的你来分享一下。
咱们能够先把 Object.prototype
和 Function.prototype
这两个拎出来看,由于他们自己就是一个实例对象。
为方便理解,咱们改一下名字,避免和 Object 和 Function 的强关联,分别叫:Op
和 Fp
那么就有这样的原型链存在了
我再描述一下上面的原型链,先有 null , 再有了 Op , 而后再有了 Fp ,而后以 Fp 为原型的两个构造函数 (Object, Function) 出现了。而做为构造函数,须要有个 prototype 属性用来做为以该构造函数创造的实例的继承。因此Object.prototype = Op, Function.prototype = Fp。