About the understanding of this in JavaScript

about This, generally who called The method that this method is pointing to, This is pointing to the object that is currently called (I am the most beautiful), the callback function inside the This will point to (heavy)

If there are multiple calls, the object property reference chain has only the previous layer or the last layer to function in the call location, such as:

function foo () {Console.log (THIS.A)} var obj2 = {a:42, foo:foo} var obj1 = {a:2, obj2:ob J2} obj1.obj2.foo (); 42

one of the most common problems with this binding is that a function that is implicitly bound loses the bound object, which means that he applies the default binding back, thereby binding this to a global object or undefined, depending on whether it is a strict pattern.

function foo () {Console.log (THIS.A)} var obj1 = {a:2, foo:foo} var bar = Obj1.foo;  function aliases! var a = "oops, global"; A is the property of the Global object Bar (); "Oops, global"

Although Bar is a reference to Obj.foo, in fact it refers to the Foo function itself, so bar () is actually a function call without any modification, so the default binding is applied, a more subtle, A more common and more unexpected scenario occurs when the callback function is passed in:

function foo () {Console.log (THIS.A)} function Dofoo (FN) {///FN is actually referring to foo FN ();//<--Call location! } var obj = {a:2, foo:foo} var a = "oops, global"; A is the property of the Global object Dofoo (Obj.foo); "Oops, global"

How to change the direction of this, (simply specify this, such as call, apply, bind, new binding, etc.)

1, variables to save the point of this

2, 2, bind () change this point to the inside of the parameter is the pointer of this is placed at the end of the curly brace

3. Call () Change the parameters of this point: the first parameter is the pointer to the second parameter and all subsequent arguments

If it is used in an immediate execution function then it needs to be placed outside the parentheses

If used in the timer, put it outside the curly braces.

4. Apply (): Change the parameter of this to the inside: the first parameter is the pointer to the second parameter and all subsequent arguments

5. Use as follows:

in this is the new binding: New is the last method that can affect the behavior of this binding on a function call, which we call the new binding.

The function of the arrow functions:

one thing to add here is that the this of the arrow functions in the next generation of JavaScript standard ES6 always points to this when the function is defined, not when it is executed. We use an example to understand:

var o = {x:1, func:function () {Console.log (this.x)}, Test:function () {setTimeout (function ()         {This.func ();     }, 100);  } }; O.test (); TypeError:this.func is not a function

the above code will cause an error because the point of this is changed from O to Global. We need to modify the above code as follows:

var o = {x:1, func:function () {Console.log (this.x)}, Test:function () {var _this = this;         SetTimeout (function () {_this.func ();     }, 100);  } }; O.test ();

This is applied in the arrow function:

1, generally used in the callback function to replace functions with the =

2, 2, this pointer does not point to the object that called him, but to the object that created him.

Summarize:

1. If you want to determine the this binding of a running function, you need to find the direct call location of the function. Once found, the following four rules are applied to determine the binding object of this.

2. Called by New? Bind to the newly created object.

3. Called by Call or apply (or bind)? Binds to the specified object.

4. called by the context object ? Bind to that context object.

5. default: Bind to undefined in strict mode , otherwise bind to global object.

About the understanding of this in JavaScript