如何使用 jQuery $.extend(obj1, obj2)答案

【问题标题】：How to use jQuery $.extend(obj1, obj2)如何使用 jQuery $.extend(obj1, obj2)
【发布时间】：2013-09-26 08:03:06
【问题描述】：

我正在尝试创建一个使用 $.extend() 扩展 AbstractComponent 类的按钮类，但在构建按钮时 AbstractComponent 中的函数不可用。

我收到的具体错误是： Uncaught TypeError: Object [object Object] has no method '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 + "]";
};

【问题讨论】：

这不是 $.extend 方法的预期目的。它仅适用于普通对象。
你有什么建议可以做我想做的事情吗？
不是真的，但我确实在一开始看到了一个逻辑错误。首先，您将Button 定义为一个对象。接下来，您使用abstract 对其进行扩展，然后您将Button 设置为一个函数，从而覆盖您在开始时对Button 所做的一切。

标签： javascript jquery extends

【解决方案1】：

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

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

你应该使用原型继承而不是

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;

【讨论】：