javascript - 使用lodash的extend方法扩展JS对象实例会导致奇怪的结果

Question

我有一个 JS 类，它有一些默认属性。我希望能够传递一个选项对象来覆盖默认值以及一些非默认值。我在构造函数中使用 lodash 的 extend 方法来完成此任务。

默认属性之一是数组。如果我实例化第一个实例并将新值推送到数组中，则当我实例化第二个对象时，默认数组包含我推送到第一个实例中的对象。

以此代码为例...

MyClass = (function() {
  var defaults = {
    myArr: [],
    myProp: 'I\'m a default value'
  };

  function MyClass(options) {
    // console.log(defaults)
    if(typeof options === 'object') {
      return _.extend(this, defaults, options);
    }
    else {
      return _.extend(this, defaults);
    }
  }

  return MyClass;
})();

var myObj = new MyClass({foo: 'bar'})
myObj.myArr.push('baz')
var mySecondObj = new MyClass();
console.log(mySecondObj) // MyClass {myArr: Array[1]}

我希望 mySecondObj.myArr 是一个空数组。

当我将值插入 myObj.myArr 时，defaults.myArr 会以某种方式发生更改并用于该类的后续实例吗？

Answer 1

当您使用 _.extend 将对象属性从 defaults 合并到 this 时，您只是创建了对数组的引用。因此，当一个实例中的数组引用更新时，所有引用都会反射(reflect)这一变化。

您可以克隆该对象来解决这个问题:

_.cloneDeep(defaults)

DEMO

或者使用更简单的构造函数:

function MyClass(options) {
  var defaults = {
    myArr: [],
    myProp: 'I\'m a default value'
  }
  if (typeof options === 'object') {
    _.extend(this, defaults, options);
  } else {
    _.extend(this, defaults);
  }
}

DEMO