ES6 中關於Class類的繼承理解

ES5 和 ES6 在類和繼承的不一樣，舉例以下：

ES5 的類和繼承： function Person(name){
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
var ops = new Person('娃哈哈');
console.log(ops.showName());  // 娃哈哈

ES6 的類和繼承：

class Person{  // Person類  它也是一個函數
    constructor(name){  // 構造函數
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
var p1 = new Person('娃哈哈');
console.log(p1.showName());  // 娃哈哈

 

---

constructor的中文意思就是構造，他在這裏表明的就是構造函數，那麼 class是一個類也是一個函數，只不過ES6標準是把這個函數包裝成了一個class的寫法而已，在new一個實例的時候，構造函數自動執行。

---

 

Class 能夠經過 extends 關鍵字實現繼承，這比 ES5 的經過修改原型鏈實現繼承，要清晰和方便不少，舉例以下：

ES5 以前的寫法： function Person(name){  // 父類
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
function SubPerson(name,job){  // 子類
    Person.call(this,name);  // 子類繼承父類的屬性 須要將this指向父類中的name
    this.job = job;  // job是子類本身的屬性
}
SubPerson.prototype = new Person();  // 子類繼承父類的方法
var p1 = new SubPerson('娃哈哈');
console.log(p1.name);  // 娃哈哈
// console.log(p1.showName());  // 娃哈哈

ES6 有Class類以後的寫法：

class Person{
    constructor(name){
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
class SubPerson extends Person{
    constructor(name,job){
        super(name);    // 指向父類的構造函數
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new SubPerson('娃哈哈','喜洋洋');
console.log(p1.name);  // 娃哈哈
// console.log(p1.showName());  // 娃哈哈
// console.log(p1.job); // 喜洋洋

 

---

 

estends 就是繼承的意思，super 就是指向父類的構造函數，指代了整個prototype對象或者_proto_指針指向的對象。

若是在子類中也寫入showName方法，和父類中的方法重名，這樣就會覆蓋父類的，假若不想覆蓋而是想引用父類的showName方法，那麼就在子類的showName方法中經過super來調用父類的showName： super.showName

 

---

該文引用了 https://www.jianshu.com/p/129976ab0015，用做學習記錄