JS 的原型链

前言

本文主要关于js的原型链知识

一、构造函数

在 JS 中，通过 new 关键字调用函数，来实例化对象的函数称为构造函数（首字母大写）。构造函数以函数的形式为自己的对象类型定义属性和方法。
一个简单的例子，如下：

function Aa ( color )  {
 	this.color = color; 
 }
var a1 = new Aa (" orange ");
console.log( a1.color );// orange

当我们处理多个同一类型的信息时，创建好一个构造函数，然后再创建对应的对象，将会省下我们一番功夫。

二、原型对象

2.1 prototype

JS 中每个函数都会创建一个 prototype 属性，这个属性是一个方法。它就是创建的实例的原型，实例从中继承属性和方法。
如：

function Aa ()  {
 	Aa.prototype.color ="black"; 
 }
var a1 = new Aa ();
console.log( a1.color );// black

与构造函数模式不同，在 prototype 上面定义的属性和方法可以被对象实例共享。

function Aa ()  {
 	Aa.prototype.color ="black"; 
 }
var a1 = new Aa ();
var a2 = new Aa ();
console.log( a1.color == a2.color );// true

2.2 __ proto __

该属性在ES标准定义中的名字应该是 [[Prototype]]，但 Firefox、Safari 和 Chrome会在每个对象上暴露__proto__属性。在以 new 操作符创建实例时，会在内存创建一个新对象，并且这个新对象内部的 [[Prototype]] 指针 会被赋值为构造函数的 prototype 属性，所以通过__proto__可以访问对象的构造函数的 prototype 所指向的对象。
即:

function Aa ()  {
 }
var a1 = new Aa ();
console.log( a1.__proto__ == Aa.prototype );// true

2.3 constructor

默认情况下，所有原型对象自动获得一个名为 constructor 的属性，指回与之关联的构造函数。constructor 属性只存在于原型对象

function Aa ()  {
 }
var a1 = new Aa ();
console.log(Aa.prototype.constructor == Aa );// true

总结：每个构造函数都有一个原型对象 (prototype) ，实例有一个内部指针指向原型 (__ proto __)，原型有一个属性指回构造函数 (constructor) 。

三、原型链

如下示例：

function Aa ()  {
 }
var a1 = new Aa ();
console.log( a1.constructor  == Aa );// true
console.log( a1.__proto__.constructor  == Aa );//true
console.log( a1.__proto__ == Aa.prototype);//true

我们发现，a1 本身没有 prototype，但它却直接调用了 constructor，指向了构造函数 Aa。这就涉及到原型链的知识了，在读取实例上的属性时，首先会在实例上搜索这个属性，如果没找到，则搜索会沿着指针进入原型对象，然后在原型对象上找到属性后，再返回对应的值。在这里，a1 的 [[Prototype]] 指向 Aa.prototype ，所以结果为 true。

3.1

在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型:

function Aa ()  {
 }
var a1 = new Aa ();
//对象的内置构造函数为 Object
console.log( Aa.prototype.__proto__  == Object.prototype );// true 
console.log(Object.prototype.__proto__ == null);//true

默认情况下，所有引用类型都继承自 Object，这也是通过原型链实
现的。Object 再往上就是顶级原型 null。

3.2

function Aa ()  {
 }
var a1 = new Aa ();
//函数的内置构造函数为 Function
console.log(Aa.__proto__ == Function.prototype);//true 
//3.2.1
console.log(Function.__proto__ == Function.prototype);//true 
//3.2.2
console.log(Function.prototype.__proto__ ==  Object.prototype);//true
console.log(Object.__proto__ == Function.prototype);//true

3.2.1、在这里，我们需要注意一下，Function 比较特殊，它的原型又指向了Function.prototype。
3.2.2、Object 和 Function 可以看作两个“终点”，这样就不难理解上述代码。

3.3

原型链基本思想就是通过原型继承多个引用类型的属性和方法。
我们可以得到下图总结：