如何在javascript中实现基本成员？

Question

I want a base class to share its member variables with the child class, how do I do that?

Example code:

var register = function(f){
    setTimeout(function(){
        f('123');
    }, 5000);
};

var base = function(){
    var self = this;

    this.objects = [];

    this.events = {
        token : register(function(data){
             self.objects.push(data); //THIS WONT MODIFY THE child VERSION OF objects, how do I do that??
        })
    };
};

var child = function(){
    var self = this;

    this.objects = [2, 3, 4];
};
// child inherits from base
child.prototype = new base;
child.prototype.constructor = child;
child.prototype.parent = base.prototype;

var d = new child();
var e = new child();

setTimeout(function(){
    $('body').html(d.objects.join(",") + " " + e.objects.join(","));
    //prints out: "2,3,4 2,3,4" i want: "2,3,4,123 2,3,4,123"
}, 6000);

As you can see there, the base class has its own implementation of objects and that is separate from the childs version. How do I fix that?

fiddle: http://jsfiddle.net/8094g8ta/

Answer 1

What you need to do is have the child constructor call the parent constructor so that the parent initialization runs for each child:

var child = function () {
    base.call(this);

    this.objects.push(2, 3, 4);
};

Once you have this, it doesn't make sense to use new base to create the child prototype since it's redundant, and in fact, calling constructors to create prototypes is now an outdated practice. Instead, use Object.create() :

// child inherits from base
child.prototype = Object.create(base.prototype);

Putting it all together:

 var register = function(f) { setTimeout(function() { f('123'); }, 5000); }; var base = function() { var self = this; this.objects = []; this.events = { token: register(function(data) { self.objects.push(data); }) }; }; var child = function() { base.call(this); this.objects.push(2, 3, 4); }; // child inherits from base child.prototype = Object.create(base.prototype); child.prototype.constructor = child; child.prototype.parent = base.prototype; var d = new child(); var e = new child(); setTimeout(function() { $('body').html(d.objects.join(",") + " " + e.objects.join(",")); }, 6000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>