Javascript 如何使用jQuery$.extend（obj1、obj2）

我试图创建一个button类，该类使用$.extend（）扩展AbstractComponent类，但在构造按钮时AbstractComponent中的函数不可用

我收到的具体错误是： 未捕获的TypeError:对象[Object Object]没有方法“setOptions”

var Button = {};
var abstract = new AbstractComponent;
$.extend(Button,abstract);
//debugger;
//this.setOptions is available here
Button = function(options) {
    'use strict';
    var defaultOptions = {
        templateName: '#button-tmpl',
        title: "Label goes here",
        type: "primary",
        size: "medium",
        disabled: null,
        autosave: null,
        href: null,
        onclick: null
    };
//debugger
//this.setOptions is not available here
    this.setOptions(options, defaultOptions);
    this.checkRequiredKeys('title');
    return this;
};
Button.prototype.updateOptions = function() {
    var options = this.options;
    if (options.href === null) {
        options.href = 'javascript:;';
    }
    if (options.disabled === null) {
        options.disabled = 'disabled';
    }
    if (options.autosave === true) {
        options.autosave = 'ping-autosave';
    }
};

AbstractComponent.js

var AbstractComponent = function() {
    console.log('this will be the constructor for elements extending this class');
};
AbstractComponent.prototype.show = function() {
    this.render();
};
AbstractComponent.prototype.close = function() {
    // stop listeners and remove this component
    this.stopListening();
    this.remove();
};
AbstractComponent.prototype.getTemplateName = function() {
    return this.options.templateName;
};    
AbstractComponent.prototype.checkRequiredKeys = function() {
    var errors = new Array();
    if (typeof this.getTemplateName() === "undefined") {
        errors.push('templateName');
    }
    for (var i = 0; i < arguments.length; i++) {
        if (!this.options.hasOwnProperty(arguments[i])) {
            errors.push(arguments[i]);
        }
    }
    if (errors.length > 0) {
        throw new Exception("Required property(s) not found:" + errors.join(', ') + " in " + this.toString());
    }
};

AbstractComponent.prototype.getElement = function() {
    'use strict';
    if(!this.options.updated) {
        this.updateOptions();
    }
    return new AbstractView(this.options).render().$el;
};


AbstractComponent.prototype.updateOptions = function() {
    this.options.updated = true;
    return true;
};

AbstractComponent.prototype.getHtml = function() {
    return this.getElement().html();
};

AbstractComponent.prototype.setOptions = function(options, defaultOptions) {
    this.options = _.defaults(options, defaultOptions);
};

AbstractComponent.prototype.toString = function() {
    return "Component" + this.getTemplateName() + "[id=" + this.options.id + "]";
};

var AbstractComponent=function（）{
log（'这将是扩展该类的元素的构造函数'）；
};
AbstractComponent.prototype.show=函数（）{
这个。render（）；
};
AbstractComponent.prototype.close=函数（）{
//停止侦听器并删除此组件
这个。停止听（）；
这个。删除（）；
};
AbstractComponent.prototype.getTemplateName=函数（）{
返回this.options.templateName；
};    
AbstractComponent.prototype.checkRequiredKeys=函数（）{
var errors=新数组（）；
if（this.getTemplateName（）的类型=“未定义”）{
错误。push（'templateName'）；
}
for（var i=0；i0）{
抛出新异常（“未找到必需的属性：“+this.toString（）”中的+errors.join（'，'）+”；
}
};
AbstractComponent.prototype.getElement=函数（）{
"严格使用",；
如果（！this.options.updated）{
this.updateOptions（）；
}
返回新的AbstractView（this.options）.render（）.$el；
};
AbstractComponent.prototype.updateOptions=函数（）{
this.options.updated=true；
返回true；
};
AbstractComponent.prototype.getHtml=函数（）{
返回此.getElement（）.html（）；
};
AbstractComponent.prototype.setOptions=函数（选项，默认选项）{
this.options=\默认值（options，defaultOptions）；
};
AbstractComponent.prototype.toString=函数（）{
返回“Component”+this.getTemplateName（）+”[id=“+this.options.id+”]；
};

jQuery extend用于将属性从一个（或多个）对象移动到另一个对象

$.extend({}, {
   foo: 10,
   bar: 20
});

您应该使用原型继承isntead

function Button(options) {
    'use strict';
    var defaultOptions = {
        templateName: '#button-tmpl',
        title: "Label goes here",
        type: "primary",
        size: "medium",
        disabled: null,
        autosave: null,
        href: null,
        onclick: null
    };
//debugger
//this.setOptions is not available here
    this.setOptions(options, defaultOptions);
    this.checkRequiredKeys('title');
    return this;
};
Button.prototype = new AbstractComponent;

---

jQuery extend用于将属性从一个（或多个）对象移动到另一个对象

$.extend({}, {
   foo: 10,
   bar: 20
});

您应该使用原型继承isntead

function Button(options) {
    'use strict';
    var defaultOptions = {
        templateName: '#button-tmpl',
        title: "Label goes here",
        type: "primary",
        size: "medium",
        disabled: null,
        autosave: null,
        href: null,
        onclick: null
    };
//debugger
//this.setOptions is not available here
    this.setOptions(options, defaultOptions);
    this.checkRequiredKeys('title');
    return this;
};
Button.prototype = new AbstractComponent;

---

这不是$.extend方法的预期目的。它只适用于普通对象。你对我在那里尝试做的事情有什么建议吗？没有，但我确实在开始时看到了一个逻辑错误。首先，您将

按钮

定义为一个对象。接下来，您使用

abstract

对其进行扩展，然后将

按钮

设置为等于一个函数，从而覆盖开始时对

按钮

所做的一切。这不是$.extend方法的预期目的。它只适用于普通对象。你对我在那里尝试做的事情有什么建议吗？没有，但我确实在开始时看到了一个逻辑错误。首先，您将

按钮

定义为一个对象。接下来，您使用

抽象

对其进行扩展，然后将

按钮

设置为等于一个函数，从而覆盖开始时对

按钮

所做的一切。