深入浅出javascript对象原型

深入浅出javascript对象原型

图文并茂的帮助你更好的理解JavaScript原型.熟记并理解以下规则,保你深入理解对象原型,保你面试无忧.

1. 任何对象都拥有__proto__(隐式原型)属性,一般指向他们的构造函数的原型(prototype).

深入浅出javascript对象原型

2. 原型链的顶端是Object.prototype,其__proto__为null

深入浅出javascript对象原型

3. 所有函数都拥有prototype(显式原型)属性

深入浅出javascript对象原型

4. 所有函数都是Function的实例

深入浅出javascript对象原型

类似的十分容易就能理解

深入浅出javascript对象原型

5. 更奇葩的来了,ObjectFunction Array 本身也都是一个函数,由于是最常用的,所以JavaScript帮我们实现了

深入浅出javascript对象原型

6. 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解

深入浅出javascript对象原型

7. 先普及一波原型链概念

如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过__proto__属性一层层的向上查找,直到原型链的顶端Object.prototype(__proto__:null)这种通过某种纽带(__proto__)将对象之间形成一种继承关系这种关系呈现出一种链条的形状 将这种链条称之为原型链

8. 根据第6条可以推论得:

深入浅出javascript对象原型

9. Function.prototype.__proto__=== Object.prototype

Function是一个特殊的例子他创造了所有的函数,但他自身也是一个函数,他自己同时也创造了自己此处见第 5条(感谢网友指出的错误)

下面配合几张原型图,帮助大家更好的理解.

构造函数创建对象字面量原型图

深入浅出javascript对象原型

当我们创建一个函数时原型如下:

深入浅出javascript对象原型

构造函数创建对象字面量原型图

完整对象字面量原型图:

深入浅出javascript对象原型

深入浅出javascript对象原型

完整对象字面量原型图

数组原型链

深入浅出javascript对象原型

深入浅出javascript对象原型

数组原型链

基本包装类型原型链

深入浅出javascript对象原型

深入浅出javascript对象原型

基本包装类型

其实所有的原型链规则都是根据上面的规则来的,只要能记住并理解,那么你也就理解原型了

深入浅出javascript对象原型


分享到:


相關文章: