ES6的 super 關鍵字

2021-09-11 14:14:56 字數 3287 閱讀 7473

class之間可以通過extends關鍵字實現繼承,這比es5的通過修改原型鏈實現繼承,要清晰和方便很多。

子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。

這是因為子類沒有自己的this物件,而是繼承父類的this物件

,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。

在子類的建構函式中,只有呼叫super之後,才可以使用this關鍵字,否則會報錯。這是因為子類例項的構建,是基於對父類例項加工,只有super方法才能返回父類例項。

class colorpoint extends point 

tostring

() }

class point

}class colorpoint extends point

}let cp = new colorpoint(25, 8, 'green');

cp instanceof colorpoint // true

cp instanceof point // true

複製**

類的prototype屬性和proto屬性

大多數瀏覽器的es5實現之中,每乙個物件都有proto屬性,指向對應的建構函式的prototype屬性。class作為建構函式的語法糖,同時有prototype屬性和proto屬性,因此同時存在兩條繼承鏈。

1)子類的proto屬性,表示建構函式的繼承,總是指向父類。

2)子類prototype屬性的proto屬性,表示方法的繼承,總是指向父類的prototype屬性。

class a 

class b extends a

b.__proto__ === a // true

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

複製**

object.getprototypeof()

object.getprototypeof方法可以用來從子類上獲取父類。可以使用這個方法判斷,乙個類是否繼承了另乙個類。

object.getprototypeof(colorpoint) === point

// true

複製**

class的取值函式(getter)和存值函式(setter)

與es5一樣,在class內部可以使用get和set關鍵字,對某個屬性設定存值函式和取值函式,攔截該屬性的訪問行為。

class myclass 

get prop

() set prop(value)

}let inst = new myclass();

inst.prop = 123;

// setter: 123

inst.prop

// 'getter'

複製**

class不存在變數提公升(hoist),這一點與es5完全不同。

new foo(); // referenceerror

class foo {}

複製**

class立即執行表示式

採用class表示式,可以寫出立即執行的class。

let person = new class 

sayname

() }('張三');

person.sayname(); // "張三"

複製**

super這個關鍵字,既可以當作函式使用,也可以當作物件使用。在這兩種情況下,它的用法完全不同。

1) super作為函式呼叫時,代表父類的建構函式。es6 要求,子類的建構函式必須執行一次super函式。

class a {}

class b extends a

}複製**

注意,super雖然代表了父類a的建構函式,但是返回的是子類b的例項,即super內部的this指的是b,因此super()在這裡相當於

a.prototype.constructor.call(this) 。

2) super作為物件時,在普通方法中,指向父類的原型物件;在靜態方法中,指向父類。

class a 

}class b extends a

}let b = new b();複製**

由於super指向父類的原型物件,所以定義在父類例項上的方法或屬性,是無法通過super呼叫的。

class a 

}class b extends a

}let b = new b();

b.m // undefined複製**

如果屬性定義在父類的原型物件上,super就可以取到。

class a {}

a.prototype.x = 2;

class b extends a

}let b = new b();複製**

es6 規定,通過super呼叫父類的方法時,super會繫結子類的this。

class a 

print

() }

class b extends a

m()

}let b = new b();

b.m() // 2複製**

上面**中,super.print()雖然呼叫的是a.prototype.print(),但是a.prototype.print()會繫結子類b的this,導致輸出的是2,而不是1。也就是說,實際上執行的是super.print.call(this)。

ES6中的super關鍵字詳解

es6重新實現了類的繼承,而在繼承的過程中,super關鍵字實現了至關重要的作用,可以說理解不了super關鍵字,也就掌握不了類的繼承,今天我們就一起來盤盤super這個關鍵字 首先丟擲乙個概念 super這個關鍵字,既可以當作函式使用,又可以當作物件使用 第一種情況 super作為函式時,代表父類...

ES6新增關鍵字

let 關鍵字特點塊級作用域 if語句和for語句之類的大括號會隔離作用域if true console.log a 10 console.log b 報錯 referenceerror b is not definedconsole.log a 因為有變數宣告的提公升所以會輸出 undefined...

ES6 新增關鍵字let const

1 es6中新增的let關鍵字 之前我們宣告乙個變數時,都是使用關鍵字var,那新增加的let和var有什麼不同呢?var的不足之處一 var arr for vari 0 i 10 i arr 8 console.log i 的結果為 10 同樣的換成 let之後就沒問題 var arr for ...