This in JavaScript (you don't know the JavaScript)

This in JavaScript, when we were just touching JavaScript, everyone was doing a lot of talking about how smart and important it was, but they didn't care; with their own step-by-step understanding of JavaScript, it suddenly dawned, it really is very important! So, I spent about 2 weeks to check and paste, read the books before reading, the whole picture is shown below.

What is this--based on the context of the call location; different call locations, this value is different. everyone in JavaScript has two misconceptions about this:
(1) This points to the function itself
(2) The scope of this pointer function

The scope cannot be accessed through JavaScript code, it exists inside the JavaScript engine. Whenever you use this and lexical scopes to find a mix, be sure to remind yourself that this is not possible!

This is bound at run time, not at the time of writing, and its context depends on the various conditions when the function is called. This binding has nothing to do with the location of the function declaration, only depending on where the function is called (that is, how the function is called)!

Example:

var foo = "Golbal foo"; var myObj = {foo: ' myObj foo '};var say = function () {console.log (this.foo);} Myobj.say = Say;myobj.say ();//Result: MYOBJ Foosay ();//Result: Golbal foo

second, why use this

var me = {name: "Fenfei"};//does not use this, call function speak (name) {Console.log ("Hello, I ' m" + name);} Speak (Me.Name);//hello, I ' m fenfei//use this, call function speak () {Console.log ("Hello, I ' m" + this.name);} Speak.call (me);//hello, I ' m Fenfei

This provides a more elegant way to implicitly "pass" an object reference, so the API can be designed to be more concise and easy to reuse.

three. The four binding rules of this1. Default binding--function call Type: Standalone function call, this point to global object.

var a = "foo"; function foo () {console.log (THIS.A);} Foo ();//"foo"

In strict mode, the global object will not be able to use the default binding, so this is bound to undefined.

var a = "foo"; function foo () {"Use strict"; Console.log (THIS.A);} Foo ();//Typeerror:this is undefined

2. Implicit binding--whether the call location has a context object, or is owned by an object or contains

function foo () {console.log (THIS.A);} var obj1 = {A:2,foo:foo}var Obj2 = {A:1,obj1:obj1}obj2.obj1.foo ();//Results: 2

When Foo () is called, its foothold points to the Obj1 object, and the implicit binding rule binds this to the context object in the function call.
The object property reference chain has only the topmost or last layer that affects the call location.

Note: implicit loss

The common this binding problem is that the "implicit binding" function loses the bound object, which is the "default binding", which binds this to the global object (undefined in strict mode).

var a = "foo"; function foo () {console.log (THIS.A);} var obj = {A:2,foo:foo}var bar = Obj.foo;bar ();//"foo"

Although bar is a reference to Obj.foo, in fact it refers to the Foo function itself, so bar () at this point is actually a function call without any adornments, so the default binding is applied.

var a = "foo"; function foo () {console.log (THIS.A);} function Dofoo (FN) {//var fn = Obj.foofn ();} var obj = {A:2,foo:foo}dofoo (obj.foo);//"foo" SetTimeout (Obj.foo, +);//"foo"

Parameter passing is actually an implicit assignment, so the passed-in function is implicitly assigned (LHS)

3. Show Bindings(1) Call, apply
(2) Hard binding

function foo () {console.log (THIS.A);} var obj = {a:2};var bar = function () {foo.call (obj);}; Bar (); 2setTimeout (bar, n);//2bar.call (window);//2

The function bar () was created, and Foo.call (obj) was manually invoked internally, forcing the this of Foo to be bound to obj. No matter how the function bar is called, the Foo is always raised manually in obj. This forced binding of the display is called " hard binding ."

4. New BindingThe new Call function automatically performs the following actions:
(1) Create (or construct) a brand-new object;
(2) This new object will be executed [[prototype]] connected;
(3) This new object is bound to this of the function call;
(4) If the function does not return another object, the function call in the new expression will automatically return the new object.
Iv. Priority Level

Knowing the four rules of this binding in a function call, what needs to be done is to find the function's call location and determine which rule it corresponds to.

1. Is the function a new binding? If it is, this binds to the newly created object.

var bar = new Foo ();

2. Does the function show binding or hard binding via call, apply? If yes, this binds to the specified object.

var bar = Foo.call (obj);

3. Is the function implicitly invoked in a context object? If yes, this binds to the context object.

var bar = Obj.foo ();

4. None of the above, use the default binding. If in strict mode, bind to undefined, otherwise bind to the Global Window object.

var bar = foo ();

Five, bind this note point1. Ignore this

Passing null or undefined as this binding object to call, apply, bind, called will be ignored, the actual application is the default binding rules!

function foo () {console.log (THIS.A);} var a = 1;foo.call (null, 2);//1foo.apply (Undefined, [3]);//1

2. Indirect references

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 Indirect reference var Pfoo = O.foo;pfoo ();//2 implicit drop Lost

Note: With the above "Implicit loss"The result is the same, but the process is not quite the same, differentiate!!
3. ES6 Arrow Function

The arrow function does not use the four standard rules of this, but rather determines this based on the outer (function or global) scope.
The binding of the arrow function cannot be modified. Often used in callback functions, such as event handlers or timers. and ES6 before the code of this = the self mechanism.

function foo () {setTimeout (() =>{console.log (THIS.A);},100);} var obj = {A:2};foo.call (obj);

Equivalent to:

function foo () {var self = this;settimeout (function () {console.log (SELF.A);},100);} var obj = {A:2};foo.call (obj);

Six, detailed how to determine this1. (Implicit binding) if a member of an object is a function, this point points to the current object when this method is called from this object.

var Fenfei = {firstname: "Li", LastName: "Gang", Timetravel:function (year) {Console.log (This.firstname + "" + This.lastname + "is time traveling to" + year);}} Fenfei.timetravel,//li Gang is time traveling to 2014 (Parent/Owner object: Fenfei)

2. (Privacy binding) you can refer to the Timetravel method on the Fenfei object by creating a new object.

var camile = {firstname: "Li", LastName: "Yunxia"}camile.timetravel = Fenfei.timetravel; Camile.timetravel,//li Yunxia is time traveling to 2014 (Parent/Owner object: Camile)

Note: This example is similar to the above "Implicit loss”、“Indirect references"Distinction!!!
3. (implicit loss) use a variable to save a reference to the Fenfei.timetravel method

var gettimetravel = Fenfei.timetravel;gettimetravel;//undefined undefined is time traveling to 2014 (Parent/ Owner object: Window;window object does not have FirstName and LastName attributes)

PS: Remember this in the method will point to the parent/owner object that called it! Whenever a function is called, we must look at the square brackets or the left side of the parentheses, if we see a reference (Reference), then the this value in the function is the object to which the method belongs, if not, Then it is pointing to the global object.

4. The This within the method of the asynchronous call

<button id= "Async" > Click me </button>

var btndom = document.getElementById ("async"); Btndom.addeventlistener (' click ', Fenfei.timetravel);//undefined Undefined is time traveling to [object MouseEvent] (Parent/Owner object: Button) Btndom.addeventlistener (' click ', Function (e) { Fenfei.timetravel,//li Gang is time traveling to 2014 (Parent/Owner object: Fenfei)});

5. (new binding) The this in the constructorWhen you use a constructor to create an instance of an object, the this in the constructor is the newly created instance.

var timetravel = function (FName, lName) {this.firstname = Fname;this.lastname = LName;} var Fenfei = new Timetravel ("Li", "Gang"), Console.log (Fenfei.firstname + "" + fenfei.lastname);//li Gang

6. (show bindings) call and apply method set this value

var camile = {firstname: "Li", LastName: "Yunxia"}fenfei.timetravel.call (camile,2014);//li Yunxia is time traveling to 2014 (Specify this object is Camile) FenFei.timeTravel.apply (camile,[2014]);//li Yunxia is time traveling to 2014 (specifies that this object is Camile)

PS: Note The comparison with "2" above
7. (show binding) bind binds a function to an object (ES5)

function f (Y) {return this.x + y;} var o = {x:1};/* f.bind (o) Returns a new function that calls G (2) to call the original function f () as O method to invoke */var g = F.bind (o); G (2);//3

Supplement: ES5 method prior to simulating bind () method

function Mybind (f, O) {if (f.bind) {return f.bind (o);} Else{return function () {return f.apply (o, arguments);}}

The role of BIND and apply,call is similar to changing the function's execute context, which is the point of the This keyword at runtime. However, the method of use is slightly different. A function can be executed later after bind.

Vii. Supplementary1. When you use new to create multiple instances of a function, these instances share prototype. When a property is added directly to this in an instance, the property with the same name in prototype is hidden.
If you want to access the property values in prototype instead of your own set property values:
(1) Delete the attribute added by the instance itself: delete Instance name. Property name
(2) Direct access to properties in prototype: Thing.prototype.name

function Thing () {}thing.prototype.name = "Leegang"; Thing.prototype.getName = function () {console.log (this.name);} Thing.prototype.setName = function (newName) {this.name = NewName;} Thing.prototype.deleteName = function () {delete this.name;} var thing = new Thing ();/*thing:thing {}*/thing.setname ("Liyunxia");/*thing:thing {name: "Liyunxia"}*/thing.getname () ;//Result: Liyunxiathing.deletename ();/*thing:thing {}*/thing.getname ();//Result: Leegangthing.__proto__ is thing {name: " Leegang "}thing.name =" Liyunxia ";/*thing {name:" Liyunxia "}*/thing.getname ();//Result: Liyunxiadelete thing.name;/* thing:thing {}*/thing.getname ();//Result: Leegang thing.__proto__ for thing {name: "Leegang"}

2. curryingTransforms a function that takes multiple arguments into a function that takes a single parameter (the first parameter of the original function), and returns a new function that takes the remaining arguments and returns the result if other arguments are necessary

var sum = function (x, y) {return x + y;} var succ = Sum.bind (null, 1), SUCC (2),//3function f (y, z) {return this.x + y +z;} var g = F.bind ({x:1}, 2); G (3);//6

Reprint Please specify source:http://blog.csdn.net/ligang2585116

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint please indicate source: http://blog.csdn.net/ligang2585116!

This in JavaScript (you don't know the JavaScript)