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...