The This usage of JavaScript

Reference Video: http://www.imooc.com/video/6430

The this in JavaScript is more flexible, but also let a lot of beginners can not touch the mind, then according to the different environment, in the same function, different invocation mode, then this is also may be different.

Let's start by looking at the global action under this.

Global this (browser)

Console.log (This.document===documet);//true

Console.log (This===window);//true

this.a=37;

Console.log (WINDOW.A);//37

The This in the global scope refers to the global object, which is generally referred to as windows in the browser. For example, the above this.document is window.document. This is the equivalent of window, so This=window.

SO,THIS.A=WINDOW.A.

This (browser) of the general function

Function F1 () {

return this;

}

F1 () ===window;//true,global object

For example, we use such a general function declaration and general expression, and then we go directly to invoke such a function, then the this is still pointing to the global variable, then in the browser is window, then in node. js, the Global object.

function F2 () {

"Use strict"//ee strict mode

return this;

}

F2 () ===undefined;//true

One thing we need to be aware of is that in strict mode, the this of the general function call points to the undefined.

We are more familiar with this as a function of the object method:

var o={

Prop:37,

F:function () {

return this.prop;

}

};

Console.log (O.F ());//logs 37

When we use this as an object method, we know that the function, if it is a property of an object, such as the argument we created, O, then O has a property F, its value is a function object, that for such a function as an object property values, we are often called an object method. So much for the object method to call, such as here with O.F () to call, this case of this general will point to such an object o, here we can see that the O.F () call will return 37, because this point to O, so the equivalent of O.prop, so the final result is 37.

var o={prop:37};

function Independent () {

return this.prop;

}

O.f=independent;

Console.log (O.F ());//logs 37

So, in this case, we're not just going to define the object of the function argument, for example, we define an object o, and there is only one property prop:37; So we have a separate independent function in this, so the function inside, we still return This.prop, if I call independent directly, this will still point to window. This temporarily creates an O's property f (that is, O.F) and points to independent, so call Console.log again (O.F (), then follow the same function!

This is not to see how the function is created, but as long as the function as the object of the method, like this o.f () to call, then, this will point to this o.prop.

This is on the object prototype chain:

var o={f:function () {return this.a+this.b;}};

var p=object.create (o);

P.a=1;

p.b=4;

Console.log (P.F ());//5

Create an object o there is a property f inside, and the function as the value of the property, we created an object P through Object.create, and the object P is an empty object, and its prototype points to O, then p.a=1;p.b=4, which creates the properties of the object, So when I go to the prototype method, THIS.A and this.b still get the values of P.A and p.b. The prototype of P in this is O, that is to say, call P.F () when called when the object on the prototype object o above the property F.

Get/set method and this:

function modulus () {

Return math.aqrt (thisre*this.re+this*this.im);

}

var 0={

Re:1,

Im:-1,

Get phase () {

Return math.atan2 (this.im,this.re);

}

};

Object.defineproperty (o, ' modules ', {

get:modulus,enumerable,configurable:ture });

Console.log (o.phase,o.modulus);//logs-0.78 14.4142

The Get/set method is similar in that it uses a modules. Then here we go to calculate this.re and this.im, here we use an object o, and O inside there is a get method, give such a property phase, and then use

Object.defineproperty (Object, PropertyName, descriptor) to define the properties of O, here we can also call O.phase and O.modulus to get the properties of O, then mod ules inside this will still point to O's Re and IM, we also need to know that the Get/set method inside the object that will point to it, Then we'll make a temporary difference. This object is similar to the property that created the. Modulus, so this is similar to the general object properties as function Objects!

This in the constructor:
function MyClass () {
this.a=37;
}
var o= new MyClass ();
Console.log (O.A);//37

function C2 () {
this.a=37;
RETURN{A:38};
}
O=new C2 ();
Console.log (O.A);//38
If we call MyClass this function normally, this is a pointer to the global variable window, but if you use new MyClass to call it as the constructor, then MyClass's this will point to the empty object, And this object will point to the prototype Myclass.prototype. When new is used here, this will point to a prototypeThe Myclass.prototype property of such an empty object, so that because our THIS.A is assigned a value of 37, and the return value of MyClass default is this, so this object o will output 37. So similar we define a function C2, and then this.a=37, but return inside the returned statement is a:38, so a is no longer 37, but 38. When we use new to create such a constructor to invoke this, Then this will point to a prototype for a myclass.prototype such an empty object, and finally to see the return value, if you do not write the return statement, the default is to return this, if there is a return statement returned an object, so the return object is returned as the value, so O . A is 38.

Call/apply method and this:
function Add (c,d) {
return this.a+this.b+c+d;
}
var 0= {a:1,b:3};
Add.call (, o,5,7);//1+3+5+7=16
Add.apply (o,[10,20]);//1+3+10+20=34
function Bar () {
Console.log (Object,prototype.tostring.call (this));
}
Bar.call (7);//"[Object number]"
In addition to the different invocation methods, each function object will also have a method, you can modify the function to execute the inside of this, the more common is call/apply. For example, in my case, the function declaration Add, we use THIS.A and this.b, and the parameters C and D to add the four numbers together. How do we do this, we are defining a variable o, which has two attributes A:1,b:3, and then through the call method of this object, the first parameter to accept the object about this, followed by 5 and 7 (that is, we want to add the parameters), that is, c=5,d=7, The end result is 1+3+5+7=16. In fact, call and apply in fact there is no difference, but the way that you and I have a different approach to the transfer of the parameters, and it is directly transferred to the parameter variables, and apply is the parameter as an array of transmission in, so apply the result is also 1+3+10+20=34,. Now let's distinguish between the use of call and apply, for example, we want to invoke object, Prototype.tostring, but we want to specify a certain this to invoke some of the methods that we can't call directly, then we'll call bar here. Call (7), so that you can get an internal tag such as an indirect string.

Bind method with this:
function f () {
return THIS.A;
}

var g=f.bind ({A: "Test"});
Console.log (g ());//test

var o={a:37,f:f,g:g};
Console.log (O.F (), O.G ());//37 test
In addition to call/apply and bind method, bind method can only be compatible with IE9 and above, we define a function object F (), then we define a object by bind method, and pass the parameter value "test", so that we get a G object, When we call the output below, we find that the test parameter has been called, so it is a bit more efficient to use a binding once, and then repeat the call, and still implement the binding, which is more effective than using call/apply. We define a function o below, then assign a value of 37, then F () is assigned to F (), G is assigned g (), then we output o.f (), O.G () is 37, Test. The special thing here is that we use the Bind method, even if we use the Bind method, and the new binding method as the property of the object to call, then this will still follow the previous binding to go, so also return this test

The This usage of JavaScript