Question

我知道JS继承已经被彻底讨论过了，我自己也有几本书，但是我还没有找到一个适用于我当前构造函数模式的书，而且我还没有。我没有理解它背后的理论。

这是我使用的对象模式：

MYAPP.Animal = function() {

    function Animal() {
        this.position = {x: 0, y: 0};
    };

    Animal.prototype.getPosition = function() {
        return this.position.x;
    };

    return Animal;
}();

MYAPP.Dog = function() {

    function Dog(param) {
        this.name = param.name;
        this.position.x = param.x;
    };

    Dog.prototype.getName = function() {
        return this.name;
    };

    return Dog;
}();

var snoopy = new MYAPP.Dog({
    name:"snoopy",
    x: 10
    });

var slinky = new MYAPP.Dog({
    name:"slinky",
    x: 20
    });

我以为我已经破解了它，但似乎这两只狗共享了同一个动物的实例，并且第一只狗的位置被第二只狗覆盖了。

这种方法可以继承吗？提前致谢

编辑：寻找一个香草JS解决方案

Answer 1

首先，您需要以某种方式关联Dog和Animal。您可以使用.call()和Object.create()

来实现所需的继承

您修改后的代码可能如下所示：

MYAPP.Animal = function() {

    function Animal() {
        this.position = {x: 0, y: 0};
    };

    Animal.prototype.getPosition = function() {
        return this.position.x;
    };

    return Animal;
}();

MYAPP.Dog = function() {

    function Dog(param) {
        MYAPP.Animal.call(this);
        this.name = param.name;
        this.position.x = param.x;
    };

    Dog.prototype = Object.create(MYAPP.Animal.prototype,{
        getName: {
            value: function() {
                return this.name;
            },
            enumerable: true,
            configurable: true, 
            writable: true
        }
    });

    Dog.prototype.constructor = Dog;

    return Dog;
}();

var snoopy = new MYAPP.Dog({
    name:"snoopy",
    x: 10
});

var slinky = new MYAPP.Dog({
    name:"slinky",
    x: 20
});

另请查看此article on developer.mozilla.org

Answer 2

我建议您使用提供goog.inherits()功能的Google Closure Library。

Answer 3

这是一个相当广泛的问题，有许多基于意见的答案的可能性。上面发布的代码甚至没有尝试继承或扩展Animal？

基本上，这完全取决于项目的您的偏好和要求。我猜你不想沿着框架路线走下去，否则你就不会这么做了。

我建议查看UnderscoreJS，它是一个非常小的JS实用程序库，它提供了一些非常好用的功能，您可以在整个项目中使用它们，特别是您可能想看看Underscore Extend。

他们对这是什么的描述：

Underscore提供超过100种支持您喜爱的功能 workaday功能助手：map，filter，invoke - 以及更多专业的好东西：功能绑定，javascript模板，创建快速索引，深度相等测试等等

无法找到有效的JavaScript继承模式

3 个答案: