JavaScript函数中引用数组的模式

Question

Consider a simple factory which self-updates -

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;

}

(Can you see the problem here? Worth taking a second.) I'll spell it out -

// 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 is not what we want at all. this.data should return the new array... but doesn't. It continues to reference the original array, even though we've internally updated our object.

There is a solution - instead of replacing the value of data, we can do this -

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

... which is okay, but feels a bit of a hack.

My question is - what would be a better pattern of MyFactory which would ensure that we can update its data property so that it always returns the expected value.

Answer 1

You probably think that by doing:

this.data = _data;

You are actually linking both variables and whatever happens to _data will happen to this.data . This is not the case, it just end up copying the object reference. Which means that both variables are pointing to the same object reference (let's say the object is "A")

this.data === A
_data === A

What your onLoad method does is create a new object (lets call it "B") and assign it to data .

this.data === A
_data === B

_data is not part of the object unlike this.data , so it's not accessible from the object. This is why it doesn't work.

There's really no reason to work this way. You obviously want the data to be public, there's no reason to keep it in the constructor scope.

function MyFactory(){

  var that = this; // object reference which private methods can use

  function onLoad(response){

    // assign the incoming value to our '_data' variable
    that.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 = [];

}

Answer 2

In addition to MinusFour's answer, you have created a bit of confusion with getData . Usually, a getter gets a property of an object that is private. It's counterpart is setter that sets the value.

Your getData actually sets the "private" value (which is a closure), then you try to read it as a property. So if you just create a new getter and change getData to a setter, you're done:

 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] 

You could overload the getter so that if you provide an argument, it sets the value immediately, or if no value is provided, do the AJAX thing.

Alternatively, you can define data as a 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] 

Answer 3

Consider method naming conception. Create public getter method to access your private data on demand.

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 loadData() {

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

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

  }

  // public methods / properties
  this.loadData = loadData;
  this.getData = function(){
      return _data;
  }

}