Implicit JavaScript Item 37 recognizes the implicit direction of this, and implements tiveitem

Implicit JavaScript Item 37 recognizes the implicit direction of this, and implements tiveitem

This series serves as the Reading Notes for objective JavaScript.

 

CSV data is usually separated by certain delimiters. Therefore, you must support different delimiters when implementing CSV Reader. Naturally, a separator is used as the parameter of the constructor.

function CSVReader(separators) {this.separators = separators || [","];this.regexp =new RegExp(this.separators.map(function(sep) {return "\\" + sep[0];}).join("|"));}

For CSV Reader, the operating principle is to first split the read strings into rows based on line breaks, and then split each line into units based on separators. Therefore, you can use the map Method for implementation:

CSVReader.prototype.read = function(str) {var lines = str.trim().split(/\n/);return lines.map(function(line) {return line.split(this.regexp); // wrong this!});};var reader = new CSVReader();reader.read("a,b,c\nd,e,f\n"); // [["a,b,c"], ["d,e,f"]], wrong result

However, there is an error in the above Code: this point of the callback function passed into the map function has a problem. That is, this. regexp does not properly reference the regexp attribute of the CSVReader instance. Therefore, the final result is incorrect.

 

In this example, In the map callback function, this actually points to the Global Object window. This is introduced in Item 18 and Item 25 in various scenarios.

 

To overcome this point, the map function provides the second parameter to specify the point of this in its callback function:

CSVReader.prototype.read = function(str) {var lines = str.trim().split(/\n/);return lines.map(function(line) {return line.split(this.regexp);}, this); // forward outer this-binding to callback};var reader = new CSVReader();reader.read("a,b,c\nd,e,f\n");// [["a","b","c"], ["d","e","f"]]

However, not all functions are as well considered as map. If the map function cannot accept the second parameter as the point of this, you can use the following method:

CSVReader.prototype.read = function(str) {var lines = str.trim().split(/\n/);var self = this; // save a reference to outer this-bindingreturn lines.map(function(line) {return line.split(self.regexp); // use outer this});};var reader = new CSVReader();reader.read("a,b,c\nd,e,f\n");// [["a","b","c"], ["d","e","f"]]

This method saves this reference to another variable, and then uses the closure feature to access it in the map callback function. Generally, the variable name self is used to save the reference of this. Of course, using such variables as me is also feasible.

 

In the ES5 environment, you can use the bind method of the function to bind the point of this (in Item 25, this method is introduced ):

CSVReader.prototype.read = function(str) {var lines = str.trim().split(/\n/);return lines.map(function(line) {return line.split(this.regexp);}.bind(this)); // bind to outer this-binding};var reader = new CSVReader();reader.read("a,b,c\nd,e,f\n");// [["a","b","c"], ["d","e","f"]]

Summary

1. The point of this varies depending on the function call method.
2. Use self, me, that to save the reference of the current this for other functions.