extends(Thừa kế)

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh

Từ khóa extends được sử dụng trong khai báo class hoặc trong class expressions để tạo ra 1 class con là con của class khác

Cú pháp

class ChildClass extends ParentClass { ... }

Mô tả

Từ khó extends có thể được sử dụng để tạo ra class con từ những class mà chúng ta tạo ra hoặc những class sẵn có

Thuộc tính .prototype của lớp được kế thừa phải trả về giá trị là  Object hoặc null.

Ví dụ

Sử dụng extends

Ở ví dụ đầu tiên tạo ra 1 class Square từ class Polygon. Ví dụ này được lấy từ  đây (source).

class Square extends Polygon {
  constructor(length) {
    // Ở đây, gọi 1 constructor từ class cha với tham số truyền vào là length
    // cung cấp chiều rộng vào chiều cao của class Polygon 
    super(length, length);
    // Chú ý: trong những class con, super()  phải được gọi trước khi
    // bạn có thể sử dụng từ khóa 'this'. Nếu không sẽ gây ra lỗi tham chiếu
    this.name = 'Square';
  }

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

Sử dụng extends với những object có sẵn

Trong ví dụ này chúng ta thừa kế từ object có sẵn là Date . Ví dụ này được lấy từ đây(source).

class myDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
  }
}

Thừa kế từ null

Thừa kế từ null cũng giống như class thông thường, ngoại trừ rằng các prototype của object sẽ không được thừa kế từ Object.prototype.

class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null

new nullExtends(); //ReferenceError: this is not defined

Thông số kĩ thuật

Thông số Trạng thái Bình luận
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'extends' in that specification.
Standard Initial definition.
ECMAScript (ECMA-262)
The definition of 'extends' in that specification.
Living Standard  

Trình duyệt tương thích

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
extendsChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36
Notes
Full support 36
Notes
Notes From Chrome 29 to 35 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari Full support 9WebView Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Chrome Android Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Firefox Android Full support 45Opera Android Full support 36
Notes
Full support 36
Notes
Notes From Chrome 29 to 35 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Safari iOS Full support 9Samsung Internet Android Full support 5.0nodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Bài viết liên quan