ES6建構函式

2021-10-17 14:06:28 字數 2040 閱讀 1612

es6 提供了更接近傳統語言的寫法,引入了 class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。

基本上,es6 的class可以看作只是乙個語法糖,它的絕大部分功能,es5

都可以做到,新的class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法而已。

//傳統的es5建構函式

function

cat(name,color)

// 靜態屬性和方法 => 給建構函式自己使用

// 給建構函式 cat 定義了自己的方法 cat.iscat

cat.msg =

"這是建構函式cat"

; cat.

iscat

=function

(args)

if(args.constructor === cat)

return

false;}

// 動態方法(prototype) => 給通過該建構函式建立的例項化物件使用

cat.prototype.species=

"貓";

cat.prototype.

call

=function()

; cat.prototype.

skill

=function()

; cat.prototype.

say=

function()

;var tom =

newcat

("tom"

,"black"

);

上面的**用 es6的class改寫,就是下面這樣。

class

catstatic msg =

"這是乙隻貓"

;static

iscat()

else

// 動態方法(prototype) => 給通過該建構函式建立的例項化物件使用

// special = "貓"; // !! 在class中直接定義的變數 會作為例項的屬性 繫結到每乙個例項中

call()

say()

cat.prototype.special =

"貓";

var tom =

newcat

("tom"

,"black");

}

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

只繼承父類 例項的屬性和方法 原型物件的屬性和方法

class

tomcat

extends

cat;

var alex =

newtomcat

;//等價於var alex = new cat;

既繼承父類的 又拓展自己的

class

tomcat

extends

cat// 拓展自己的靜態方法和動態方法

// 靜態方法 => 建構函式自己用

static

istomcat

(arg)

return

false;}

// 動態方法prototype -> 例項化物件用

speak()

};tomcat.prototype.skin =

"tomcat"

;// tom -> tomcat.prototype -> cat.prototype -> object.prototype -> null

var tom =

newtom

("tom"

, black,18)

;

ES6建構函式class 和 ES5建構函式語法

在說建構函式之前,我們先講一講物件導向程式設計。所謂的物件導向程式設計,是一種程式設計思想和書寫方式方法,它是將程式封裝在物件內,並給物件設定屬性和屬性值。而這個封裝程式的物件我們稱之為例項化物件,而生成例項化物件的函式就是建構函式。一般情況下,為了和普通函式區別,我們將建構函式的首字母大寫。接下來...

ES5與ES6建構函式

function 函式名 引數 函式名.prototype.方法名 function class 類名 方法名稱 1.定義建構函式 es5 function 函式名定義 es6 class 類名定義 注 class建構函式類名後沒有 2.定義例項化物件屬性和屬性值 es5 function 函式中定...

ES5建構函式與ES6類

es5的建構函式 function f name f.prototype.writecss function f.writejs function 定義在類上的靜態屬性 let f new f f.writecss f.writejs es6的類 class f writecss static wr...