JavaScript之彻底理解原型与原型链

[](()2.基础铺垫

---

1. JavaScript所有的对象本质上都是通过new 函数创建的，包括对象字面量的形式定义对象(相当于new Object()的语法糖)。

2. 所有的函数本质上都是通过new Function创建的，包括Object、Array等

3. 所有的函数都是对象。

[](()3. prototype

---

每个函数都有一个属性prototype，它就是原型，默认情况下它是一个普通Object对象，这个对象是调用该构造函数所创建的实例的原型。

[](()4. contructor属性

---

JavaScript同样存在由原型指向构造函数的属性：constructor，即Func.prototype.constructor --> Func

[](()5. __proto__

---

JavaScript中所有对象(除了null)都具有一个__proto__属性，该属性指向该对象的原型。

function User() {}

var u1 = new User();

// u1.proto -> User.prototype

console.log(u1.proto === User.prototype) // true

显而易见，实例的__proto__属性指向了构造函数的原型，那么多个实例的__proto__会指向同一个原型吗？

var u2 = new User();

console.log(u1.proto === u2.proto) // true

其实学到这里就可以产生一些骚想法了，多个实例的__proto__都指向构造函数的原型，那么实例如果能通过一种方式，访问原型上的方法，属性等，就可以实现继承的效果。

我们继续更新一下原型与原型链的关系图：


[](()6. 原型链

---

实例对象在查找属性时，如果查找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查找不到，就去找原型的原型，直至查到最顶层，这也就是原型链的概念。

就借助面试题，举几个原型链的例子：

[](()6.1举例

1. u1.sayHello()：

u1上是没有sayHello方法的，因此访问u1.__proto__(User.prototype)，成功访问到sayHello方法

2. u2.toString()

u2，User.prototype都没有toString方法，User.prototype也是一个普通对象，因此继续寻找User.prototype.__proto__(Object.prototype)，成功调用到toString方法

[](()7. 提高升华

---

学完上面那些，大多数面试题都可以做出来了，例如下面这种

function A() {}

function B(a) {

this.a = a;

}

function C(a) {

if (a) {

this.a = a;

}

}

A.prototype.a = 1;

B.prototype.a = 1;

C.prototype.a = 1;

console.log(new A().a); //1

console.log(new B().a); //undefined

console.log(new C(2).a); //2

但距离解决文章的最初的面试题还欠缺些什么，比如Function.__proto__ === Object.__proto__、Function.prototype.__proto__ === Object.prototype.__proto__等，接着我们来一一攻克它。

[](()7.1 Objcet.__proto__ 、 Object.prototype、Object.prototype.__proto__

• Object是构造函数，在第二部分我们讲过所有的函数都是通过new Function创建了，因此Object相当于Function的实例，即Object.__proto__ --> Function.prototype。

• Object.prototype是Object构造函数的原型，处于原型链的顶端，Object.prototype.__proto__已经没有可以指向的上层原型，因此其值为null

// 总结：

Object.proto --> Function.prototype

Object.prototype.proto --> null