原文鏈接:http://mp.weixin.qq.com/s?__biz=MzI0ODU5Mzg0NA==&mid=2247483660&idx=1&sn=7cbdcbcb230883327048848a40f5a29a&chksm=e99f2dd7dee8a4c14d8bb6233d98d96bbc137602c66dd07de76223a181928f613977a07eac8f#rd Class(類)Class是ES6引入的最重要特性之一。在沒有Class之前,我們只能通過原型鏈來模擬類。 Class Definition(類的定義)class Shape { constructor(name) { this.name = name; } move(x, y) { console.log(this.name + " Move to: " + x + "," + y); } } 上面定義了一個Shape類,他有一個屬性 name 和一個方法 move(),還有一個構(gòu)造函數(shù)。 調(diào)用Shape類 let shapA = new Shape("Shape A", 180, 240); // 輸出: Shape A Move to: 180,200 shapA.move(240, 320); // 輸出: Shape A Move to: 240,320 Class Inheritance(類的繼承)通過關(guān)鍵字 extends 來繼承一個類,并且可以通過 super 關(guān)鍵字來引用父類。 class Rectangle extends Shape { constructor(name) { super(name); } area(width, height) { console.log(this.name + " Area:" + width * height); } } class Circle extends Shape { constructor(name) { super(name); } area(radius) { console.log(this.name + " Area:" + 3.14 * radius * radius); } } 調(diào)用Rectangle、Circle類 let rectangleA = new Rectangle("Rectangle B"); let circleB = new Circle("Circle C"); rectangleA.move(100, 200); // 輸出: Rectangle B Move to: 100,200 rectangleA.area(30, 40); // 輸出: Rectangle B Area:1200 circleB.move(200, 300); // 輸出: Circle C Move to: 200,300 circleB.area(50); // 輸出: Circle C Area:7850 Getter/Setter在Class內(nèi)部可以使用get和set關(guān)鍵字,對某個屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為。 class People { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(name) { this._name = name; } sayName() { console.log(this._name); } } var p = new People("tom"); console.log(p.name); // TOM p.name = "john"; console.log(p.name); // JOHN p.sayName(); // john Static Members(靜態(tài)成員)類相當(dāng)于實例的原型,所有在類中定義的方法,都會被實例繼承。如果在一個方法前,加上static關(guān)鍵字,就表示該方法不會被實例繼承,而是直接通過類來調(diào)用,這就稱為“靜態(tài)方法”。 class F3 { static classMethod() { return 'hello'; } } F3.classMethod() // 輸出: hello var f3 = new F3(); // f3.classMethod(); // 輸出: TypeError: f3.classMethod is not a function 靜態(tài)屬性指的是Class本身的屬性,即Class.propname,而不是定義在實例對象(this)上的屬性。 class F4 {} F4.prop = 5; console.log(F4.prop) // 輸出: 5 其他完整代碼:https://github.com/guyoung/GyWxappCases/tree/master/ES6 |