什么是一个很好的简约Javascript继承方法？ [英] What will be a good minimalistic Javascript inheritance method?

问题描述

我正在重写一个JavaScript项目，我希望能够使用面向对象的方法来组织当前代码的混乱。主要关注的是这个JavaScript应该作为第三方网站内的一个小部件运行，我不能让它与其他网站可能使用的其他JavaScript库冲突。

I'm rewriting a JavaScript project, and I want to be able to use object oriented methodologies to organize the mess that the current code is. The main concern is that this JavaScript is supposed to run as a widget inside 3rd party websites and I can't have it conflicting with other JavaScript libraries that other websites may use.

所以我正在寻找一种在JavaScript中编写类类继承的方法，它具有以下要求：

So I'm looking for a way to write "class-like" inheritance in JavaScript that has the following requirements:

1. 没有外部库或者与外部库冲突的东西（这会阻止从外部库复制和粘贴）。


2. 简约 - 我不希望支持代码大于几行代码，我不希望开发人员每次定义一个或多个新类时都需要大量的样板。


3. 应该允许动态扩展父对象，以便子对象看到更改（原型）。


4. 应该允许构造函数链接。


5. 应该允许 super 打电话。


6. 仍然应该感受到JavaScript-ish。

1. No external libraries or things that would conflict with an external library (that precludes copy&paste from an external library).
2. Minimalistic - I don't want the support code to be larger then a few lines of code and I don't want the developers to need a lot of boiler-plate every time they define a new class or methods.
3. Should allow for dynamically extending parent objects so that child objects see the changes (prototype).
4. Should allow for constructor chaining.
5. Should allow for super type calls.
6. Should still feel JavaScript-ish.

最初我尝试使用简单的原型链接：

Initially I tried to work with simple prototype chaining:

function Shape(x,y) {
  this.x = x;
  this.y = y;

  this.draw = function() {
    throw new Error("Arbitrary shapes cannot be drawn");
  }
}

function Square(x,y,side) {
  this.x = x;
  this.y = y;
  this.side = side;

  this.draw = function() {
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); ...
  }
}
Square.prototype = new Shape();

这解决了要求1,2和6但id不允许超级调用（新函数覆盖父级函数），构造函数链接和动态扩展父类不会为子类提供新方法。

And that solves requirements 1, 2 and 6 but id does not allow super calls (new functions override parent functions), constructor chaining and dynamically extending a parent does not provide the new methods to a child class.

欢迎任何建议。

推荐答案

我建议使用以下模式，使用 clone function 从原型而不是实例继承：

I'd suggest the following pattern which makes use of a clone function to inherit from the protoypes and not instances:

function Shape(x, y) {
    this.x = x;
    this.y = y;
}

Shape.prototype.draw = function() {
    throw new Error('Arbitrary shapes cannot be drawn');
};

function Square(x,y,side) {
    Shape.call(this, x, y); // call super constructor
    this.side = side;
}

// inherit from `Shape.prototype` and *not* an actual instance:
Square.prototype = clone(Shape.prototype);

// override `draw()` method
Square.prototype.draw = function() {
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ...
};

重要的是方法驻留在原型中（出于性能原因应该是这样的）所以你可以通过

It's important that methods reside in the prototype (which is as it should be anyway for performance reasons) so you can call the methods of a super class via

SuperClass.prototype.aMethod.call(this, arg1, arg2);

有些语法糖，你可以让JS看起来像一个经典的基于类的语言：

With some syntactic sugar, you can make JS look like a classical class-based language:

var Shape = Class.extend({
    constructor : function(x, y) {
        this.x = x;
        this.y = y;
    },
    draw : function() {
        throw new Error('Arbitrary shapes cannot be drawn');
    }
});

var Square = Shape.extend({
    constructor : function(x, y, side) {
        Shape.call(this, x, y);
        this.side = side
    },
    draw : function() {
        gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ...
    }
});

这篇关于什么是一个很好的简约Javascript继承方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！