|
原文鏈接:http://mp.weixin.qq.com/s?__biz=MzI0ODU5Mzg0NA==&mid=2247483660&idx=1&sn=7cbdcbcb230883327048848a40f5a29a&chksm=e99f2dd7dee8a4c14d8bb6233d98d96bbc137602c66dd07de76223a181928f613977a07eac8f#rd Class(類(lèi))Class是ES6引入的最重要特性之一。在沒(méi)有Class之前,我們只能通過(guò)原型鏈來(lái)模擬類(lèi)。 Class Definition(類(lèi)的定義)
class Shape {
constructor(name) {
this.name = name;
}
move(x, y) {
console.log(this.name + " Move to: " + x + "," + y);
}
}
上面定義了一個(gè)Shape類(lèi),他有一個(gè)屬性 name 和一個(gè)方法 move(),還有一個(gè)構(gòu)造函數(shù)。 調(diào)用Shape類(lèi)
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(類(lèi)的繼承)通過(guò)關(guān)鍵字 extends 來(lái)繼承一個(gè)類(lèi),并且可以通過(guò) super 關(guān)鍵字來(lái)引用父類(lèi)。
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類(lèi)
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)鍵字,對(duì)某個(gè)屬性設(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)成員)類(lèi)相當(dāng)于實(shí)例的原型,所有在類(lèi)中定義的方法,都會(huì)被實(shí)例繼承。如果在一個(gè)方法前,加上static關(guān)鍵字,就表示該方法不會(huì)被實(shí)例繼承,而是直接通過(guò)類(lèi)來(lái)調(diào)用,這就稱(chēng)為“靜態(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,而不是定義在實(shí)例對(duì)象(this)上的屬性。
class F4 {}
F4.prop = 5;
console.log(F4.prop) // 輸出: 5
其他完整代碼:https://github.com/guyoung/GyWxappCases/tree/master/ES6 |