Javascript this usage

Javascript this usage
In web projects, Javascript is a dynamic language that must be mastered. Most Javascript-based frameworks cannot do without the basic Javascript usage and principles. This article mainly summarizes the evil this keyword in Javascript. When we get started, we throw out the following idea: "this in Javascript always points to the object that calls it ". Below I will give three most representative examples to verify my opinion. For example, call the copy code var x = 1; function testThis () {console. log (this. x);} testThis (); // a global variable x and a global method are declared here. Both objects are bound to Windows. Therefore, when testThis () is run () the result is the x Member of the Window object. The result is 1 var o ={}; o. x = 5; o. method = testThis; o. method (); // at this point, the method of the o object points to testThis. When it is called, this points to the object that calls the o object. this is x, which is the x of the de-o object, result 5: the example of copying code is very basic, that is, when a common object calls a method, in the method, this indicates calling him or having him. Example 2 constructor creates and copies the code var x = 2; function test () {this. x = 1;} var o = New test (); console. log (o. x); // 1 // This is the constructor in javascript. Create an instance using new. The value here is x bound to object o, so it is 1 // The following example is the Service in Angular. You can simply understand that it will use the second parameter to create a singleton object app. service ("MyService", function ($ http, $ modal) {this. test = function () {console. log (this); test2 ();} function test2 () {console. log (this)} MyService. test () // print MyService {test: function} and Window {} // log out here. Although test2 () can be called by test1 (), it does not actually belong to Serv Ice, so if this is called in test2, common errors will occur. Oh, Mom, why can't I tune my own method ?! The example of copying code often appears in our project and it is difficult to explain clearly, just as someone asked me why I didn't use this directly in the controller. Instead, I used $ scope to bind methods and variables, of course, using this can replace some $ scope, but it is inevitable that a series of problems are caused by different contexts of this. The key to this problem is that the test2 method does not belong to the object Service, but because it can be called by the service in the Service closure (closure), this in test2 does not point to the Service, therefore, an error is reported when other methods in the Service are called. Example 3 change this to copy the code function test () {console. log (this. x) ;}var o ={}; o. x = 1; o. m = test; o. m. apply ({x: 5}); // 5 o. m. call () // undefined // use apply/call to specify the context of this action to call a function. All parameters call functions of an o object, the default parameter is the Global copy code. In this example, we can see that the point of this is uncertain. The value of this is determined when it enters the context and remains unchanged during context running. The above example changes the context of this, resulting in two inconsistent results is also the best evidence. The biggest role of this article is that, after reading this article, you can understand why this is sometimes different from your own expectations, and you can get a solution to avoid such a problem, then my goal is achieved. Fortunately, you can see that the solution is presented to everyone: Just as Angular wants to provide you with a $ scope to bind attributes and methods, also, as coffeeScript will assign the value "_ this = this" at the beginning of an object, we may wish to define "val self = this" in our own js practices ", using self in subsequent scopes to operate on the attributes of objects is the solution.