找不到有效的JavaScript继承模式

Question

I know that JS inheritance has been discussed thoroughly, and I've got a couple of books on it myself, but I haven't found one that works with my current constructor pattern, and I'm not grasping the theory behind it.

This is the object pattern I've used:

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

I thought I'd cracked it but then it appeared as though the two dog's shared the same instance of Animal, and the first dog's position was overwritten by the second.

Is inheritance possible with this approach? Thanks in advance

EDIT: Looking for a vanilla JS solution

Answer 1

You first of all need to link Dog and Animal in some way. You could achive the inheritance you want with .call() and Object.create()

Your modified code could then look something like this:

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

Also have a look at this article on developer.mozilla.org

Answer 2

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

Answer 3

This is a pretty broad question, with the possibility of many opinion based answers. The code posted above does not even try to inherit or extend Animal though?

Basically it all depends on your preferences and requirements for your project. I'm guessing that you dont want to go down a framework route otherwise you would of done that already.

I would suggest looking at 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 .

Their description of what it is:

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