Ringkasan Kelas ES6 (9)

2024-07-12

Kelas di ES6 adalah gula sintaksis untuk pemrograman berorientasi objek, menyediakan cara ringkas untuk mendefinisikan struktur dan perilaku objek.

Dalam bahasa JavaScript, cara tradisional untuk menghasilkan objek instance adalah melalui konstruktor. Di bawah ini adalah contohnya.

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);
1
2
3
4
5
6
7
8

Pada dasarnya, kelas ES6 dapat dianggap hanya sebagai gula sintaksis. Sebagian besar fungsinya dapat dicapai oleh ES5. Metode penulisan kelas baru hanya membuat metode penulisan prototipe objek lebih jelas dan lebih mirip sintaksis pemrograman berorientasi objek. Kode di atas ditulis ulang menggunakan kelas ES6, sebagai berikut:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
1
2
3
4
5
6
7
8
9

Kelas ES6 dapat dianggap sebagai cara lain untuk menulis konstruktor:

class Point {
  // ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true

----------------------------------------------------------------------------
class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Fitur utama:

1. Sintaks deklaratif: Gunakan kata kunci class untuk mendeklarasikan kelas.
2. Konstruktor: Gunakan metode konstruktor untuk menginisialisasi instance kelas.
3. Metode contoh: Metode umum yang didefinisikan di dalam kelas, gunakan ini untuk mengakses properti instance.
4. Metode statis: Didefinisikan menggunakan kata kunci static dan tidak bergantung pada instance kelas.
5. Properti contoh: Inisialisasi di konstruktor, atau gunakan sintaks deklarasi bidang (saat ini merupakan proposal Tahap 3).
6. Warisan: Diimplementasikan menggunakan kata kunci extends.
7. kata kunci super: Memanggil konstruktor atau metode kelas induk di konstruktor subkelas.
8. pengambil dan penyetel: Gunakan get dan set untuk menentukan pengakses properti.
9. Properti dan metode pribadi: Gunakan # untuk mendefinisikan properti dan metode pribadi (saat ini merupakan proposal Tahap 3).

1. Definisi dan instantiasi kelas dasar

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `Point(${this.x}, ${this.y})`;
    }
}

let point = new Point(10, 20);
console.log(point.toString()); // 输出: Point(10, 20)
1
2
3
4
5
6
7
8
9
10
11
12
13

2. Metode dan properti statis

class MathUtils {
	constructor() {
    	console.log(MyClass.myStaticProp); // 42
    }
    static add(a, b) {
        return a + b;
    }
    static myStaticProp = 42;
}

console.log(MathUtils.add(1, 2)); // 输出: 3
1
2
3
4
5
6
7
8
9
10
11

3. Warisan dan super

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

class Square extends Rectangle {
    constructor(sideLength) {
        super(sideLength, sideLength);
    }
}

let square = new Square(5);
console.log(square.area()); // 输出: 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. pengambil dan penyetel

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }

    set width(newWidth) {
        if (newWidth > 0) {
            this.width = newWidth;
        } else {
            console.log("Width must be positive.");
        }
    }
}

let rect = new Rectangle(4, 5);
console.log(rect.area); // 输出: 20
rect.width = -10; // 输出: Width must be positive.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Catatan tentang kelas

(1) Modus ketat

Secara internal, kelas dan modul berada dalam mode ketat secara default, jadi tidak perlu menggunakan penggunaan ketat untuk menentukan mode berjalan. Selama kode Anda ditulis dalam kelas atau modul, hanya mode ketat yang tersedia. Mengingat bahwa semua kode di masa depan akan benar-benar berjalan dalam modul, ES6 sebenarnya meningkatkan seluruh bahasa ke mode ketat.

(2) Tidak ada promosi

Kelas tidak memiliki variabel hoist (hoist), yang sama sekali berbeda dari ES5.

new Foo(); // ReferenceError
class Foo {}

//不会报错
//因为 Bar 继承 Foo 的时候， Foo 已经有定义了。
//但是，如果存在 class 的提升，上面代码就会报错，
//因为 class 会被提升到代码头部，而 let 命令是不提升的，
//所以导致 Bar 继承 Foo 的时候， Foo 还没有定义。
{
  let Foo = class {};
  class Bar extends Foo {
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

(3) atribut nama

Karena pada dasarnya, kelas ES6 hanyalah pembungkus konstruktor ES5, banyak fitur fungsi yang diwarisi oleh Kelas, termasuk atribut nama.

class Point {}
Point.name // "Point"
//name 属性总是返回紧跟在 class 关键字后面的类名。
1
2
3

(4) Metode pembangkit

Jika suatu metode diawali dengan tanda bintang (*), berarti metode tersebut merupakan fungsi Generator.

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

//Foo 类的 Symbol.iterator 方法前有一个星号，表示该方法是一个 Generator 函数。 
//Symbol.iterator 方法返回一个 Foo 类的默认遍历器， for...of 循环会自动调用这个遍历器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(5) Inti dari ini

Jika metode kelas berisi ini, maka metode tersebut menunjuk ke sebuah instance kelas secara default. Namun, Anda harus sangat berhati-hati karena metode ini dapat menyebabkan kesalahan jika digunakan sendiri.

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
1
2
3
4
5
6
7
8
9
10
11

Hindari menggunakan ini, ikat ini di konstruktor:

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }
  // ...
}
1
2
3
4
5
6

Hindari penggunaan ini, gunakan fungsi panah:

class Obj {
  constructor() {
    this.getThis = () => this;
  }
}
const myObj = new Obj();
myObj.getThis() === myObj // true
1
2
3
4
5
6
7

Hindari menggunakan ini, gunakan Proxy

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}
const logger = selfish(new Logger());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Berbagi teknologi