Các phương pháp ghi đè JavaScript

Giả sử bạn có mã dưới đây:

function A() {
    function modify() {
       x = 300;
       y = 400;
    }

    var c = new C();
}

function B() {
    function modify(){
       x = 3000;
       y = 4000;
    }

    var c = new C();
}

C = function () {
   var x = 10;
   var y = 20;

   function modify() {
      x = 30;
      y = 40;
   };

   modify();
   alert("The sum is: " + (x+y));
}

Bây giờ câu hỏi là, nếu có bất kỳ cách nào mà tôi có thể ghi đè phương thức modifytừ đó Cvới các phương thức có trong Avà B. Trong Java, bạn sẽ sử dụng super-keyword, nhưng làm thế nào bạn có thể đạt được thứ như thế này trong JavaScript?

Chỉnh sửa: Đã sáu năm kể từ khi câu trả lời ban đầu được viết và rất nhiều điều đã thay đổi!

• Nếu bạn đang sử dụng phiên bản JavaScript mới hơn, có thể được biên dịch bằng một công cụ như Babel , bạn có thể sử dụng các lớp thực .
• Nếu bạn đang sử dụng các hàm tạo thành phần giống lớp được cung cấp bởi Angular hoặc React , bạn sẽ muốn xem tài liệu cho khung đó.
• Nếu bạn đang sử dụng ES5 và tạo các lớp "giả" bằng tay bằng các nguyên mẫu, thì câu trả lời dưới đây vẫn đúng như trước đây.

Chúc may mắn!

Kế thừa JavaScript trông hơi khác so với Java. Đây là giao diện của hệ thống đối tượng JavaScript gốc:

// Create a class
function Vehicle(color){
  this.color = color;
}

// Add an instance method
Vehicle.prototype.go = function(){
  return "Underway in " + this.color;
}

// Add a second class
function Car(color){
  this.color = color;
}

// And declare it is a subclass of the first
Car.prototype = new Vehicle();

// Override the instance method
Car.prototype.go = function(){
  return Vehicle.prototype.go.call(this) + " car"
}

// Create some instances and see the overridden behavior.
var v = new Vehicle("blue");
v.go() // "Underway in blue"

var c = new Car("red");
c.go() // "Underway in red car"

Thật không may, điều này hơi xấu và nó không bao gồm một cách rất hay để "siêu": bạn phải chỉ định thủ công phương thức của lớp cha mà bạn muốn gọi. Do đó, có rất nhiều công cụ giúp tạo các lớp đẹp hơn. Hãy thử xem Prototype.js, Backbone.js hoặc một thư viện tương tự bao gồm cú pháp đẹp hơn để thực hiện OOP trong js.

Vì đây là một thành công hàng đầu trên Google, tôi muốn đưa ra câu trả lời cập nhật.

Sử dụng các lớp ES6 giúp cho việc kế thừa và ghi đè phương thức trở nên dễ dàng hơn rất nhiều:

'use strict';

class A {
    speak() {
        console.log("I'm A");
    }
}

class B extends A {
    speak() {
        super.speak();

        console.log("I'm B");
    }
}

var a = new A();
a.speak();
// Output:
// I'm A

var b = new B();
b.speak();
// Output:
// I'm A
// I'm B

Các supertừ khóa liên quan đến các tầng lớp phụ huynh khi được sử dụng trong lớp kế thừa. Ngoài ra, tất cả các phương thức trên lớp cha được liên kết với thể hiện của lớp con, vì vậy bạn không cần phải viết super.method.apply(this);.

Về khả năng tương thích: bảng tương thích của ES6 chỉ hiển thị các phiên bản mới nhất của các lớp hỗ trợ người chơi chính (hầu hết). Các trình duyệt V8 đã có chúng từ tháng 1 năm nay (Chrome và Opera) và Firefox, sử dụng công cụ SpiderMonkey JS, sẽ có các lớp vào tháng tới với bản phát hành Firefox 45 chính thức của họ. Về mặt di động, Android vẫn chưa hỗ trợ tính năng này, trong khi iOS 9, phát hành cách đây 5 tháng, đã hỗ trợ một phần.

