JS: 原型与原型链

原型与原型链

javascript 创建对象

---

类与构造函数是大多数编程语言所拥有的，而借鉴了 c 与 java 的 javascript 也是有类和构造函数的，不过 javascript 的实现不太一样。

// before es6
// 构造函数模式
function person(name){
  this.name = name;
    this.sayname = function() {
      console.log(this.name);
    }
}

var p = new person();
console.log(p instanceof person); // true

上面的例子中，person就是构造函数，p就是它的实例，但是它对共享性不太好，所以有了原型模式。

// 原型模式
function person(){}
person.prototype.name = 'kobe';
person.prototype.sayname = function() {
  console.log(this.name);
}

var p1 = new person();
var p2 = new person();

p1.sayname(); // kobe
p2.sayname(); // kobe

原型模式创建的实例都可以共享person.prototype的属性和方法，而prototype是 javascript 实现类的一个关键所在。

prototype

---

在 javascript 中，每个函数都有一个prototype属性，这个属性指向函数的原型对象，上面的例子，可以用下图解释，图中用person.prototype表示 person 的原型对象。

constructor

---

person 是构造函数，有prototype指针指向原型对象，而person.prototype也有一个constructor属性指向构造函数。

简单来说，就是 javascript 会在函数创建的时候为函数添加一个prototype属性，这个属性是指向函数的原型对象的指针，而原型对象也会获得一个constructor属性，这个属性是一个指向函数本身的指针，即指向构造函数。

function person(){}
person.prototype.name = 'kobe';
person.prototype.sayname = function() {
  console.log(this.name);
}

person.prototype.constructor == person; // true

__proto__

---

函数有prototype，那对象呢？其实对象内部也有一个[[prototype]]指针，这个指针指向创建实例对象的构造函数的原型对象。

在 es5 之前的语言标准里，是不允许访问这个属性的，但浏览器都实现了一个__proto__对[[prototype]]进行访问操作，所以 es5 增加了一个object.getprototypeof()方法来访问[[prototype]]。

object.getprototypeof(object)方法返回指定对象的原型（内部[[prototype]]属性的值）。

在 es5 中，如果参数不是一个对象类型，将抛出一个 typeerror 异常。在 es6 中，参数会被强制转换为一个 object。

建议在代码中使用object.getprototypeof()来访问内部[[prototype]]属性，不建议使用非标准的__proto__，为了方便区别，文中使用__proto__来表示[[prototype]]。

回到上面的例子，当调用 person 来创建实例的时候，该实例会获得一个__proto__指针指向构造函数的原型对象。

正是因为创建的 p1、p2 实例都拥有__proto__指向构造函数（person）的原型对象（person.prototype），它们才能共享person.prototype的属性和方法。

function person(){}
person.prototype.name = 'kobe';
person.prototype.sayname = function() {
  console.log(this.name);
}

let p1 = new person();
let p2 = new person();

object.getprototypeof(p1) == object.getprototypeof(p2); // true

简单来说，就是在 javascript 中，每一个对象（除null）在创建的时候都会将其与另一个对象进行关联，而关联的这个对象就是所谓的原型。

使用isprototypeof()方法就能确定这种关联：

person.prototype.isprototypeof(p1); // true
person.prototype.isprototypeof(p2); // true

屏蔽性

---

还是这个例子：

function person(){}
person.prototype.name = 'kobe';
person.prototype.sayname = function() {
  console.log(this.name);
}

let p1 = new person();
// 访问 p1 的 name
p1.name; // kobe

当我们通过实例 p1 访问name属性的时候，javascript 引擎会先在实例 p1 中查找name，当发现 p1 没有这个属性，就会通过__proto__向它指向的原型对象进行查找，找到就返回这个属性的值，也就是说访问name执行了两次查找。

如果 p1 自己添加了name属性，就会在第一次查找时返回值：

// 在 p1 中添加 name
p1.name = 'jordan';

// 只会执行一次查询
p1.name; // jordan

// 原型中的值并未改变
object.getprototypeof(p1).name; // kobe

也就是说，在实例上添加name属性后，该属性就会屏蔽原型中的那个属性，但并不会改变原型中的该属性的值。

原型链

---

既然在 javascript 中，所有对象（除null）都有__proto__，而实例 p1 指向person.prototype，那person.prototype对象的__proto__又指向哪里呢？

object.getprototypeof(person.prototype) == object.prototype; // true

答案是object.prototype，因为原型对象是通过构造函数 object 来创建的，所以它指向object.prototype。

那 object.prototype 的__proto__又指向哪里呢？它指向这条链的终点：null，代表无。

object.getprototypeof(object.prototype); // null

回到上面所说的查找name属性，如果在第二次都没有查找到name属性，就会沿着这条链继续向上查找，直到终点都没有找到，就会返回 undefined。

function person(){}

let p1 = new person();
p1.name; // undefined

上图中虚线部分由原型相互关联组成的链状结构就是所谓的原型链。

备注

---

不得不说，《javascript高级程序设计》这本书把原型讲得很透彻，今天再看一遍依然感觉通透。