简体   繁体   中英

How do I get each instance to inherit their own instance of a member?

In the following code, I have two Book Collections. One collection has "Moby Dick," while the other collection has "The Firm." However, when I look at the second collection, it also has Moby Dick. How do I create Books that do not share the same data?

function Collection () {
    var stuff = [];
    this.get = function () {
        return stuff;
    };
    this.add = function (item) {
        stuff.push(item);
    };
}
function Books () {}
Books.prototype = new Collection ();

var myBooks = new Books();
myBooks.add("Moby Dick");

var yourBooks = new Books();
yourBooks.add("The Firm");

console.log(yourBooks.get()); // ["Moby Dick", "The Firm"]

I ended up going with this:

function Collection () {
    var stuff = [];
    this.get = function(){
        return stuff;
    };
    this.add = function(item){
        stuff.push(item);
    };
}
function Books () {
    Collection.call(this);
};

Books.prototype = new Collection();

Books.prototype.constructor = Books;

var myBooks = new Books();
myBooks.add("Moby Dick");

var yourBooks = new Books();
yourBooks.add("The Firm");

console.log(myBooks.get());

Use a per-instance value with this :

function Books () {
    this.stuff = [];
}

And then in the collection:

this.get = function () {
    return this.stuff;
};

Currently only one stuff array is created when you set the prototype of Books. All the inherited getters and setters then refer to that one variable.


Complete code :

function Collection () {
    this.get = function () {
        return this.stuff;
    };
    this.add = function (item) {
        this.stuff.push(item);
    };
}
function Books () {
    this.stuff = [];
}

Books.prototype = new Collection ();

var myBooks = new Books();
myBooks.add("Moby Dick");

var yourBooks = new Books();
yourBooks.add("The Firm");

console.log(myBooks.get()); // ["Moby Dick"]
console.log(yourBooks.get()); // ["The Firm"]

You have a lot of structural issues with your code. Your methods in Collection should also be prototyped and they currently are not. If you dont prototype the methods trying to get access to "stuff" you endup with multiple functions referencing the exact same property instead of creating their own instance of that property. Follow this structure instead:

Main Collection Class

function Collection () {
    this.stuff = [];
};

Collection.prototype.get = function(){
    return this.stuff;
};

Collection.prototype.add = function(item){
    this.stuff.push(item);
}

Main Books Class Inherits From Collection

function Books () {
    Collection.call(this);
};

Books.prototype = new Collection();
Books.prototype.constructor = Books;

Using Your Books Class

var myBooks = new Books();
myBooks.add("Moby Dick");

var yourBooks = new Books();
yourBooks.add("The Firm");

console.log(yourBooks.get());

JSFiddle with working example:

JSFiddle

Source where you can get further details regarding Javascript prototype:

Mozilla Docs

Let me know bellow if you have any questions about the code itself or this change in structure.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM