JS初学者会遇到的三大难题:闭包,原型,继承。今天我来讲讲我对原型的理解,如果哪里有错误的地方,还请大家指正
首先是关于prototype
我们每创建一个函数,它都会包括一个prototype
属性。这个属性是一个指针,指向一个对象
function foo(){}
typeof foo.prototype // "object"
那么这个对象里面有什么呢?
可以看到里面有一个constructor
属性和一个__proto__
属性。而且constructor
指向了foo
那么为什么每次创建函数的时候都会有这个属性呢?看下面这个例子
那么问题来了,儿子哪来的钱呢?原来是父亲的钱。可是父亲的钱为什么可以算到儿子头上呢?是不是可以理解为父亲的prototype
里的属性都会被儿子继承。
对了这就是prototype
的作用,每个通过构造器构造出来的实例都可以拥有prototype
里的属性(实例就是通过构造器构造出来的对象,比如儿子就是父亲的实例)
那么儿子为什么可以拿到父亲的钱呢?换句话说,父亲为什么会把钱给儿子呢。现实中你可能会说了,因为血缘关系。
同样在js里也有血缘关系,那就是[[Prototype]]
关于[[Prototype]]和属性查找
儿子并没有钱,通过血缘关系获得了父亲的钱,这就是属性查找。
在js里就是,引擎在son
函数里查找有没有money
这个属性,如果这个函数没有这个属性,会顺着血缘关系查找上一级,也就是father
函数,如果有money
属性,就返回这个属性的值,如果没有,会继续向上一级查找,直到查找到顶级对象,如果还没有,就会返回undefined
。这就是原型链。就好像问儿子,有车吗?没有。然后儿子去问父亲,父亲也没用,再去上一级问。。如果全家都没有
son.car // undefined
我们多次提到血缘关系,前面也说过在js里是[[Prototype]]
。但是这个属性是js内置的属性,并不能让我们使用。所以在chrome和firefox里提供了__proto__
来表示血缘关系。后面我们都使用__proto__
来代替[[Prototype]]
。但是一定要注意在开发的时候不能使用__proto__
。
来继续看
奇怪的是son.__proto__
并不指向father
。而是指向一个对象,这个对象的constructor
指向father
函数。
通过前面的了解,这个对象不就是father.prototype
吗。我们验证一下
son.__proto__ === father.prototype // true
是不是觉得原型关系快要浮出水面了
属性查找就是顺着__proto__
查找,__proto__
链就是原型链
那么js为什么要设计一个不能在开发中使用的内置__proto__
在正常的面向对象的语言里,一个类所实例化的对象,里面都会有这个类所有属性的复制。
但是js没有类啊,怎么实现关联呢。所以就有了__proto__
回头看一下,好像还有一个属性还没有讲
关于constructor
注意这个属性并不是表示由谁构造。或者说并不能准确的表示。我们来看
son.constructor === father // true
// 父亲改嫁了(重写原型对象)
father.prototype = {money: 300}
// 又生了一个女儿
var daughter = new father();
daughter.constructor === father // false
daughter.constructor === Object // true
// 这就有点奇妙了
为什么会造成这种情况呢
其实constructor
准确的说是指向引用对象关联的函数
因为实例其实并没有constructor
属性,这个属性是委托在实例的__proto__
对象上。也就是son.constructor
实际上是son.__proto__.constructor
。所以把一个新的对象赋值给father
之后,新的实例的constructor
其实通过__proto__
指向了新的对象{monet: 300}
的constructor
。这个对象是通过字面量的方式创建的,所以他的constructor
是指向Object
的
上面都懂了的话,我要放大招了
不要慌。。一点一点来看
首先f2
和f1
是由Foo
构造出来的,所以它们的__proto__
指向Foo.prototype
,而Foo.prototype
是一个对象,所以它的__proto__
指向顶级对象Object.prototype
o1
和o2
是对象字面量构造出来的,相当于new Object
。所以它们的__proto__
直接指向Object.prototype
那为什么Foo
的__proto__
指向Function.prototype
呢?
因为Function
是一个顶级构造器,而Foo
函数相当于new Function
构造出来的。也就是在js里,所有的函数,它们的__proto__
都是指向Function.prototype
(包括它自己和Object)。而Function.prototype
的__proto__
又指向Object.prototype
。
所以原型链的顶端,也就是顶级对象是Object.prototype
,它是Object
的实例,而Object
本身是一个构造器
九九归一...
应该就是这么多了,欢迎指正