May mắn thay, có Babel , một thư viện JS để biên dịch lại mã Harmony thành mã ES5. Các lớp và rất nhiều tính năng thú vị khác trong ES6 có thể giúp mã Javascript của bạn dễ đọc và dễ bảo trì hơn rất nhiều.

Một lần nên tránh mô phỏng OO cổ điển và thay vào đó sử dụng OO nguyên mẫu. Một thư viện tiện ích tốt đẹp cho OO nguyên mẫu là các đặc điểm .

Thay vì ghi đè các phương thức và thiết lập chuỗi kế thừa (nên luôn ưu tiên thành phần đối tượng hơn là kế thừa đối tượng), bạn nên gói các chức năng có thể sử dụng lại thành các đặc điểm và tạo các đối tượng với chúng.

Ví dụ trực tiếp

var modifyA = {
    modify: function() {
        this.x = 300;
        this.y = 400;
    }
};

var modifyB = {
    modify: function() {
        this.x = 3000;
        this.y = 4000;
    }
};

C = function(trait) {
    var o = Object.create(Object.prototype, Trait(trait));

    o.modify();
    console.log("sum : " + (o.x + o.y));

    return o;
}

//C(modifyA);
C(modifyB);

Sửa đổi () trong ví dụ của bạn là một hàm riêng tư, sẽ không thể truy cập được từ bất kỳ đâu ngoại trừ trong định nghĩa A, B hoặc C của bạn. Bạn sẽ cần phải khai báo nó là

this.modify = function(){}

C không có tham chiếu đến cha mẹ của nó, trừ khi bạn chuyển nó cho C. Nếu C được thiết lập để kế thừa từ A hoặc B, nó sẽ kế thừa các phương thức public của nó (không phải các hàm private như bạn đã sửa đổi () xác định). Khi C kế thừa các phương thức từ cha của nó, bạn có thể ghi đè các phương thức được kế thừa.

phương thức modify()mà bạn đã gọi cuối cùng được gọi trong ngữ cảnh toàn cục nếu bạn muốn ghi đè modify()trước tiên bạn phải kế thừa Ahoặc B.

Có thể bạn đang cố gắng làm điều này:

Trong trường hợp này Ckế thừaA

function A() {
    this.modify = function() {
        alert("in A");
    }
}

function B() {
    this.modify = function() {
        alert("in B");
    }
}

C = function() {
    this.modify = function() {
        alert("in C");
    };

    C.prototype.modify(); // you can call this method where you need to call modify of the parent class
}

C.prototype = new A();

Không trừ khi bạn đặt tất cả các biến là "công khai", tức là biến chúng thành thành viên Functiontrực tiếp hoặc thông qua thuộc prototypetính.

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à lời gọi đến hàm tạo "siêu lớp" được cho là ẩn trong dòng này:

<name>.prototype = new C ;

Cả hai Avà Bbây giờ sẽ có các thành viên có thể sửa đổi riêng lẻx và ysẽ không đúng như vậy nếu chúng tôi viết thư ... = Cthay thế.

Sau đó, x, yvà modifyđược tất cả các thành viên "công cộng" để gán một khác nhau Functionđối với họ

 <name>.prototype.modify = function( ) { /* ... */ }

sẽ "ghi đè" bản gốc Functionbằng tên đó.

Cuối cùng, lệnh gọi đến modifykhông thể được thực hiện trong Functionkhai báo vì lệnh gọi ngầm định tới "siêu lớp" sau đó sẽ được thực thi lại khi chúng ta đặt "siêu lớp" được cho là thuộc prototypetính của "lớp con" được cho là.

Nhưng tốt, đây ít nhiều là cách bạn thực hiện loại điều này trong JavaScript.

HTH,

FK