關於 ES 5 中的類、繼承 小記

ES 5 ---- 類

// 構造函數裏定義屬性 & 方法
function Person() {
    this.name = 'zhangsan';
    this.age = 18;
    this.run = function() {
        console.log(`${this.name}在跑步。`);
    }
}

// 原型鏈上定義屬性 & 方法
Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`${this.name}在工作。`);
}

// 靜態屬性
Person.location = '深圳';

// 靜態方法
Person.getInfo = function() {
    console.log('這是靜態方法執行的。');
}

// 實例化
var p = new Person();
// 實例方法是通過實例化來調用的
p.run();
p.work();

// 靜態方法是通過 類名.方法 直接調用
Person.getInfo();

ES 5 ---- 繼承

1. 對象冒充繼承 ，可以繼承構造函數裏的屬性 & 方法，不能繼承原型鏈上面的屬性 & 方法。
2. 原型鏈繼承 ，可以繼承構造函數裏面以及原型鏈上面的屬性 & 方法。
3. 原型鏈 + 對象冒充 組合繼承 ，可以繼承構造函數裏面以及原型鏈上面的屬性 & 方法，且可以解決實例化子類的時候沒法給父類傳參的問題。

//  1. 對象冒充繼承
function Web() {
    // 對象冒充繼承
    Person.call(this);
}

var w = new Web();

w.run();  // zhangsan在跑步。

// w.work();  // Uncaught TypeError: w.work is not a function

// 2. 原型鏈繼承
function Web2() {

}
// 原型鏈繼承
Web2.prototype = new Person();

var w2 = new Web2();
w2.run();  // zhangsan在跑步。
w2.work();  // zhangsan在工作。

原型鏈繼承存在問題：實例化子類的時候沒法給父類傳參。

function Person2(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(`${this.name}在跑步。`);
    }
}
Person2.prototype.sex = '男';
Person2.prototype.work = function() {
    console.log(`${this.name}在工作。`);
}

function Web3(name, age) {

}
Web3.prototype = new Person2();

var w3 = new Web3('李四', 20);
w3.run();  // undefined在跑步。
w3.work();  // undefined在工作。

解決方法：採用 原型鏈 + 對象冒充 組合繼承方式。

function Web4(name, age) {
    Person2.call(this, name, age);
}
Web4.prototype = new Person2();
// 因爲對象冒充繼承已經可以實現繼承構造函數裏的屬性 & 方法，因此再實現繼承原型鏈上的屬性 & 方法就可以了
// 所以上面的寫法等價於下面這行
// Web4.prototype = Person2.prototype;
var w4 = new Web4('李四', 20);
w4.run();  // 李四在跑步。
w4.work();  // 李四在工作。

ES 5 中的類 和 繼承先寫到這裏，後面有時間會記錄下 ES 6 中的。

與君共勉～