Hướng dẫn javascript override method - phương pháp ghi đè javascript

Question

Không trừ khi bạn thực hiện tất cả các biến "công khai", tức là làm cho họ thành viên của

 .prototype.modify = function( ) { /* ... */ }

0 trực tiếp hoặc thông qua thuộc tính

 .prototype.modify = function( ) { /* ... */ }

1.

Nội dung chính Show

1. Từ khóa “extends”Từ khóa “extends”
2. Ghi đè(Overriding) một phương thứcGhi đè(Overriding) một phương thức
3. Overriding constructorOverriding constructor
4. Super: nội bộ(internals), [[HomeObject]]Super: nội bộ(internals), [[HomeObject]]
.prototype = new C ; 12
4.1. Các phương thức không phải là “miễn phí” để muốn làm gì thì làmCác phương thức không phải là “miễn phí” để muốn làm gì thì làm
4.2. Phương thức, không phải là thuộc tính hàmPhương thức, không phải là thuộc tính hàm
5. Tóm lượcTóm lược

var C = function( ) {
    this.x = 10 , this.y = 20 ;
    this.modify = function( ) {
        this.x = 30 , this.y = 40 ;
        console.log("(!) C >> " + (this.x + this.y) ) ;
    } ;
} ;

var A = function( ) {
    this.modify = function( ) {
       this.x = 300 , this.y = 400 ;
       console.log("(!) A >> " + (this.x + this.y) ) ;
    } ;
} ;
    A.prototype = new C ;

var B = function( ) {
    this.modify = function( ) {
       this.x = 3000 , this.y = 4000 ;
       console.log("(!) B >> " + (this.x + this.y) ) ;
    } ;
} ;


new C( ).modify( ) ;
new A( ).modify( ) ;
new B( ).modify( ) ;

Kiểm tra nó ở đây

Bạn sẽ nhận thấy một vài thay đổi.

Quan trọng nhất là cuộc gọi đến hàm tạo "siêu lớp" được cho là hiện đang ẩn trong dòng này:

.prototype = new C ;

Cả

 .prototype.modify = function( ) { /* ... */ }

2 và

 .prototype.modify = function( ) { /* ... */ }

3 giờ đây sẽ có các thành viên có thể sửa đổi riêng lẻ

 .prototype.modify = function( ) { /* ... */ }

4 và

 .prototype.modify = function( ) { /* ... */ }

5, điều này sẽ không xảy ra nếu chúng tôi đã viết

 .prototype.modify = function( ) { /* ... */ }

6 thay thế.

Sau đó,

 .prototype.modify = function( ) { /* ... */ }

4,

 .prototype.modify = function( ) { /* ... */ }

5 và

 .prototype.modify = function( ) { /* ... */ }

9 đều là thành viên "công khai" để gán một

 .prototype.modify = function( ) { /* ... */ }

0 khác cho họ

 .prototype.modify = function( ) { /* ... */ }

Sẽ "ghi đè" bản gốc

 .prototype.modify = function( ) { /* ... */ }

0 bằng tên đó.

Cuối cùng, cuộc gọi đến

 .prototype.modify = function( ) { /* ... */ }

9 không thể được thực hiện trong Tuyên bố

 .prototype.modify = function( ) { /* ... */ }

0 vì cuộc gọi ngầm đến "Super-Class" sau đó sẽ được thực thi lại khi chúng tôi đặt "Super-Class" cho thuộc tính

 .prototype.modify = function( ) { /* ... */ }

1 của "lớp được cho là" ".

Nhưng tốt, đây là ít nhiều bạn sẽ làm điều này như thế nào trong JavaScript.

HTH,

FK

Tính kế thừa của lớp là một cách để một lớp mở rộng từ một lớp khác.

Vì vậy, chúng ta có thể tạo phương thức mới trên các đối tượng hiện có.

1. Từ khóa “extends”
2. Ghi đè(Overriding) một phương thức
3. Overriding constructor
4. Super: nội bộ(internals), [[HomeObject]]
- [[HomeObject]]
4.1. Các phương thức không phải là “miễn phí” để muốn làm gì thì làm
- 4.2. Phương thức, không phải là thuộc tính hàm
5. Tóm lược

1. Từ khóa “extends”Từ khóa “extends”

