javascript - 用 JavaScript 中另一个对象的属性替换对象的属性，无需库

Question

我一直在使用 jQuery.extend 来替换像这样的默认属性

var Car = function(options){
    var defaultOptions = {
        color: "hotpink",
        seats: {
            material: "fur",
            color: "black",
            count: 4
        },
        wheels: 4
    }
    this.options = $.extend(true,{},defaultOptions,options); 
}

var myCar = new Car({
    color: "blue",
    seats: {
        count: 2,
        material: "leather"
    }
});

alert(myCar.options.color); // "blue"
alert(myCar.options.seats.color); // "black"
alert(myCar.options.seats.count); // 2

虽然效果很好，但我想知道在没有任何库的情况下实现类似结果的最佳方法。我只想在函数中定义一些默认设置并用参数中的设置替换它们，每次我这样做时都包含一个库是一种矫枉过正的做法。

score 4 · Accepted Answer

基本上它只是递归使用for..in. 您可以在源代码中看到 jQuery 实现的完整源代码（其中的行号会随着时间的推移而腐烂，但它很可能会保留在中core.js）。

这是一个非常基本的即兴表演：

function deepCopy(src, dest) {
    var name,
        value,
        isArray,
        toString = Object.prototype.toString;

    // If no `dest`, create one
    if (!dest) {
        isArray = toString.call(src) === "[object Array]";
        if (isArray) {
            dest = [];
            dest.length = src.length;
        }
        else { // You could have lots of checks here for other types of objects
            dest = {};
        }
    }

    // Loop through the props
    for (name in src) {
        // If you don't want to copy inherited properties, add a `hasOwnProperty` check here
        // In our case, we only do that for arrays, but it depends on your needs
        if (!isArray || src.hasOwnProperty(name)) {
            value = src[name];
            if (typeof value === "object") {
                // Recurse
                value = deepCopy(value);
            }
            dest[name] = value;
        }
    }

    return dest;
}

score 0 · Accepted Answer

你可以模仿jQuery的api“扩展”，就像楼上说的。我认为没有更好的方法可以做到这一点。所以，我认为jQuery的api是合适的。

score 0 · Accepted Answer

在 ES6 中引入了扩展运算符。

var Car = function(options){
    var defaultOptions = {
        color: "hotpink",
        seats: {
            material: "fur",
            color: "black",
            count: 4
        },
        wheels: 4
    }
    this.options = {...defaultOptions, ...this.options};
}

var myCar = new Car({
    color: "blue",
    seats: {
        count: 2,
        material: "leather"
    }
});

参考：

javascript - 用 JavaScript 中另一个对象的属性替换对象的属性，无需库

3 回答 3

Related

Reference