Effective JavaScript Item 37 recognize the implicit point of this

this series as effective JavaScript 's reading notes.

CSV data is usually delimited by some sort of delimiter. Therefore, when implementing CSV Reader , you need to support different delimiters. A very natural implementation, then, is to use the delimiter as a 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 terms. It works by first segmentation the read-in string into rows based on line breaks. Each line is then sliced by delimiter to become a unit.

Therefore, you can use the map method to implement:

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

But there is an error in the preceding code: incoming to Map The callback function in the function This point to a problem. That is, the this.regexp does not correctly refer to the regexp property of the Csvreader instance . Therefore, the final result is also wrong.

for this example. in the callback function of map , this point is actually the Global object window. The Point of this in various scenarios is described in item a and item .

to overcome This the point of the problem, Map The function provides a second parameter to specify in its callback function This points to:

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 of the functions are as Map considered so thoughtful. Assume that the map function cannot accept the second parameter as a pointer to this. The ability to use the following methods:

CSVReader.prototype.read = function (str) {var lines = Str.trim (). Split (/\n/); var = this,//save a reference to outer This-bindingreturn Lines.map (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"]]

such a method would This is saved to another variable, and then the properties of the closure are used to Map To access it in the callback function. The variable name self is typically used to hold a reference to this. Of course use such as me. that is also possible.

in the ES5 environment. You can also use the Bind method of the function to bind The point of this ( in Item The method is described in this article ):

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 "]]

Summarize

2. depending on how the function is called, This will also be different.
4. Use Self , Me , that to save the current This references for other functions to use.

Effective JavaScript Item 37 recognize the implicit point of this