Hướng dẫn javascript extend class override function - chức năng ghi đè lớp mở rộng javascript

Question

Tôi đã tạo ra một lớp mở rộng mảng. Tôi muốn thực thi mã tùy ý trước khi gọi chức năng đẩy được kế thừa.

Nội dung chính Show

Từ khóa của người "mở rộng"
Ghi đè một phương thức
Chất xây dựng ghi đè
Các trường lớp ghi đè: một ghi chú khó
Super: Internals, [[HomeObject]]
class newArray extends Array{ push(value) { //execute any logic require before pushing value onto array console.log(`pushed ${value} on to array`) super.push(value) } } var array = new newArray array.push('new Value')17
Phương pháp không phải là miễn phí ”
Phương pháp, không phải thuộc tính chức năng
Bản tóm tắt
Một chức năng có thể mở rộng một lớp trong JavaScript không?
Làm thế nào để bạn ghi đè một hàm javascript?
Một lớp có thể mở rộng hai lớp javascript không?
Làm cách nào để mở rộng một lớp trong Node JS?

class newArray extends Array{
      //execute any logic require before pushing value onto array
      this.push(value)    
}

Đã hỏi ngày 6 tháng 10 năm 2016 lúc 3:00Oct 6, 2016 at 3:00

Giải pháp tôi tìm thấy là tạo ra một chức năng mới trong lớp con có cùng tên với hàm được kế thừa. Trong trường hợp này đẩy. Sau đó, bên trong hàm ghi đè hàm được kế thừa được gọi thông qua từ khóa siêu.

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

Hướng dẫn javascript extend class override function - chức năng ghi đè lớp mở rộng javascript

Lee Brindley

5.9705 Huy hiệu vàng36 Huy hiệu bạc62 Huy hiệu Đồng5 gold badges36 silver badges62 bronze badges

Đã trả lời ngày 6 tháng 10 năm 2016 lúc 3:00Oct 6, 2016 at 3:00

UdeshudeshUdesh

1.7092 Huy hiệu vàng19 Huy hiệu bạc25 Huy hiệu Đồng2 gold badges19 silver badges25 bronze badges

1

Di truyền lớp là một cách để một lớp mở rộng lớp khác.

Vì vậy, chúng ta có thể tạo chức năng mới trên đầu của hiện tại.

Từ khóa của người "mở rộng"

Hãy nói rằng chúng tôi có lớp

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");

1:

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");

Ở đây, cách thức chúng ta có thể biểu diễn đối tượng

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");

2 và lớp

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");

1 bằng đồ họa:

Chúng tôi muốn tạo ra một

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");

4 khác.

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

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 nên dựa trên

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");

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

Cú pháp để mở rộng lớp khác là:

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");

7.

Hãy để tạo ra

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");

4 kế thừa từ

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");

1:

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!

Đối tượng của lớp

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 cả hai phương thức

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, chẳng hạn như

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!

2, và cả các phương thức

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");

1, chẳng hạn như

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!

4.

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!

5 hoạt động bằng cách sử dụng các cơ chế nguyên mẫu cũ tốt. Nó đặt

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!

6 thành

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!

7. Vì vậy, nếu một phương pháp không được tìm thấy trong

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!

8, JavaScript lấy nó từ

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!

7.

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

0, động cơ 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

1 (không có

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

class User extends f("Hello") {}

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

2).

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

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!

8 (có

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

class User extends f("Hello") {}

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

4, nhưng không phải

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

class User extends f("Hello") {}

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

2).

Nguyên mẫu của nó, đó 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!

5)

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!

7, cuối cùng có phương pháp

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

class User extends f("Hello") {}

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

2.

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

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

class User extends f("Hello") {}

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

9 là

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

0. Đó 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 cho phép sau

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!

5

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

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!

5.

Chẳng hạn, một cuộc gọi chức năng 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
  }
}

3 kế 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
  }
}

4.

Điều đó có thể hữu ích cho các mẫu lập trình nâng cao khi chúng tôi sử dụng các chức năng để 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.

Ghi đè một phương thức

Bây giờ, hãy để di chuyển về phía trước và ghi đè 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

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");

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

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

6.

Nhưng nếu chúng tôi chỉ định phương pháp của riêng mình trong

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, chẳng hạn như

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

8 thì nó 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
  }
}

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

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

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

9 cho điều đó.

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 để gọi phương thức cha mẹ.

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!

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

Chẳng hạn, hãy để thỏ tự động của chúng tôi khi dừng lại:

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ờ

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ó phương thức

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 gọi cha mẹ

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 trong quy trình.

Các chức năng mũi tên không có

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

Như đã được đề cập trong chương các hàm mũi tên được xem xét lại, các hàm mũi tên không có

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.

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

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

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 trong hàm mũi tên giống như trong

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

