用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

虽然效果很好，但我想知道无需任何库即可获得相似结果的最佳方法。我只想在函数中定义一些默认设置，并用自变量中的设置替换它们，这在每次执行此操作时都会包含一个库，这是一个过大的选择。

Answer 1

基本上，这只是对for..in的递归使用。您可以看到jQuery实现for..in的完整来源（该行号会随着时间的流逝而变化，但可能会保留在in the source code中）。

这是一个非常基本的现成的：

core.js

Answer 2

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

Answer 3

在ES6中，引入了传播算子。

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

参考：

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

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• 或者您可以使用How do I merge two javascript objects together in ES6+?