Javascript 继承和重用对象oop

我想通过原型继承Button。但警报名称保留为“Sarah”，因为它是创建的最后一个孩子。Creator类应在按钮中使用方法设置名称。Jsfiddle：

函数创建者（）{
var c1=新的子对象（）；
c1.设定名称（“阿尔伯特”）；
c1.设置标准ClickHandler（）；
var c2=新的子对象（）；
c2.设置标准ClickHandler（）；
c2.设定名称（“Sarah”）；
}
Child.prototype=新建按钮（）；
函数子（）{
这个._布局=$（'child'）；
}
功能按钮（）{
var=这个；
变量名；
this.SetName=函数（名称）{
_名称=名称；
}
this.SetStandardClickHandler=函数（）{
此.\u布局。单击（函数（）{
警报（_名称）；
});
};
}
var c=新创建者（）；

var\u name

是一个静态变量

请尝试以下方法：

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

或者，您可以重新组织为如下内容：

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

---

这应该让你开始：

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

})();

（函数（）{
"严格使用",；
var按钮=函数（名称）{
this.name=name | |“”；//将name设置为构造函数值或空字符串
};
Button.prototype.setName=函数（名称）{
this.name=名称；
};
Button.prototype.setDefaultClickListener=函数（）{
此.\u布局。单击（函数（）{
警报（此名称）；
}.约束（这个）；
};
var Child=函数（名称）{
call（this，name）；//在子对象的新实例上调用父对象构造函数
这个._布局=$（'child'）；
};
Child.prototype=Object.create（Button.prototype）；//从按钮原型继承
Child.prototype.constructor=Child；//将构造函数重置为Child
var albert=新生儿（“albert”）；
setDefaultClickListener（）；
var sarah=新生子女（“sarah”）；
sarah.setDefaultClickListener（）；
})();

我以为会有一种更老的方法。因为并非所有浏览器版本都支持Ecmascript 5…如果您指的是

Object.create

，则最容易向后兼容。现在它无法从Button类中找到方法。您仍然缺少

按钮。在
子构造函数中调用（this）
(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();

})();