前端面試題 10 ES6的class有哪些特性?

2021-10-10 23:18:08 字數 2886 閱讀 9905

class基本概念

在js裡面,它實際上是沒有類的概念的,我們如果想要實現乙個物件導向的乙個程式設計,那麼只能夠借助建構函式,但是建構函式有著自身的缺點,首先第一點它的寫法不清晰,我們需要繼承的話就需要手動去操作prototype;其次它物件導向的思想也不是很強烈,所以在es6它封裝了一層建構函式的語法糖,就叫class,封裝後有了乙個更清晰的寫法,而且更加像乙個物件導向程式設計語言。

class(類)作為物件的模板被引入,可以通過class關鍵字定義類。

class的本質是function。

它可以看做是乙個語法糖,讓物件原型的寫法更加清晰、更像物件導向程式設計的語言。

區別1:更加清晰的寫法

在es5中:

function

position

(x,y)

const position =

newposition(1

,1);

<

/script>

在es6中:

在es6中,首先有乙個class修飾符,class將告訴我們編輯器宣告了乙個名叫position的class。class是建構函式的語法糖,我們怎麼來看呢?我們可以看一下這個建構函式它的prototype的constructor是否是本身,如果是本身那就說明class的行為跟建構函式是保持一致的。

class

position

}const position =

newposition(1

,1);

<

/script>

區別2:class的所有方法(包括靜態方法和例項方法)都沒有原型物件prototype,所以也沒有construct,不能用new來呼叫

**如下所示:

function

bar(

) bar.prototype.

print

=function()

const bar =

newbar()

;const barprint =

newbar.print()

; console.

log(bar)

console.

log(barprint)

class

fooprint()

}const foo =

newfoo()

;const fooprint =

newfoo.print()

; console.

log(foo)

; console.

log(fooprint)

區別3:class的所有方法(包括靜態方法和例項方法)都是不可列舉的

**如下所示

function

bar(

) bar.

answer

=function()

; bar.prototype.

print

=function()

const barkeys = object.

keys

(bar)

console.

log(barkeys)

const barprotokeys = object.

keys

(bar.prototype)

; console.

log(barprotokeys)

class

foostatic

answer()

print()

}const fookeys = object.

keys

(foo)

const fooprotokeys = object.

keys

(foo.prototype)

console.

log(fookeys)

; console.

log(fooprotokeys)

;

區別4:必須使用new呼叫class

function

bar(

)const bar =

newbar()

; console.

log(bar)

class

foo}

const foo =

foo();

console.

log(foo)

;

區別5:class內部無法重寫類名**如下

function

bar(

)const bar =

newbar()

; console.

log(bar)

console.

log(bar)

class

foo}

const foo =

newfoo()

console.

log(foo)

<

/script>

前端面試題 ES6

1.反引號 標識 模板字串 template string 是增強版的字串,用反引號 標識,它可以當作普通字串使用,也可以用來定義多行字串,或者在字串中嵌入變數 var name bob time today hello how are you hello bob,how are you today...

前端面試題

sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...

前端面試題

行內元素有哪些?塊級元素有哪些?空 void 元素有哪些?link和 import的區別是?常見相容性問題?含移動端 html5的離線儲存?描寫一段語義化的html 吧 html5的form如何關閉自動完成功能?什麼是閉包 closure 為什麼要用?localstorage和sessionstor...