2. Ghi đè(Overriding) một phương thức

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

3. Overriding constructor

Hướng dẫn javascript override method - phương pháp ghi đè javascript

4. Super: nội bộ(internals), [[HomeObject]]

Chúng ta có lớp

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

5:

Đây là cách chúng ta có thể biểu diễn đối tượng

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

6 và Sơ đồ của lớp

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

5:

Và tôi muốn tạo ra một cái khác

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

8.

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

Vì thỏ là động vật, lớp

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9nên dựa vào

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

5, có quyền truy cập vào các phương thức của động vật, để thỏ có thể làm những gì mà động vật có tên chung chung có thể làm.

Trong nội bộ, từ khóa

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

9 hoạt động bằng cách sử dụng các cơ chế của nguyên mẫu(prototype). Nó đặt

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

0thành

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

1. Vì vậy, nếu không tìm thấy một phương thức

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

2, JavaScript sẽ lấy nó từ đó

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

1.

Chẳng hạn, để tìm phương thức

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

4, động cơ sẽ kiểm tra (từ dưới lên trên hình):động cơ sẽ kiểm tra (từ dưới lên trên hình):

Đối tượng

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5 (không có

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

6).

Nguyên mẫu của nó, đó là

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

2(có

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

8, nhưng không

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

6).

Nguyên mẫu của nó, nghĩa là (do

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

9)

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

1, cuối cùng cũng có phương thức

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

6.

Như chúng ta có thể nhớ lại từ chương Native prototypes, JavaScript tự sử dụng tính kế thừa nguyên mẫu cho các đối tượng. Ví dụ như

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

3là

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

4. Đó là lý do tại sao ngày có quyền truy cập vào các phương thức đối tượng chung.

Bất kỳ biểu thức nào cũng được cho phép

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

5

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

5

Cú pháp class cho phép chỉ định không chỉ một lớp, mà bất kỳ biểu thức nào cũng đi sau từ khoá

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

9.

Ví dụ, một lệnh gọi hàm tạo lớp cha:

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

Ở đây

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

7kế thừa từ kết quả của

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

8.

Điều đó có thể hữu ích cho các mẫu lập trình nâng cao khi chúng ta sử dụng các hàm để tạo các lớp tùy thuộc vào nhiều điều kiện và có thể kế thừa từ chúng.

2. Ghi đè(Overriding) một phương thứcGhi đè(Overriding) một phương thức

Bây giờ chúng ta hãy tiến lên và ghi đè(Overriding) một phương thức. Theo mặc định, tất cả các phương thức không được chỉ định trong

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

8đều được thực hiện trực tiếp như là từ

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

0.

Nhưng nếu chúng ta chỉ định phương thức riêng của mình trong

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9, chẳng hạn như

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

2nó sẽ được sử dụng thay thế:

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

Thông thường chúng ta không muốn thay thế hoàn toàn một phương thức cha, mà là xây dựng lại phương thức cha để điều chỉnh hoặc mở rộng hàm của nó. Chúng ta làm một cái gì đó trong phương thức của chúng ta, nhưng gọi phương thức cha trước / sau nó hoặc trong quy trình.

Các lớp cung cấp từ khóa

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

3 để làm điều đó.

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

4 để gọi một phương thức cha.

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

5 để gọi một hàm tạo của cha (chỉ bên trong hàm tạo của chúng ta).

Ví dụ, hãy để thỏ của chúng ta tự động khi dừng lại:

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

Bây giờ

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9có phương thức

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

7 và nó gọi phương thức cha

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

8trong quá trình.

Hàm mũi tên không có

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

9

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

9

Các hàm mũi tên không có

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0.

Nếu được truy cập, nó được lấy từ hàm bên ngoài. Ví dụ:

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

Hàm

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0trong mũi tên giống như trong

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

2, vì vậy nó hoạt động như dự định. Nếu chúng ta đã chỉ định một hàm thông thường của người dùng ở đây, thì sẽ xảy ra lỗi:

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3. Overriding constructorOverriding constructor

Với các constructor, nó có một chút khó khăn.constructor, nó có một chút khó khăn.

Cho đến bây giờ,

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9không có

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

4riêng của nó .

Theo đặc tả , nếu một lớp mở rộng một lớp khác và không có

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

4, thì lớp trống rỗng sau đây được tạo ra một

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

4:

.prototype = new C ;

0

Như chúng ta có thể thấy, về cơ bản nó gọi

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

4cha truyền cho nó tất cả các đối số. Điều đó xảy ra nếu chúng ta không viết một

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

4 của riêng lớp con.

Bây giờ hãy thêm một hàm tạo tùy chỉnh của mình vào

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9. Nó sẽ tạo thêm

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

0ngoài thuộc tính

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

1:

.prototype = new C ;

1

Rất tiếc! Chúng ta đã có một lỗi. Bây giờ chúng ta không thể tạo ra thỏ. Có chuyện gì?

Câu trả lời ngắn gọn là: các hàm xây dựng(constructors) trong kế thừa các lớp phải gọi

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

5và phải Làm điều đó trước khi sử dụng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3.

…Nhưng tại sao? Những gì đang xảy ra ở đây? Thật vậy, yêu cầu có vẻ lạ.

Tất nhiên, có một lời giải thích. Hãy đi vào chi tiết, vì vậy bạn sẽ thực sự hiểu những gì đang diễn ra.

Trong JavaScript, có một sự khác biệt giữa hàm xây dựng(constructors) của một lớp kế thừa (cái gọi là hàm tạo của lớp dẫn xuất hay hàm tạo của lớp con) và các hàm khác. Một constructor dẫn xuất có một thuộc tính nội bộ đặc biệt

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

4. Đó là một nhãn nội bộ đặc biệt.

Nhãn đó ảnh hưởng đến hành vi của nó với

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

5.

Khi một hàm thông thường được thực thi

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

5, nó sẽ tạo một đối tượng trống và gán nó cho

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3.

Nhưng khi một hàm tạo dẫn xuất chạy, nó không làm điều này. Nó hy vọng các hàm xây dựng(constructors) cha sẽ làm công việc này.

Vì vậy, một hàm tạo có nguồn gốc phải gọi

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0để thực thi hàm tạo (không dẫn xuất) của nó, nếu không thì đối tượng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3sẽ không được tạo. Và chúng ta sẽ nhận được một lỗi.

Để hàm tạo

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

9 hoạt động, nó cần gọi

.prototype = new C ;

01trước khi sử dụng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3, như ở đây:

.prototype = new C ;

2

4. Super: nội bộ(internals), [[HomeObject]]Super: nội bộ(internals), [[HomeObject]]

Thông tin nâng cao

Nếu bạn đang học bài hướng dẫn này lần đầu tiên – phần này có thể bị bỏ qua.

Đó là về các cơ chế nội bộ đằng sau sự kế thừa và

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0.

