Inherit and reuse object oop

Question

I want to inherit from Button by prototype. But alerted name stays "Sarah" as it is the last Child created. Creator Class should set the name with Method in Button. Jsfiddle: JSFIDDLE

function Creator() {
    var c1 = new Child();
    c1.SetName("Albert");
    c1.SetStandardClickHandler();

    var c2 = new Child();
    c2.SetStandardClickHandler();
    c2.SetName("Sarah");
}

Child.prototype = new Button();

function Child() {
    this._layout = $('<div>child</div>');
}

function Button() {
    var that = this;
    var _name;

    this.SetName = function (name) {
        _name = name;
    }
    this.SetStandardClickHandler = function () {
        this._layout.click(function () {
            alert(_name);
        });
    };
}

var c = new Creator();

exact duplicate of [Why are my JavaScript object properties being overwritten by other instances?](http://stackoverflow.com/questions/13127589/why-are-my-javascript-object-properties-being-overwritten-by-other-instances) — Bergi, Dec 03 '13 at 15:13
I thought there would be an older way. Because Ecmascript 5 isnt supported with all browser versions... — bergman, Dec 03 '13 at 15:21
If you mean `Object.create`, that can be most easily [shimmed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill) to be backwards-compatible. — Bergi, Dec 03 '13 at 15:34
now it cant find the Methods from Button class. http://jsfiddle.net/QcTLw/48/ — bergman, Dec 03 '13 at 18:10
You're still missing the `Button.call(this)` in the `Child` constructor — Bergi, Dec 04 '13 at 00:17

score 0 · Answer 1 · answered Dec 03 '13 at 15:06

var _name is a static variable.

Try something like this instead:

function Button() {
    var that = this;
    this.name = null;

    this.SetName = function (name) {
        this.name = name;
    }
    this.SetStandardClickHandler = function () {
        this._layout.click(function () {
            alert(that.name);
        });
    };
}

Or you can reorganize to something like this:

var Button = (function() {

    function Button() {
        this.name = null;
    }

    Button.prototype.SetName = function (name) {
        this.name = name;
    }

    Button.prototype.SetStandardClickHandler = function () {
        var that = this;
        this._layout.click(function () {
            alert(that.name);
        });
    };

    return Button;
});

score 0 · Answer 2 · answered Dec 03 '13 at 15:27

This should get you started:

(function() {

    'use strict';

    var Button = function (name) {
        this.name = name || ''; // Set name to contructor value or empty string
    };

    Button.prototype.setName = function (name) {
        this.name = name;
    };

    Button.prototype.setDefaultClickListener = function () {
        this._layout.click(function () {
            alert(this.name);
        }.bind(this));
    };

    var Child = function (name) {
        Button.call(this, name); // Call parent object construtor on new instance of Child

        this._layout = $('<div>child</div>');
    };

    Child.prototype = Object.create(Button.prototype); // Inherit from Button prototype
    Child.prototype.constructor = Child; // Reset constructor to Child

    var albert = new Child('Albert');
    albert.setDefaultClickListener();

    var sarah = new Child('Sarah');
    sarah.setDefaultClickListener();

})();

Inherit and reuse object oop

2 Answers2