图文并茂的帮助你更好的理解JavaScript原型.
熟记并理解以下规则,保你深入理解对象原型,保你面试无忧.
1 . 任何对象都拥有__proto__
(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype).
1 | var a = new Array () |
2 . 原型链的顶端是Object.prototype,其 __proto__
为 null
1 | console.log(Object.prototype.__proto__ === null); // true |
3 . 所有函数都拥有prototype (显式原型)属性
1 | 任何函数的 prototype.__proto__ 都指向 Object.prototype 特例见第 2 |
4 . 所有函数都是Function 的 实例
1 | function fn () { |
类似的 十分容易就能理解
1 | var obj = {} // 可以看做是 var obj = new Object () |
5 . 更奇葩的来了,Object Function Array 本身也都是一个函数,由于是最常用的,所以JavaScript帮我们实现了
1 | // 当我们通过构造函数的方式来创建一个对象 ,其本质也是new一个普通的函数 |
6 . 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解
1 | console.log(Function.prototype.constructor === Function); // true |
7 . 先普及一波 原型链 概念
如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过__proto__
属性一层层的向上查找,直到原型链的顶端 Object.prototype(__proto__: null
)见第2
这种通过某种纽带(__proto__
)将对象之间形成一种继承关系 这种关系呈现出一种链条的形状 将这种链条称之为原型链
8 . 根据第 6 条可以推论得:
1 | console.log(fn.constructor===Function); // true |
9 . Function.prototype.__proto__ === Object.prototype
Function是一个特殊的例子 他创造了所有的函数,但他自身就是也是一个函数 总不能自己创造自己吧 所以他的上级是 Object.prototype
下面配合几张原型图,帮助大家更好的理解.
构造函数创建对象字面量原型图
1 | function Animal (color) { |
当我们创建一个函数时原型如下:
完整对象字面量原型图
1 | var obj = { name: '陈二狗' }; |
数组原型链
1 | var arr = ['第一个数','第二个数','第三个数'] |
基本包装类型原型链
1 | var str = new String('str') // var str = 'str' |
其实所有的原型链规则都是根据上面的规则来的,只要能记住并理解,那么你也就理解原型了
如果有纰漏 忘指出,如果有转载,麻烦注明作者yucccc.