自我學習之es6 6

es6的新特性裡增加了類和類的繼承，其實這個特性也是向後台語言借鑑過來的，先來看下es5的時候如何構造乙個物件

function human()
human.prototype.singing=function()
let a = new human();
console.log(a);
a.singing();

如上，用es5的方法構造了乙個叫human的物件，在物件裡建立了2個屬性，並用prototype的方法掛載了乙個方法，申明了乙個a為human物件的例項化，並用這個a呼叫singing這個方法

再來看，如何用es6來申明乙個類：

class human
}let a = new human();
console.log(a);

es6用class關鍵字來申明乙個類，並用constructor來建立乙個類的建構函式，初始化乙個物件的屬性，其實es6只是用了一種更語義化、更規範的方式去申明乙個類，但是其背後的原理還是基於es5的，如果要建立乙個方法，也無需再掛載到原型上直接在物件裡建立

class human
singing()
}let a = new human();
console.log(a);
a.singing();

es6裡是如何繼承類的呢

class human
singing()
}let a = new human();
console.log(a);
a.singing();
class normalman extends human 
let b=new normalman();
console.log(b);

類可以繼承另外乙個類，使用extends語法，可以繼承到另外乙個類的所有屬性和方法，除此之外，它也可以改造繼承過來的屬性和方法或者建立新的屬性和方法

class human
singing()
}let a = new human();
console.log(a);
a.singing();
class normalman extends human 
singing()
run()
}let b=new normalman();
console.log(b);
b.singing();
b.run();

可以在constructor裡改造繼承過來的屬性，還可以新建自己的方法，super()呼叫了一下父類的建構函式，當繼承了另外乙個類的時候就必須使用，如果不用就會報錯。

我們可以在父類的建構函式裡傳參，在呼叫的時候傳參

class human
singing()
}let a = new human(3,4);
console.log(a);
a.singing();
class normalman extends human 
singing()
run()
}let b=new normalman();
console.log(b);
b.singing();
b.run();

super()裡呼叫的是父類的建構函式，所以super()裡也可以傳參

class human
singing()
}let a = new human(3,4);
console.log(a);
a.singing();
class normalman extends human 
singing()
run()
}let b=new normalman();
console.log(b);
b.singing();
b.run();

關於建構函式裡的this指向，我們可以在繼承的函式的建構函式裡面傳乙個name的引數，並在建構函式裡新建乙個name的屬性，在singing()的方法裡可以用模板字串$去拼接，最後在例項化的normalman()裡傳入mike，最後列印出來normalman這個物件裡有name: "mike"

如果用另外乙個變數去接收b裡面singing的方法，再呼叫這個方法，這個時候就和執行乙個普通函式一樣，這時再去列印this，this就為undefined

class human
singing()
}let a = new human(3,4);
console.log(a);
a.singing();
class normalman extends human 
singing() can sing`);*/
} run()
}let b=new normalman('mike');
console.log(b);
b.singing();
b.run();
let fnn=b.singing;
fnn();

那該怎麼去解決這個問題呢，如何讓這個this永遠指向new出來的這個例項？可以在constructor的建構函式裡寫上這句 this.singing=this.singing.bind(this);

class human
singing()
}let a = new human(3,4);
console.log(a);
a.singing();
class normalman extends human 
singing() can sing`);
} run()
}let b=new normalman('mike');
console.log(b);
b.singing();
b.run();
let fnn=b.singing;
fnn();

this.singing=this.singing.bind(this);後面的this.singing就是指後面的singing()這個方法，後面繫結了this，那這個時候let fnn=b.singing，這裡的b.singing訪問的就是this.singing，而這裡this.singing已經繫結了this的指向，這個時候去執行fnn，而這個this就是指構造的時候類的例項，這個時候執行fnn，就會發現列印出來的是mike也就是b這個例項化物件

自我學習之es6 6

自我學習之es6 7

關於自我學習之更新部落格

自我學習成長系列之 FirstHead設計模式》

自我學習之es6 6

自我學習之es6 7

關於自我學習之更新部落格

自我學習成長系列之 FirstHead設計模式》

相關推薦