javascript - JavaScript 函数中引用数组的模式

Question

考虑一个 self 更新的简单工厂 -

function MyFactory(){

  var _data = []; // initial value

  function onLoad(response){

    // assign the incoming value to our '_data' variable
    _data = response;

  }

  // some sort of ajax to get the data
  function getData() {

     // ajax.fecth('/url', onLoad);

     // pseudo-ajax
     onLoad([4,5,6]);

  }

  // public methods / properties
  this.getData = getData;
  this.data = _data;

}

(你能看到这里的问题吗？值得花点时间。)我会把它拼出来 -

// create the object
var factory = new MyFactory();

// get the data
console.log(factory.data);  // [] ok

// get new data [1,2,3], and assign to the data property
factory.getData();

// what have we now got?
console.log(factory.data); // [] argh, expected [1,2,3]

这根本不是我们想要的。 this.data 应该返回新数组...但没有。即使我们已经在内部更新了对象，它仍然引用原始数组。

有一个解决方案 - 我们可以这样做，而不是替换数据的值 -

function onLoad(response){
    // take care to reuse the object
    _data.length = 0;
    Array.prototype.push.apply(_data, response);
}

...这还可以，但感觉有点黑客。

我的问题是 - 什么是更好的 MyFactory 模式，它可以确保我们可以更新其 data 属性，以便它始终返回预期值。

Answer 1

除了 MinusFour 的答案之外，您还对 getData 造成了一些困惑。通常，getter 获取私有(private)对象的属性。它的对应对象是设置值的 setter。

您的 getData 实际上设置了“私有(private)”值(这是一个闭包)，然后您尝试将其作为属性读取。因此，如果您只是创建一个新的 getter 并将 getData 更改为 setter，那么您就完成了:

function MyFactory(){

  var _data = []; // initial value

  function onLoad(response){
    _data = response;
  }

  function getData() {
     onLoad([4,5,6]);
  }

  // setter to get data and set the value of _data
  this.setData = getData;

  // getter to return the value of _data
  this.getData = function() {
    return _data;
  };
}

// create the object
var factory = new MyFactory();

// get the data
document.write('data: ' + factory.getData());  // [] ok

// get new data [1,2,3], and assign to the data property
factory.setData();

// what have we now got?
document.write('<br>data: ' + factory.getData()); // expected [4,5,6]

您可以重载 getter，这样如果您提供参数，它会立即设置值，或者如果没有提供值，则执行 AJAX 操作。

或者，您可以将数据定义为getter:

function MyFactory(){
  var _data = [];
  function onLoad(response){_data = response;}
  function getData() {onLoad([4,5,6]);}

  // public methods - setter and getter
  this.getData = getData;
  
  // Create a data property as a getter
  Object.defineProperty(this, 'data', {get: function() {return _data;}});
}


var factory = new MyFactory();
document.write('Data: ' + factory.data);  // [] ok
factory.getData();

// what have we now got?
document.write('<br>Data: ' + factory.data); // expected [4,5,6]