8, do đó nó hoạt động như dự định. Nếu chúng tôi đã chỉ định một chức năng thường xuyên của người Viking ở đây, sẽ có một lỗi:

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

Chất xây dựng ghi đè

Với các nhà xây dựng, nó có một chút khó khăn.

Cho đến bây giờ,

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 không có

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

0 riêng.

Theo thông số kỹ thuật, nếu một lớp mở rộng lớp khác và không có

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

0, thì phần sau của trống rỗng ____ ____ ____ được tạo ra:

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

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

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

0 đã vượt qua tất cả các đối số. Điều đó xảy ra nếu chúng ta không viết một nhà xây dựng của riêng mình.

Bây giờ, hãy để thêm một hàm tạo tùy chỉnh vào

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. Nó sẽ chỉ định

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

5 ngoài

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

6:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

0

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

Câu trả lời ngắn gọn là:

Các hàm tạo trong các lớp kế thừa phải gọi
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!
1 và (!) Thực hiện trước khi sử dụng
class Rabbit extends Animal { stop() { setTimeout(() => super.stop(), 1000); // call parent stop after 1sec } }
8.

…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 để có được thông tin 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 tạo hàm của một lớp kế thừa (được gọi là hàm tạo có nguồn gốc từ) và các chức năng khác. Một hàm tạo có nguồn gốc có một thuộc tính nội bộ đặc biệt

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

9. Đó là một nhãn hiệu 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);

0.

Khi một hàm chính quy được thực thi với

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

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

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

8.

Nhưng khi một hàm tạo có nguồn gốc chạy, nó không làm điều này. Nó hy vọng nhà xây dựng cha mẹ sẽ thực hiện 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 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 để thực thi hàm tạo cha mẹ (cơ sở) của nó, nếu không thì đối tượng cho

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

8 won đã được tạo ra. Và chúng tôi sẽ gặp lỗi.

Để hàm tạo

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 hoạt động, nó cần gọi

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

6 trước khi sử dụng

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

8, như ở đây:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

1

Các trường lớp ghi đè: một ghi chú khó

Ghi chú nâng cao

Ghi chú này giả định rằng bạn có một trải nghiệm nhất định với các lớp, có thể trong các ngôn ngữ lập trình khác.

Nó cung cấp cái nhìn sâu sắc hơn về ngôn ngữ và cũng giải thích hành vi có thể là nguồn lỗi (nhưng không thường xuyên).

Nếu bạn thấy khó hiểu, chỉ cần tiếp tục, tiếp tục đọc, sau đó quay lại một thời gian sau đó.

Chúng ta có thể ghi đè không chỉ các phương thức, mà cả các trường lớp.

Mặc dù, có một hành vi khó khăn khi chúng ta truy cập vào một trường ghi đè trong hàm tạo cha mẹ, hoàn toàn khác với hầu hết các ngôn ngữ lập trình khác.

Xem xét ví dụ này:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

2

Ở đây, lớp

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 mở rộng

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");

1 và ghi đè trường

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

6 với giá trị riêng của nó.

Không có hàm tạo riêng trong

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ì vậy hàm tạo

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");

1 được gọi.

Điều thú vị là trong cả hai trường hợp:

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

3 và

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

4,

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

5 trong dòng

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6 cho thấy

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");

2.

Nói cách khác, hàm tạo cha mẹ luôn sử dụng giá trị trường của riêng mình, chứ không phải được ghi đè.

Điều gì kỳ quặc về nó?

Nếu nó chưa rõ ràng, xin vui lòng so sánh với các phương pháp.

Ở đây, cùng một mã, nhưng thay vì trường

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

8, chúng tôi gọi là phương thức

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

9:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

3

Xin lưu ý: Bây giờ đầu ra là khác nhau.

Và đó là những gì chúng ta tự nhiên mong đợi. Khi hàm tạo gốc được gọi trong lớp dẫn xuất, nó sử dụng phương thức ghi đè.

Nhưng đối với các lĩnh vực lớp học, nó không như vậy. Như đã nói, hàm tạo cha mẹ luôn sử dụng trường cha.

Tại sao lại có một sự khác biệt?

Vâng, lý do là thứ tự khởi tạo trường. Trường lớp được khởi tạo:

Trước khi xây dựng cho lớp cơ sở (điều đó không mở rộng bất cứ điều gì),

Ngay sau

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

6 cho lớp dẫn xuất.

Trong trường hợp của chúng tôi,

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 là lớp dẫn xuất. Không có

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

02 trong đó. Như đã nói trước đây, điều đó giống như khi có một hàm tạo trống chỉ với

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

03.

Vì vậy,

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

4 gọi

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

6, do đó thực hiện hàm tạo cha mẹ và (theo quy tắc cho các lớp dẫn xuất) chỉ sau đó các trường lớp của nó được khởi tạo. Tại thời điểm thực thi hàm tạo cha mẹ, chưa có trường nào

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, đó là lý do tại sao các trường

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");

1 được sử dụng.

Sự khác biệt tinh tế này giữa các trường và phương thức là dành riêng cho JavaScript.

May mắn thay, hành vi này chỉ tự tiết lộ nếu một trường ghi đè được sử dụng trong hàm tạo cha mẹ. Sau đó, có thể khó hiểu những gì mà xảy ra, vì vậy chúng tôi đã giải thích nó ở đây.

Nếu nó trở thành một vấn đề, người ta có thể sửa nó bằng cách sử dụng các phương thức hoặc getter/setters thay vì các trường.

Super: Internals, [[HomeObject]]

Thông tin nâng cao

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

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

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.

Hãy để Lừa có được sâu hơn một chút dưới mui xe

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. Chúng tôi sẽ thấy một số điều thú vị trên đường đi.

Đầu tiên để nói, từ tất cả những gì chúng tôi đã học được cho đến bây giờ,

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 không thể hoạt động!

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

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

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

12 thì động cơ cần lấy

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

13 từ 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 nó không phải là. Động cơ biết đối tượng hiện tại

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

8, vì vậy nó có thể nhận được cha mẹ

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

13 là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

16. Thật không may, một giải pháp ngây thơ của người Viking đã giành được công việc.

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

Bạn có thể bỏ qua phần này và đi bên dưới tiểu mục

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 nếu bạn không muốn biết chi tiết. Điều đó đã giành được tổn hại. Hoặc đọc xem bạn có quan tâm đến việc hiểu mọi thứ chuyên sâu hay không.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

18. Bây giờ, hãy thử thử: Trong

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

19, chúng tôi sẽ gọi

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

20, sử dụng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

21:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

4

Ở dòng

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6, chúng tôi lấy

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

23 từ nguyên mẫu (

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");

2) và gọi nó trong bối cảnh của đối tượng hiện tại. Xin lưu ý rằng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

25 rất quan trọng ở đây, bởi vì một

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

26 đơn giản sẽ thực thi cha mẹ

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

23 trong bối cảnh của nguyên mẫu, chứ không phải đối tượng hiện tại.

Và trong mã trên, nó thực sự hoạt động như dự định: Chúng tôi có chính xác

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

5.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

5

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

29.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6 và

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

32 Giá trị của

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

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

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

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

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

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6 và

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

32 Giá trị của

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

21 hoàn toàn giống nhau:

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

class User extends f("Hello") {}

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

1. Cả hai đều gọi

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

Ở đây, hình ảnh của những gì xảy ra:

Bên trong

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

29, dòng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

32 gọi

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

40 cung cấp nó với

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

44.

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

6

Sau đó, trong dòng

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6 của

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

40, chúng tôi muốn vượt qua cuộc gọi thậm chí cao hơn trong chuỗi, nhưng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

44, vì vậy

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

48 lại là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

40!

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

7

Vì vậy,

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

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

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

8 một mình.

class newArray extends Array{ push(value) { //execute any logic require before pushing value onto array console.log(`pushed ${value} on to array`) super.push(value) } } var array = new newArray array.push('new Value')17

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 của nó sẽ trở thành đối tượng đó.

Sau đó,

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 sử dụng nó để giải quyết nguyên mẫu cha mẹ và các phương thức của nó.

Hãy để xem cách thức hoạt động của nó, đầu tiên với các đối tượng đơn giản:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

8

Nó hoạt động như dự định, do cơ học

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17. Một phương pháp, chẳng hạn như

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

57, biết

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 của nó và lấy phương pháp cha mẹ từ nguyên mẫu của nó. Mà không cần sử dụng

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

8.

Phương pháp không phải là miễn phí ”

Như chúng tôi đã biết trước đây, các chức năng thường 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

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

8 khác.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 có thể thay đổi, vì vậy trái phiếu này là mãi mãi.

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 được sử dụng - là

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. Vì vậy, nếu một phương thức không sử dụng

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, 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 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 mọi thứ có thể đi sai.

Ở đây, bản demo của một kết quả sai

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 sau khi sao chép:

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

9

Một cuộc gọi đến

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

68 cho thấy tôi là một con vật. Chắc chắn sai.

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

Trong dòng

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

6, phương pháp

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

70 đã được sao chép từ

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

class User extends f("Hello") {}

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

1. Có lẽ chúng ta chỉ muốn tránh sao chép mã?

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 của nó là

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

class User extends f("Hello") {}

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

1, vì nó được tạo ra trong

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

class User extends f("Hello") {}

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

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17.

Mã của

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

68 có

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

77 bên trong. Nó tăng từ

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

class User extends f("Hello") {}

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

1 và lấy phương pháp từ

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");

2.

Ở đây, sơ đồ của những gì xảy ra:

Phương pháp, không phải thuộc tính chức năng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 được xác định 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 là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

81, không phải là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

82.

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

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

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

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

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");

0

Bản tóm tắt

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

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");

7:

Điều đó có nghĩa là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

85 sẽ là

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

86, 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 mẹ là

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

6 trong hàm tạo

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

88 trước khi sử dụng

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

8.

Khi ghi đè một phương thức khác:

Chúng ta có thể sử dụng

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

12 theo phương thức

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

88 để gọi phương thức

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

92.

Nội bộ:

Các phương thức ghi nhớ lớp/đối tượng của họ trong thuộc tính

class newArray extends Array{
    push(value) {
        //execute any logic require before pushing value onto array
        console.log(`pushed ${value} on to array`)
        super.push(value)
    }    
}

var array = new newArray

array.push('new Value')

17 nội bộ. Đó là cách mà

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 giải quyết các phương pháp cha mẹ.

Vì vậy, nó không an toàn để sao chép một phương thức với

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 từ đối tượng này sang đối tượng khác.

Also:

Các chức năng mũi tên don lồng có

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

8 hoặc

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 của riêng họ, vì vậy chúng phù hợp với bối cảnh xung quanh.

Một chức năng có thể mở rộng một lớp trong JavaScript không?

Từ khóa mở rộng có thể được sử dụng để phân lớp các lớp tùy chỉnh cũng như các đối tượng tích hợp. Bất kỳ hàm tạo nào có thể được gọi với mới (có nghĩa là nó phải có thuộc tính nguyên mẫu) có thể là ứng cử viên cho lớp cha. Nguyên mẫu của cha mẹ phải là một đối tượng hoặc null.. Any constructor that can be called with new (which means it must have the prototype property) can be the candidate for the parent class. The prototype of the ParentClass must be an Object or null .

Làm thế nào để bạn ghi đè một hàm javascript?

Để ghi đè một phương thức, chúng tôi cung cấp cho nó cùng tên và tham số như phương thức trong siêu lớp.Chúng ta có thể ghi đè nhận được () từ siêu lớp bằng cách mã hóa cùng một phương thức trong lớp con.give it the same name and parameters as the method in the superclass. We can override receiveDamage() from the superclass by coding the same method in the subclass.

Một lớp có thể mở rộng hai lớp javascript không?

Câu trả lời.Không, trong JavaScript, một lớp không thể mở rộng từ nhiều lớp, còn được gọi là nhiều kế thừa.Trong JavaScript, các đối tượng chỉ có thể được liên kết với một nguyên mẫu duy nhất và mở rộng nhiều lớp có nghĩa là một đối tượng liên kết với nhiều nguyên mẫu, điều này là không thể.No, in JavaScript, a class cannot extend from multiple classes, which is also known as “multiple inheritance”. In JavaScript, objects can only be associated with a single prototype, and extending multiple classes would mean that an object associates with multiple prototypes, which is not possible.

Làm cách nào để mở rộng một lớp trong Node JS?

Theo mặc định, mỗi lớp trong nút.JS chỉ có thể mở rộng một lớp duy nhất.Điều đó có nghĩa là, để thừa hưởng từ nhiều lớp, bạn cần tạo một hệ thống phân cấp các lớp mở rộng lẫn nhau.Nếu bạn có NPM V4 hoặc thấp hơn, chỉ cần nối một -s vào lệnh Cài đặt để tự động thêm nó vào các phụ thuộc trong gói.create a hierarchy of classes that extend each other. If you're with NPM v4 or lower, just append a -S to the install command to automatically add it to the dependencies in package.

programming javascript JavaScript override method Super method Inheritance JavaScript Nodejs inherit class

Hướng dẫn javascript extend class override function - chức năng ghi đè lớp mở rộng javascript

Từ khóa của người "mở rộng"

Ghi đè một phương thức

Chất xây dựng ghi đè

Các trường lớp ghi đè: một ghi chú khó

Super: Internals, [[HomeObject]]

class newArray extends Array{ push(value) { //execute any logic require before pushing value onto array console.log(`pushed ${value} on to array`) super.push(value) } } var array = new newArray array.push('new Value')17

Phương pháp không phải là miễn phí ”

Phương pháp, không phải thuộc tính chức năng

Bản tóm tắt

Một chức năng có thể mở rộng một lớp trong JavaScript không?

Làm thế nào để bạn ghi đè một hàm javascript?

Một lớp có thể mở rộng hai lớp javascript không?

Làm cách nào để mở rộng một lớp trong Node JS?

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