JavaScript 覆盖方法

Question

假设您有以下代码：

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

现在的问题是，如果有什么方法可以用A 和B 中的方法覆盖C 中的方法modify。在 Java 中，您会使用 super-关键字，但如何在 JavaScript 中实现这样的功能？

Answer 1

你上次调用的方法modify()在全局上下文中调用 如果要覆盖modify()，首先必须继承A 或B。

也许你正在尝试这样做：

在这种情况下C 继承A

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

Answer 2

modify() 在您的示例中是一个私有函数，除了在您的 A、B 或 C 定义中之外，无法从任何地方访问。您需要将其声明为

this.modify = function(){}

C 没有对其父级的引用，除非您将其传递给 C。如果 C 设置为从 A 或 B 继承，它将继承其公共方法（而不是像您定义的 modify() 那样的私有函数）。一旦 C 从其父级继承方法，您就可以覆盖继承的方法。

Answer 3

编辑：距写出原始答案已有六年了，发生了很多变化！

• 如果您使用较新版本的 JavaScript，可能使用 Babel 之类的工具编译，您可以使用 use real classes。
• 如果您使用Angular 或React 提供的类类组件构造函数，则需要查看该框架的文档。
• 如果您使用 ES5 并使用原型手工制作“假”类，那么下面的答案仍然与以往一样正确。

祝你好运！

---

JavaScript 继承看起来与 Java 有点不同。下面是原生 JavaScript 对象系统的外观：

// 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"

不幸的是，这有点难看，并且它不包括一个非常好的“超级”方法：您必须手动指定要调用的父类的方法。因此，有多种工具可以让创建类变得更好。尝试查看 Prototype.js、Backbone.js 或类似的库，其中包含用于在 js 中执行 OOP 的更好语法。

Answer 4

除非您将所有变量设为“公共”，即直接或通过prototype 属性将它们设为Function 的成员，否则不会。

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

• test it here

---

您会注意到一些变化。

最重要的是，对假定的“超类”构造函数的调用现在隐含在这一行中：

<name>.prototype = new C ;

A 和 B 现在都有可单独修改的成员 x 和 y，如果我们改写为 ... = C 则不会出现这种情况。

那么，x、y 和 modify 都是“公共”成员，因此为它们分配不同的 Function

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

将用该名称“覆盖”原始 Function。

最后，不能在Function 声明中调用modify，因为当我们将假定的“超类”设置为@987654339 时，会再次执行对“超类”的隐式调用@ 假定的“子类”的属性。

不过，这或多或少是你在 JavaScript 中做这种事情的方式。

HTH，

FK

Answer 5

Once 应该避免模仿经典的 OO 并改用原型 OO。一个很好的原型 OO 实用程序库是 traits。

与其重写方法和设置继承链（应该始终支持对象组合而不是对象继承），不如将可重用函数捆绑到特征中并使用它们创建对象。

Live Example

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

Answer 6

由于这是 Google 上的热门话题，我想给出一个更新的答案。

使用ES6 classes 使得继承和方法覆盖更容易：

'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

super keyword在继承类中使用时指父类。另外，父类上的所有方法都绑定到子类的实例上，所以不用写super.method.apply(this);。

至于兼容性：the ES6 compatibility table 仅显示主要播放器支持类的最新版本（大部分）。 V8 浏览器自今年 1 月（Chrome 和 Opera）以来就拥有它们，而使用 SpiderMonkey JS 引擎的 Firefox 将在下个月发布其官方 Firefox 45 版本。在移动端，Android 仍然不支持此功能，而 5 个月前发布的 iOS 9 已部分支持。

幸运的是，有Babel，一个用于将 Harmony 代码重新编译为 ES5 代码的 JS 库。 ES6 中的类和许多其他很酷的特性可以使您的 Javascript 代码更具可读性和可维护性。

Answer 7

function A() {
    var c = new C();
	c.modify = function(){
		c.x = 123;
		c.y = 333;
	}
	c.sum();
}

function B() {
    var c = new C();
	c.modify = function(){
		c.x = 999;
		c.y = 333;
	}
	c.sum();
}


C = function () {
   this.x = 10;
   this.y = 20;

   this.modify = function() {
      this.x = 30;
      this.y = 40;
   };
   
   this.sum = function(){
	this.modify();
	console.log("The sum is: " + (this.x+this.y));
   }
}

A();
B();