Question

我有一个对象构造函数，我定义了一个方法，使用json-object作为输入参数将新值设置为对象属性，我的解决方案正在工作，但我有一个疑问是有最好的方法吗？

使用 OOP 的任何答案都将受到赞赏。

这是我的代码：

//Object constructor
function searchOption(o) {
   o = o || {};
   this.Word = o.Word || "";
   this.SubCategories = o.SubCategories || [];
   this.Page = o.Page || 1;
   this.Sort = o.Sort || "desc";
   this.ItemsView = o.ItemsView || 18;
   //Method to set new values, preserving untouched properties
   this.set = function (x) { $.extend(this, x); };
}

(function() {
    var search = new searchOption({ Word:"canela", ItemsView:6 });
    console.log(search);
    search.set({ Word:"VIAJE", Page:3, Sort:"asc" });
    console.log(search);
})();

Answer 1

我会从构造函数中删除this.set方法，而是使用prototype。

//Object constructor
function searchOption(o) {
   o = o || {};
   this.Word = o.Word || "";
   this.SubCategories = o.SubCategories || [];
   this.Page = o.Page || 1;
   this.Sort = o.Sort || "desc";
   this.ItemsView = o.ItemsView || 18;
}

//Method to set new values, preserving the untouched properties
searchOption.prototype.set = function(x) {
    searchOption($.extend(this, x));
}

Answer 2

由于$.extend()扩展了第一个传递的对象，您甚至不需要再次在set方法中调用构造函数

searchOption.prototype.set = function(x) {
    $.extend(this, x);
};

在这里小提琴：http://jsbin.com/eHodoqA/1/edit

注意：

如果您希望合并SubCategories - 将true作为第一个参数传递给$.extend，这将触发深度克隆（请参阅http://api.jquery.com/jQuery.extend/#jQuery-extend-deep-target-object1-objectN）

Answer 3

在内存消耗方面有更好的方法，因为您可以通过prototype在实例之间共享默认值。这同样适用于功能。

您可以使用辅助函数来实现此新设计，该函数仅在所需成员不是undefined或与默认值不同时复制所需成员。

此外，作为约定构造函数，函数以大写字母开头，属性通常是lowerCamelCased。这些命名约定被广泛使用，我强烈建议您遵循它们。

以下设计仅供学习之用，不必要，除非您计划拥有大量SearchOption个实例。

function applyConfig(obj, config, props) {
    var i = 0,
        len = props.length,
        k, v;

    for (; i < len; i++) {
        if (
            config.hasOwnProperty(k = props[i]) && typeof (v = config[k]) !== 'undefined' //ingore undefined values
            //let default values be shared between instances
            && v !== obj[k]
        ) {
            obj[k] = v;
        }
    }
}

function SearchOption(config) {

    config = config || {};

    //handle all immutable values
    applyConfig(this, config, ['word', 'page', 'sort', 'itemsView']);

    this.subCategories = config.subCategories || [];
}


SearchOption.prototype = {
    constructor: SearchOption,
    //keeping default values on the prototype is memory efficient
    //since they get shared between instances, however we should only use
    //this approach for immutable values.
    word: '',
    page: 1,
    sort: 'desc',
    itemsView: 18,
    //it's better to have functions on the prototype too
    set: function (values) {
        //not sure why you were doing searchOptions(...)? It looks very wrong
        //since the function will get executed in the global object's context (window)

        //note that with the following, we will shadow any default prototype
        //values, unlike when we called the constructor.
        $.extend(this, values);
    }
};

var so1 = new SearchOption(), //share same word
    so2 = new SearchOption(), //share same word
    so3 = new SearchOption({
        word: 'test'
    });

console.log('so1:', so1.word, 'so2:', so2.word, 'so3:', so3.word);

console.log(so1);

Javascript：创建对象构造函数

3 个答案: