資訊專欄INFORMATION COLUMN
摘要：理解繼承在中對繼承有了更友好的方式?？偟膩碚f的的實質(zhì)和以前的繼承方式是一致的，但是有了更好的，更清晰的表現(xiàn)形式。
理解ES6繼承extends
1.在es6中對繼承有了更友好的方式。在下面的繼承中那到底在extends的時候做了什么，super()又是代表什么意思。
class People{
constructor(name, age) {
this.name = name;
this.age = age;}
say(){
alert("hello")}
static see(){
alert("how are you")}}
class lily extends People{
constructor(){
super()}
goodbye(){alert("goodbye")}}
2.解析extends和super()
①在前面的文章中有提及class聲明類的原理：https://segmentfault.com/a/11...
②lily是People的子類，首先lily也是一個類；extends的過程中創(chuàng)建了一個自執(zhí)行函數(shù)，并將父類傳進去，繼承父類之后再返回該子類。lily.__proto__指的是當前對象所屬類的原型,也就是Object.getPrototypeOf(lily).
var lily = function(_People) {
inherits(lily, _People); //第一步，繼承父類原型
function lily() { //第二步，繼承父類對象屬性
return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
createClass(lily, [{ //第三步，創(chuàng)建子類自己的方法
key: "goodbye",
value: function goodbye() {
alert("goodbye");}}]);
return lily;
}(People);
③繼承的過程：一般繼承分兩步，call繼承+原型的繼承 （分別繼承父類對象屬行和原型屬性）
第一步：繼承父類的原型，通過Object.create，第一個參數(shù)是創(chuàng)建一個對象的原型，定義原型上的屬性constructor指向subclass；把父類的原型方法繼承給子類原型；
function inherits(subClass, superClass) {
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
第二步：call繼承，就是super()的處理過程，super()的實質(zhì)就是People.call(this);把父類的對象方法繼承給子類對象；這也是為什么在es6的繼承時必須要加上super()，因為不加的話無法繼承到父類的對象屬性。
function _possibleConstructorReturn(self, call) {
//call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
return call && (typeof call === "object" || typeof call === "function") ? call : self;
第三部：創(chuàng)建子類自己的方法。 可以參考class里面的實現(xiàn)過程。
總的來說es6的extends的實質(zhì)和以前的繼承方式是一致 的，但是有了更好的，更清晰的表現(xiàn)形式。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84436.html
摘要：并且用驗證了中一系列的實質(zhì)就是魔法糖的本質(zhì)。抽絲剝繭我們首先看的編譯結(jié)果這是一個自執(zhí)行函數(shù)，它接受一個參數(shù)就是他要繼承的父類，返回一個構(gòu)造函數(shù)。 如果你已經(jīng)看過第一篇揭秘babel的魔法之class魔法處理，這篇將會是一個延伸；如果你還沒看過，并且也不想現(xiàn)在就去讀一下，單獨看這篇也沒有關(guān)系，并不存在理解上的障礙。 上一篇針對Babel對ES6里面基礎(chǔ)class的編譯進行了分析。這一篇將...
摘要：歡迎關(guān)注我的博客正文讓我來構(gòu)造函數(shù)其實，模擬一個類的方式非常的簡單構(gòu)造函數(shù)。我們先來看一個例子這里通過構(gòu)造函數(shù)模擬出來的類，其實和其他語言的類行為上是基本一致的，唯一的區(qū)別就是它不具備私有方法。 前言 ES6時代的來臨，使得類繼承變得如此的圓滑。但是，你有思考過ES6的類繼承模式嗎？如何去實現(xiàn)它呢？ 類繼承對于JavaScript來說，實現(xiàn)方式與Java等類語言大不相同。熟悉JavaS...
摘要：請看對應(yīng)版本干了什么可知，相當于以前在構(gòu)造函數(shù)里的行為。這種寫法會與上文中寫法有何區(qū)別我們在環(huán)境下運行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統(tǒng)面向?qū)ο笳Z言的class寫法，ES6發(fā)布之后，Babel迅速跟進，廣大開發(fā)者也很快喜歡上ES6帶...
閱讀 1543·2021-09-22 15:35
閱讀 2020·2021-09-14 18:04
閱讀 896·2019-08-30 15:55
閱讀 2463·2019-08-30 15:53
閱讀 2694·2019-08-30 12:45
閱讀 1213·2019-08-29 17:01
閱讀 2594·2019-08-29 15:30
閱讀 3525·2019-08-29 15:09
