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

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

我以为我已经破解了它，但后来看起来好像两只狗共享同一个 Animal 实例，第一只狗的位置被第二只狗覆盖了。

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

编辑：寻找普通 JS 解决方案

Answer 1

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

Answer 2

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

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

我建议查看 UnderscoreJS, it's a JS Utility library that is quite small and offers some very nice and handy functions that you'll be able to use throughout your project, particulary you may want to look at Underscore Extend。

他们对它的描述：

Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on

Answer 3

您首先需要以某种方式link 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

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

Can't find a JavaScript inheritance pattern that works

javascript

inheritance