ES6中class的語法與繼承

2021-09-18 05:49:33 字數 3059 閱讀 1719

在es5中,我們常常會使用_proto_、prototype、constructor來實現繼承,這樣寫**多,寫法也不太清晰,所以在es2015版本中增加了class。

class a 

a.prototype //

//constructor: class a

//__proto__: object

從上面列印出的東西我們其實可以把class定義的認定為乙個function,其實typeof a列印出也是乙個function。

同時我們也可以看到,定義class的時候其實已經初始化了乙個constructor。

如果你在這個類裡寫其他function,在es5中其實預設是prototype裡的方法。

所以其實如果是例項化了也和es5是一樣的。

在另外一篇文章我已經簡單講過proto和prototype,

class表示式

先看一段**:

var class = class a 

};

在es5可以這樣寫:

var class = function a() 

};

如果在方法裡面沒有使用a,那可以把a省去不寫,因為你在外部不能呼叫a這個方法,只能通過class這個變數來訪問。在es6中,這個var最好是const來定義,防止其他地方把他篡改掉。

class也有類名,暫時沒有遇到實用場景。

class的this指向:

不規範會導致this指向錯誤導致報錯。

第乙個方法就是使用bind繫結this指向。例如:this.login=this.login.bind(this)。

第二個方法就是箭頭函式。(箭頭函式是可以繫結this的,在裡有寫到箭頭函式)

第三個方法是proxy(這是es6的乙個新語法,不太會的不建議使用,可讀性較差)

class的靜態方法:static

直接在方法前面寫static就能變成靜態方法,靜態方法不會被例項化繼承。

如果這個static方法裡有this,他的this指向這個類,而不是例項。並且他可以與非靜態方法重名。

class的繼承:

(「子類extends父類」)

class a 

class a1 extends a

tostring()

}

為什麼要寫super?

其實子類如果要用this方法的時候必須要通過父類來拿,super就是子類獲得this的方法。

es6的繼承,實際上就是將父類例項物件的屬性和方法加到this上面,所以必須在constructor裡面最先就呼叫super。同樣必須寫類似下面的**:

constructor(...args)
繼承會繼承靜態屬性和方法,但是不能被例項化,即不能被new。

super關鍵字

super既可以作為函式,也可以作為物件。

函式情況下:super()是代表呼叫父類的建構函式,繼承的函式必須在constructor方法裡面寫super函式,否則會報錯。

物件情況下:普通方法中指向父類的原型物件,靜態方法中指向父類。

class a 

print()

}class b extends a

m()

}let b = new b();

b.m()

//下面是列印的東西

//2//b

從上我們可以發現,在父類a的方法裡的this並沒有指向他的constructor,而是指向了子類,如果是new a(),將會正常指向到a,從這裡我們就應該明白:

m裡的super.print()實際是執行的super.print.call(this),他的 this 指向被 b 強行繫結給自己

super物件賦值和讀取的this指向也是不同的,如果是賦值操作,則指向當前this,如果是讀取操作,則指向父類。

使用super必須明確是函式還是物件,否則會報錯——uncaught syntaxerror: 'super' keyword unexpected here

先看一段**:

class a 

class b

// b 的例項繼承 a 的例項

object.setprototypeof(b.prototype, a.prototype);

// b 繼承 a 的靜態屬性

object.setprototypeof(b, a);

const b = new b();

你可能看不太懂上面的**,其實他就是class b extends a的內部實際執行的**。

原型和原型物件(即_proto_和prototype)

class a 

class b extends a

b.__proto__ === a // true

b.prototype.__proto__ === a.prototype // true

子類的原型是父類,子類的原型物件是父類原型物件的例項,父類有兩種繼承,一種繼承object,一種是繼承function,不繼承object就預設繼承function。

從上面的**裡,我們可以知道b.__proto__._proto_ === a._proto_。

原生建構函式的繼承

原生建構函式就是內建的一些函式,比如array()、date()、function()、object()等等。

由於他們的特殊性,你不能構造乙個與原生建構函式同名的類,也不能自己定義他們的子類。(因為會通過繼承改變子類的方法間接改變父類的方法),你只能例項化。

但是es6可以用extends來繼承。有興趣的可以自己嘗試。

(基本更新完成,後續遇到重點再做補充。)

es6 函式的擴充套件 class語法與繼承

function point x,y haha 1.1.注意 function ha x,y 1 const p new gha uncaught syntaxerror identifier x has already been declaredfunction foo foo undefined...

理解ES6中class語法

function point result point.prototype.add function var num new point add 建立例項並呼叫add方法 console.log num 列印這個方法的返回值1.宣告類 class point add let num new poin...

ES6入門 Class 的繼承

es6 提供了更接近傳統語言的寫法,引入了 class 類 這個概念,作為物件的模板。通過class關鍵字,可以定義類。基本上,es6 的class可以看作只是乙個語法糖,它的絕大部分功能,es5 都可以做到,新的class寫法只是讓物件原型的寫法更加清晰 更像物件導向程式設計的語法而已。傳統物件導...