Class語法 · 教案-標準教案-前端高階(v1)

## Class語法 > 1.簡介 2.嚴格模式 3.constructor 方法 4.類的實例對象 5.私有方法和私有屬性 6.this 的指向 7.name 屬性 8.Class 的取值函數（getter）和存值函數（setter） 9.Class 的靜態方法 10.Class 的靜態屬性和實例屬性 11.new.target 屬性 12.Class的繼承 ### 1.簡介 ~~~ //定義類 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } ~~~ ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫，就是下面這樣 ~~~ function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2); ~~~ ### 2.嚴格模式類和模塊的內部，默認就是嚴格模式，所以不需要使用use strict指定運行模式。只要你的代碼寫在類或模塊之中，就只有嚴格模式可用。 ### 3.constructor 方法 ~~~ class Point { } // 等同于 class Point { constructor() {} } ~~~ ~~~ class Foo { constructor() { return Object.create(null); } } new Foo() instanceof Foo // false ~~~ ### 4.類的實例對象 ~~~ class Point { // ... } // 報錯 var point = Point(2, 3); // 正確 var point = new Point(2, 3); ~~~ ### 5.私有方法和私有屬性 ~~~ class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return this.snaf = baz; } // ... } ~~~ ~~~ class Widget { foo (baz) { bar.call(this, baz); } // ... } function bar(baz) { return this.snaf = baz; } ~~~ ~~~ const bar = Symbol('bar'); const snaf = Symbol('snaf'); export default class myClass{ // 公有方法 foo(baz) { this[bar](baz); } // 私有方法 [bar](baz) { return this[snaf] = baz; } // ... }; ~~~ 私有屬性的提案 ~~~ class Point { #x; constructor(x = 0) { #x = +x; // 寫成 this.#x 亦可 } get x() { return #x } set x(value) { #x = +value } } ~~~ ### 6.this 的指向 ~~~ class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); } } const logger = new Logger(); const { printName } = logger; printName(); // TypeError: Cannot read property 'print' of undefined ~~~ ### 7.name 屬性 ~~~ class Point {} Point.name // "Point" ~~~ ### 8.Class 的取值函數（getter）和存值函數（setter） ~~~ class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: '+value); } } let inst = new MyClass(); inst.prop = 123; // setter: 123 inst.prop // 'getter' ~~~ ### 9.Class 的靜態方法 ~~~ class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new Foo(); foo.classMethod() // TypeError: foo.classMethod is not a function ~~~ ### 10.Class 的靜態屬性和實例屬性 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性 ~~~ class Foo { } Foo.prop = 1; Foo.prop // 1 ~~~ ### 11.new.target 屬性 ~~~ class Rectangle { constructor(length, width) { console.log(new.target === Rectangle); this.length = length; this.width = width; } } var obj = new Rectangle(3, 4); // 輸出 true ~~~ ### 12.Class的繼承 ~~~ class Point { } class ColorPoint extends Point { } ~~~ 該類通過extends關鍵字，繼承了Point類的所有屬性和方法 ~~~ class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 調用父類的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 調用父類的toString() } } ~~~ Object.getPrototypeOf() 判斷繼承關系 ~~~ Object.getPrototypeOf(ColorPoint) === Point ~~~ super 關鍵字 super這個關鍵字，既可以當作函數使用，也可以當作對象使用。在這兩種情況下，它的用法完全不同。第一種情況，super作為函數調用時，代表父類的構造函數。ES6 要求，子類的構造函數必須執行一次super函數。 ~~~ class A {} class B extends A { constructor() { super(); } } ~~~ ~~~ class A { constructor() { console.log(new.target.name); } } class B extends A { constructor() { super(); } } new A() // A new B() // B ~~~ ~~~ class A { p() { return 2; } } class B extends A { constructor() { super(); console.log(super.p()); // 2 } } let b = new B(); ~~~ ES6 規定，在子類普通方法中通過super調用父類的方法時，方法內部的this指向當前的子類實例。 ~~~ class A { constructor() { this.x = 1; } print() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } m() { super.print(); } } let b = new B(); b.m() // 2 ~~~ ### 課后習題 1.用class語法改造下面的代碼 ~~~ function Person (name,age) { this.name = name; this.age = age; } Person.prototype.getName =function(){ return this.name; } Person.prototype.getAge = function(){ return this.age; } ~~~ 2.請分析下面代碼的運行結果 ~~~ class A { constructor(){ this.x=1; this.y=2; } getX () { console.log(this.x) } } class B extends A { constructor(){ super(); this.x=4; } getY(){ console.log(super.y) } } var b = new B(); b.getX() b.getY() ~~~