Chúng ta hãy đi sâu hơn một chút` của

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0. Chúng ta sẽ thấy một số điều thú vị trên đường đi.

Đầu tiên phải nói, từ tất cả những gì chúng ta đã học cho đến bây giờ, nó không thể làm cho

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0 làm việc được!

Vâng, thực sự, chúng ta hãy tự hỏi, làm thế nào nó nên hoạt động về mặt kỹ thuật? Khi một phương thức đối tượng chạy, nó nhận được đối tượng hiện tại là

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3. Nếu chúng ta gọi

.prototype = new C ;

07thì Công cụ của Javascript cần lấy

.prototype = new C ;

08từ nguyên mẫu của đối tượng hiện tại. Nhưng bằng cách nào?

Nhiệm vụ có vẻ đơn giản, nhưng không phải. Công cụ biết đối tượng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3 hiện tại , vì vậy nó có thể lấy

.prototype = new C ;

08cha là

.prototype = new C ;

11. Thật không may, một giải pháp này không hoạt động.

Hãy chứng minh vấn đề. Không có các lớp, sử dụng các đối tượng đơn giản vì mục đích đơn giản.

Bạn có thể bỏ qua phần này và đi đến phần phụ

.prototype = new C ;

12 nếu bạn không muốn biết chi tiết. Điều đó sẽ không gây hại. Hoặc đọc tiếp nếu bạn muốn tìm hiểu sâu về những điều sâu sắc.

Trong ví dụ dưới đây ,

.prototype = new C ;

13. Bây giờ hãy thử:

.prototype = new C ;

14chúng ta sẽ gọi

.prototype = new C ;

15, sử dụng

.prototype = new C ;

16:

.prototype = new C ;

3

Tại dòng

.prototype = new C ;

17chúng ta lấy

.prototype = new C ;

18từ nguyên mẫu (

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

6) và gọi nó trong ngữ cảnh của đối tượng hiện tại. Xin lưu ý rằng điều này rất quan trọng ở đây

.prototype = new C ;

20, bởi vì đơn giản

.prototype = new C ;

21sẽ thực thi

.prototype = new C ;

18 cha trong ngữ cảnh của nguyên mẫu, không phải đối tượng hiện tại.

Và trong đoạn code trên nó thực sự hoạt động như dự định: chúng ta có chính xác

.prototype = new C ;

23.

Bây giờ hãy thêm một đối tượng vào chuỗi. Chúng ta sẽ thấy mọi thứ vỡ như thế nào:

.prototype = new C ;

4

Code không hoạt động nữa! Chúng ta có thể thấy lỗi khi cố gắng gọi

.prototype = new C ;

24.

Nó có thể không rõ ràng, nhưng nếu chúng ta theo dõi lệnh gọi

.prototype = new C ;

24, thì chúng ta có thể thấy lý do tại sao. Trong cả hai dòng

.prototype = new C ;

17và

.prototype = new C ;

27giá trị của

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3là đối tượng hiện tại (

.prototype = new C ;

29). Điều đó rất cần thiết: tất cả các phương thức đối tượng đều lấy đối tượng hiện tại

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3, không phải là nguyên mẫu hay thứ gì đó.

Vì vậy, trong cả hai dòng

.prototype = new C ;

17và

.prototype = new C ;

27giá trị của

.prototype = new C ;

16là hoàn toàn giống nhau :

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5. Cả hai gọi

.prototype = new C ;

35mà không đi lên chuỗi xử lý trong vòng lặp vô tận.

Đây là bức tranh về những gì xảy ra:

Bên trong

.prototype = new C ;

24, các

.prototype = new C ;

27 gọi

.prototype = new C ;

35cung cấp cho nó với

.prototype = new C ;

39.

.prototype = new C ;

5

2. Sau đó, trong dòng

.prototype = new C ;

17của

.prototype = new C ;

35, chúng ta muốn vượt qua lệnh gọi thậm chí cao hơn trong chuỗi xử lý, nhưng

.prototype = new C ;

39, vì vậy

.prototype = new C ;

43là một lần nữa

.prototype = new C ;

35!

.prototype = new C ;

6

3. Vì vậy, bản thân

.prototype = new C ;

35gọi nó trong vòng lặp vô tận, bởi vì nó không thể tăng thêm nữa.

Vấn đề không thể được giải quyết bằng cách sử dụng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3một mình.

.prototype = new C ; 12

Để cung cấp giải pháp, JavaScript thêm một thuộc tính nội bộ đặc biệt cho các hàm :

.prototype = new C ;

12.

Khi một hàm được chỉ định là một phương thức lớp hoặc đối tượng, thuộc tính của nó

.prototype = new C ;

12trở thành đối tượng đó.

Sau đó

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0sử dụng nó để giải quyết nguyên mẫu cha và các phương thức của nó.

Chúng ta hãy xem cách nó hoạt động, đầu tiên với các đối tượng đơn giản:

.prototype = new C ;

7

Nó hoạt động như dự định, do

.prototype = new C ;

12cơ học. Một phương thức, chẳng hạn như

.prototype = new C ;

52, biết phương thức của nó

.prototype = new C ;

12và lấy phương thức cha từ nguyên mẫu của nó. Mà không sử dụng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3.

4.1. Các phương thức không phải là “miễn phí” để muốn làm gì thì làmCác phương thức không phải là “miễn phí” để muốn làm gì thì làm

Như chúng ta đã biết trước đây, các phương thức nói chung là miễn phí, không bị ràng buộc với các đối tượng trong JavaScript. Vì vậy, chúng có thể được sao chép giữa các đối tượng và được gọi với một đối tượng khác

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3.

Chính sự tồn tại của

.prototype = new C ;

12vi phạm nguyên tắc đó, bởi vì các phương thức ghi nhớ các đối tượng của chúng.

.prototype = new C ;

12không thể thay đổi.

Nơi duy nhất trong ngôn ngữ

.prototype = new C ;

12được sử dụng – là

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0. Vì vậy, nếu một phương thức không sử dụng

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0, thì chúng ta vẫn có thể xem xét nó miễn phí và sao chép giữa các đối tượng. Nhưng với

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0những điều có thể đi sai.

Đây là bản demo của một

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0kết quả sai sau khi sao chép:

.prototype = new C ;

8

Một lệnh gọi cho

.prototype = new C ;

63thấy tôi là một động vật. Chắc chắn là sai.

Lý do rất đơn giản:

Trong dòng

.prototype = new C ;

17, phương thức

.prototype = new C ;

65được sao chép từ

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5. Có lẽ chúng ta chỉ muốn tránh trùng lặp code?

Nó

.prototype = new C ;

12là

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5, như nó đã được tạo ra trong

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5. Không có cách nào để thay đổi

.prototype = new C ;

12.

Code của

.prototype = new C ;

63có

.prototype = new C ;

72bên trong. Nó đi lên từ

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

5và lấy phương thức từ

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

6.

Đây là sơ đồ của những gì xảy ra:

4.2. Phương thức, không phải là thuộc tính hàmPhương thức, không phải là thuộc tính hàm

.prototype = new C ;

12được định nghĩa cho các phương thức cả trong các lớp và trong các đối tượng đơn giản. Nhưng đối với các đối tượng, các phương thức phải được chỉ định chính xác

.prototype = new C ;

76, không phải là

.prototype = new C ;

77.

Sự khác biệt có thể không cần thiết đối với chúng ta, nhưng nó quan trọng đối với JavaScript.

Trong ví dụ dưới đây, một cú pháp phi phương thức được sử dụng để so sánh.

.prototype = new C ;

12thuộc tính không được đặt và thừa kế không hoạt động:

.prototype = new C ;

9

5. Tóm lượcTóm lược

Để mở rộng một lớp

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

1::

Điều đó có nghĩa
```
.prototype = new C ;
```
80là
```
.prototype = new C ;
```
81, vì vậy các phương thức được kế thừa.

Khi ghi đè một hàm tạo:
- Chúng ta phải gọi hàm tạo cha như
```
.prototype = new C ;
```
  01trong hàm
```
.prototype = new C ;
```
  83tạo trước khi sử dụng
```
// Unexpected super
setTimeout(function() { super.stop() }, 1000);
```
  3.
Khi ghi đè phương thức khác:
- Chúng ta có thể sử dụng
```
.prototype = new C ;
```
  07trong một
```
.prototype = new C ;
```
  83phương thức để gọi
```
.prototype = new C ;
```
  87phương thức.
Nội bộ:
- Các phương thức ghi nhớ lớp / đối tượng của chúng trong thuộc tính bên trong
```
.prototype = new C ;
```
  12. Đó là cách
```
class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}
```
  0giải quyết các phương thức cha.
- Vì vậy, không an toàn khi sao chép một phương thức
```
class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}
```
  0từ đối tượng này sang đối tượng khác.

Cũng như vậy:

Các hàm mũi tên không có riêng

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

3hoặc

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

0, vì vậy chúng hoàn toàn phù hợp với bối cảnh hiện tại.

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Group Facebook
Fanpage
Youtube
Instagram
Twitter
Linkedin
Pinterest
Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

programming javascript TypeScript override method Override method js

Hướng dẫn javascript override method - phương pháp ghi đè javascript

1. Từ khóa “extends”Từ khóa “extends”

2. Ghi đè(Overriding) một phương thứcGhi đè(Overriding) một phương thức

3. Overriding constructorOverriding constructor

4. Super: nội bộ(internals), [[HomeObject]]Super: nội bộ(internals), [[HomeObject]]

.prototype = new C ; 12

4.1. Các phương thức không phải là “miễn phí” để muốn làm gì thì làmCác phương thức không phải là “miễn phí” để muốn làm gì thì làm

4.2. Phương thức, không phải là thuộc tính hàmPhương thức, không phải là thuộc tính hàm

5. Tóm lượcTóm lược

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội