javascript面向對象編程學習(二) —— 原型鏈繼承

導讀

javascript面向對象編程學習(一)

1. 構造函數、原型和實例的之間的關係：

每一個構造函數都有一個原型對象prototype，原型對象包含一個指向構造函數的指針constructor，而實例都包含一個指向原型對象的內部指針__proto__。咱們能夠利用它們的關係，實現原型鏈繼承!

1.1 假設有兩個構造函數 Person和Child，它們自身關係以下：

2. 實現原型鏈繼承

function Person(name) {
  this.name = name;
  this.names = ['大魔王']
}

Person.prototype.say = function() {
  console.log('my name is ' + this.name);
}

function Child() {}

const person = new Person('大魔王');

// Child的原型對象被更改成person實例
Child.prototype = person;

Child.prototype.getName = function() {
  console.log(this.name);
}

Child.prototype.getNames = function() {
    console.log(this.names)
}

var child = new Child();

child.say(); // my name is 大魔王
child.getName(); // 大魔王
複製代碼

2.1 它們新的關係以下：

在上圖能夠看到，
構造函數Child的原型對象prototype被修改成person實例，
child實例經過__proto__指向Child的原型對象，即person實例。

console.log(Child.prototype === person) // true
 console.log(child.__proto__ === person) // true 
複製代碼

3. 原型鏈繼承的缺點

使用原型建立對象會存在多個實例對引用類型的操做會被篡改的問題，以下：

child.names.push('我不是大魔王');
child.getNames(); // ["大魔王", "我不是大魔王"]
var child2 = new Child();
child2.getNames(); // ["大魔王", "我不是大魔王"]
複製代碼

child 和 child2兩個實例的names屬性指向相同，操做其中一個，另外一個也會被影響。

3.1 缺點有三 :

1. 原型鏈繼承多個實例的引用類型屬性指向相同，一個實例修改了原型屬性，另外一個實例的原型屬性也會被修改。
2. 不能傳遞參數。
3. 繼承單一。

4. tip

有錯誤請指出，你們互相學習