ES6 Class基本用法

es6提供了更接近傳統語言的寫法，引入了class（類）這個概念，

作為物件的模板。通過class關鍵字，可以定義類。

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

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

1.我們先用建構函式來構造乙個物件：

function point (x,y)               
point.prototype.show = function ()                                       
var demo = new point(1,2);
demo.show();

2.然後我們用class類來改寫一下：

class point
show()
}var demo = new point(1,2);
demo.show();

**定義了乙個「類」，可以看到裡面有乙個constructor方法，這就是構造方法，而this關鍵字則代表例項物件。

注意，定義「類」的方法的時候，前面不需要加上function這個保留字，直接把函式定義放進去了就可以了。

另外，方法之間不需要逗號分隔，加了會報錯。

3.class資料型別:

class point {}
console.log(typeof point);
//function
console.log(point === point.prototype.constructor);
//true

我們發現類的資料型別就是函式，類本身就指向建構函式。

4.constructor方法

（1）constructor 方法 constructor方法是類的預設方法，通過new命令生成物件例項時，自動呼叫該方法。乙個類必須有constructor方法，如果沒有顯式定義，乙個空的constructor方法會被預設新增。

（2）constructor方法預設返回例項物件（即this），完全可以指定返回另外乙個物件。

class foo 
}console.log(new foo() instanceof foo);
//false

預設返回例項物件但是更改後就是新的物件。

5.prototype屬性

建構函式的prototype屬性，在es6的「類」上面繼續存在。

事實上，類的所有方法都定義在類的prototype屬性上面。

class point 
tostring() 
tovalue() 
}console.log(point.prototype);
//

另外要注意的是類內部所有定義的方法都是不可列舉的

class point 
tostring()         
}    
function point1 () 
}point1.prototype.tovalue = function ()                 
var demo = new point();
var demo1 = new point1();
for (var prop in demo)               
for (var prop in demo1)

6.類的例項共享乙個原型物件：

class point {}
var demo1 = new point();
point.prototype.say = function() ;
var demo2 = new point();
demo2.__proto__.printname = function() ;
var demo3 = new point();
demo1.printname();
//hello
demo2.printname();
//hello
demo3.printname();
//hello
demo1.say();
//world
demo2.say();
//world
demo3.say();
//world

例項的__proto__指向建構函式的prototype

7.name屬性

name 屬性由於本質上，es6的class只是es5的建構函式的一層包裝，所以函式的許多特性都被class繼承，包括name屬性。

**使用表示式定義了乙個類。需要注意的是，

這個類的名字是myclass而不是me，me只在class的內部**可用，指代當前類。

如果class內部沒用到的話，可以省略me，也就是可以寫成下面的形式：

const myclass = class me 
};let demo = new myclass();
console.log(demo.getclassname());
//me

同時class不存在變數提公升。

8.繼承

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

class father 
static show() 
eat()
}class child extends father 
static childshow()
childeat()
}var baby = new child();
child.childshow();
//hello dad
baby.childeat();
//eat
var dad = new father();
father.show();
//hello dad

靜態方法繼承的時候也需要借助我們的super方法，靜態的super指向的是類，非靜態方法指向的是原型。並且靜態方法只能繼承靜態方法而不能去繼承其他方法。這是因為靜態方法直接在類上呼叫，而不是在類的例項上呼叫。普通方法是繫結在類的原型鏈上，兩者繼承的話會找不到對應方法而報錯。

ES6 Class基本用法

ES6 Class的基本用法

ES6 Class語法介紹

簡單理解 es6 class

ES6 Class基本用法

ES6 Class的基本用法

ES6 Class語法介紹

簡單理解 es6 class

相關推薦