JavaScript 核心 (45) - 繼承與原型鍊 - 原型鏈、建構函式整體結構概念

範例程式碼

我們會以下列程式碼來分別介紹 __proto__ 、 prototype跟物件以及函式的關係:

1. 物件的 proto 是誰?

2. 建構函式 prototype 與 __proto__ 關係

3. Function Object 的 __proto__ 、 prototype 關係

function Animal(family) {
  this.kingdom = '動物界';
  this.family = family || '人界';
};
Animal.prototype.move = function () {
  console.log(this.name + '移動');
};
function Dog(name, color, size) {
  Animal.call(this, '犬科');
  this.name = name;
  this.color = color || '白色';
  this.size = size || '小';
};
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + '吠叫');
};
var Bibi = new Dog('比比', '棕色', '小');
Bibi.bark();
Bibi.move();

• 物件的 __proto__ 是誰?
  Bibi 透過（重點) __proto__ 會向上找到 Dog.prototype，這個 Dog.prototype是依照 constructor 而建立。
  Dog.prototype 的 constructor 則會指向 Dog 建構函式
  

• 建構函式 prototype 與 __proto__
  使用 Dog.prototype 來產生相對應的原型，而之所以能這樣使用是因為 Dog.__proto__ 也繼承於 Function.prototype
  

• Function Object 的 __proto__ 、 prototype
Function.constructor 則回指向 Function 本身
  而 Function.__proto__ 又會指向 Function.prototype
Function.prototype.__proto__ 又會指向 Object.prototype
  

驗證

function Animal(family) {
  this.kingdom = '動物界';
  this.family = family || '人界';
};
Animal.prototype.move = function () {
  console.log(this.name + '移動');
};
function Dog(name, color, size) {
  Animal.call(this, '犬科');
  this.name = name;
  this.color = color || '白色';
  this.size = size || '小';
};
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + '吠叫');
};
var Bibi = new Dog('比比', '棕色', '小');

console.log(Bibi); /* true */

console.log(Bibi.__proto__ === Dog.prototype); /* true */
console.log(Bibi.__proto__.__proto__ === Animal.prototype); /* true */
console.log(Bibi.__proto__.__proto__.constructor === Animal); /* true */
console.log(Bibi.__proto__.__proto__.__proto__.__proto__ === null);  /* true */

console.log(Dog.__proto__ === Function.prototype);  /* true */
console.log(Animal.__proto__ === Function.prototype);  /* true */
console.log(Object.__proto__ === Function.prototype);  /* true */

console.log(Function.__proto__ === Function.prototype);  /* true */
console.log(Function.__proto__.__proto__ === Object.prototype);  /* true */

參考資料

六角學院 - JavaScript 核心篇