回调和这个

Question

I have a directory with files that I need to parse and save in an array of JavaScript objects. In the constructor, as soon as I reach point 2 in the code below, this becomes undefined and in point 3 I don't have access to this.data . What's the best way to fix the code and achieve the goal?

function Service(path) {
    this.data = [];
    console.log(this); // point 1
    fs.readdir(path, function (err, files) {
        console.log(this); // point 2
        files.forEach(function (file) {
            fs.readFile(path + file, function (err, data) {
                parseString(data, function (err, result) {
                    this.data.push(result); // point 3
                });
            });
        }, this);
    });
}

Service.prototype.getData = function () {
   // do something with `this.data` and return the result
};

I tried saving this as self , but in the end self ends up with proper array, while this does not:

  function Service(path) {
    var self = this;
    this.data = [];
    fs.readdir(path, function (err, files) {
        files.forEach(function (file) {
            fs.readFile(path + file, function (err, data) {
                parseString(data, function (err, result) {
                    self.data.push(result);
                });
            });
        });
    });
    setTimeout(function () {
        console.log(this); \\ point x
        console.log(self); \\ point y
    }, 3000);    
  }

  Service.prototype.getData = function () {
    // do something with `this.data` and return the result
  };

Answer 1

The this object changes anytime you change from a function's scope to another.

You can solve this by saving the this object you want to a variable (in my example: self ):

function Service(path) {
    var self = this;
    self.data = [];
    console.log(this); // point 1
    fs.readdir(path, function (err, files) {
        console.log(self); // point 2
        files.forEach(function (file) {
            fs.readFile(path + file, function (err, data) {
                parseString(data, function (err, result) {
                    self.data.push(result); // point 3
                });
            });
        });
    });
}

Service.prototype.getData = function () {
    var self = this;

    setTimeout(function () {
        console.log(self.data);
    }, 100);
};

var serv = new Service();
serv.getData(); // your array

See documentation on Mozilla for this .

To see an example, please refer to this fiddle .

Answer 2

As an alternative to Vsevolod's answer, you can also use bind .

function Service(path) {
    this.data = [];
    console.log(this); // point 1
    fs.readdir(path, function (err, files) {
        console.log(this); // point 2
        files.forEach(function (file) {
            fs.readFile(path + file, function (err, data) {
                parseString(data, function (err, result) {
                    this.data.push(result); // point 3
                }.bind(this));
            });
        }, this);
    }.bind(this));
}

Bind is slower than using a closure, but that only really matters in very tight loops where you're doing a ton of iterations and is unlikely to be an issue in most scenarios.

Answer 3

this refers to the 'current' context.

In you example you can just save the 'outer' this to a local variable

function Service(path) {
    var $this = this;
    this.data = [];
    console.log(this); // point 1
    fs.readdir(path, function (err, files) {
        console.log($this); // point 2
        files.forEach(function (file) {
            fs.readFile(path + file, function (err, data) {
                parseString(data, function (err, result) {
                    $this.data.push(result); // point 3
                });
            });
        }, $this);
    });
}

PS while using bind is not prohibited either, the solution with assigning this to a local variable looks more elegant and will ensure that you will not forget to add another bind to the callback

Answer 4

I'm not sure why this is the case, but if you do this.data = this.data or self = this in your prototype it outputs the correct value. Otherwise it returns the whole Service instance at the time it was created. Here is a snippet you can try with a dummy Service and getData example.

 function Service(array) { var self = this; this.data = []; console.log(this); // point 1 array.forEach(function(item) { self.data.push(item); // point 2 }); } Service.prototype.getData = function() { self = this; return self.data; }; var serv = new Service(['bob', 'aerith']); console.log(serv.getData());