here summarize JS in a key--this. the This of a function in JS does not point to the function itself or to a scope, but to the object. In a nutshell, which object calls the function, the this in the function points to the object. But there are more complicated situations when you actually write code. This is complicated because it depends on where the function is called in the code, not where it is declared, that is, this does not follow the lexical scope, but depends on the context of the runtime. This is a binding rule with 4 main types. There are, of course, individual exceptions. But as long as you can understand these binding rules, it is not a problem to write code with this style. 1 default bindings. If the function is called independently, which is called directly using a function reference without any adornments, then it is the default binding. Default binding, if you use non-strict mode, this binds the global object, which is the window object in the browser. If strict mode (strict mode) is used, the global object cannot use the default binding, then this is bound to undefined. Example://non-strict modefunction foo () {Console.log (THIS.A);}var a = 2;foo ();//2 //Strict modefunction foo () {"Use strict";Console.log (THIS.A);}var a = 2;foo ();//typeerror:this is undefined 2 implicit binding. When a function is added as a reference property to an object, obj, or the function (method) is defined in obj itself, the this in the function call is bound to the Obj object when the invocation of the function is called through the properties of the Obj object. Note that only the last layer in the object property reference chain affects the call location. Example:function foo () {Console.log (THIS.A);}var obj2 = {A:2,Foo:foo};var obj1 = {A:1,Obj2:obj2};Obj1.obj2.foo ();//2 That is , the object that only calls the function directly from the tube, this is bound to the object. implicit binding has two cases of implicit loss, that is, this is not bound to the corresponding bound object, but instead takes the default binding, which is bound to the global object or undefined. These two situations are: assign a function to a variable function foo () {Console.log (THIS.A);}var obj = {A:2,Foo:foo};var bar = Obj.foo;//function alias! var a = "oops, global";//A is a property of a global objectbar ();//"Oops, global" in the above code, bar refers to the function Foo itself. That is, var bar = Obj.foo is the variable that assigns the result to the right of the equal sign to the left of the equal sign, essentially calls the returned function itself, so the last function call is a function call without any adornments, this is the default binding. There is a case to be aware of:function foo () {Console.log (THIS.A);}var a = 2;var o = {a:3, foo:foo};var p = {A:4};O.foo ();//3(P.foo = O.foo) ();//2 (P.foo = O.foo) (), such a direct call, is actually called the return value to the right of the equals sign, that is, Foo, so the result is 2. If P.foo = O.foo;p.foo (), then 4 is returned, which is equivalent to two steps, and the last call is the Foo method of P. two functions passed as parameters function foo () {Console.log (THIS.A);}var obj = {A:2,Foo:foo};var a = "oops, global";//A is a property of a global objectSetTimeout (Obj.foo, +);//"Oops, global" in the above code, Obj.foo is passed into the timer function as a callback function. This is equivalent to a single assignment. So after the function is called, the inside of this is the default binding. the SetTimeout () function is implemented similar to the following pseudo-code:function SetTimeout (fn,delay) {//wait delay millisecondsfn ();//<--Call location! } 3 Explicit bindingusing Call,apply,bind, any of the three functions, the this binding of a function to the specified object. The use of call and apply is the same, the only difference is the parameter pass, the parameters of the Apply function is to accept the array. (This is also a special use of the Apply function, that is, when encountering the need to divide the array into parameters, you can use the Apply function, the function usage is not expanded to speak). function foo (something) {Console.log (THIS.A, something);return this.a + something;}//Simple auxiliary binding functionfunction bind (FN, obj) {return function () {return fn.apply (obj, arguments);};}var obj = {a:2};var bar = bind (foo, obj);var B = Bar (3);//2 3Console.log (b);//5 The bind function enforces this binding of the Foo function on the Obj object. It is also important to note that the above bind is a simple auxiliary binding function, but it can embody the principle of the bind function, that is, the bind function as a wrapper function, call it to return the function that really handles the binding, so call the bar function and pass in the parameter when the Foo function is bound to obj. 4 new Bindings function foo (a) {THIS.A = A;}var bar = new Foo (2);Console.log (BAR.A);//2The new object is bound to this of the function call by using new to make the constructor call. in the above 4 cases, you can judge the this point of the function at a call location. The priority of the above 4 is from high to low, respectively:1 new Call2 Call or Apply (or bind)3 Context object invocation,4 Default Callthat is, if there are two situations in the call location, the this binding object depends on a high priority condition.
Welcome to communicate with each other and learn from each other. Front-end development QQ Group: 711357426
JavaScript syntax--this
