Master This,call,apply thoroughly

Talk about JS inside more headache of knowledge point, this point, call and apply understanding of these three must count forward several, good JS developer This is must step over the sill. Today we summarize the three closely linked relationships.

The first recommendation is to understand the use of call

• Function.prototype.call

  Format: Fx.call (Thisarg [, ARG1,ARG2, ...]);

1. Call has an unlimited number of arguments, and the first number represents the pointer to this in the body of the calling function (FX) function. Starts with the second argument and sequentially passes in the function.

123456789101112131415

var age = 40;var Xiaoming = {Age:30};var Xiaoli = {Age:20};var getage = function () {console.log (this.age);}; Getage.call (xiaoming); 30 means the function this points to xiaominggetage.call (Xiaoli); 20 means the function this points to xiaoligetage.call (undefined),//40 getage.call (undefined) ==getage.call (null) getage.call (null);// 40getAge (); 40

If we pass in Fx.call () the first parameter number is NULL, then the function FX body this pointer to the host object, in the browser is the Window object, which also explains the Getage.call (undefined);//40.

On this basis we can understand that getage () is equivalent to Getage.call (null/undefined), extending to all functions,
FX () ==fx.call (null) = = Fx.call (undefined)

It is worth noting that strict mode is a bit different: this points to null

1234567

var getage = function () {' Use strict ' console.log (this.age);}; Getage (null);//error Age not defined

Again to understand the use of this

This is a common scenario:

• This is within the method of an object, and this point points to the object

123456789101112

var name = ' window '; var Student = {name: ' Kobe ', Getname:function () {Console.log (this = = Student);//trueconsole.log (this.name);//kobe}} St Udent.getname ();

• This is within a normal function, which indicates that this is a pointer to the global object (the browser is window)

12345678

var name = ' window '; var getName = function () {var name = ' Kobe ';//deceptive return this.name;} console.log (GetName ()); Window

• This is used in the constructor (constructor), which indicates that this is pointing to the returned object.

12345678

var name = ' window ';//constructor var Student = function () {this.name = ' Student ';} var s1 = new Student (); Console.log (S1.name); Student

Note: If the constructor returns an object (other type this point is not changed to follow the previous rule), then this refers to the returned OBJEC.

1234567891011

var name = ' window ';//constructor var Student = function () {this.name = ' Student '; return {name: ' Boystudent '}} var S1 = new Studen T (); Console.log (S1.name); Boystudent

• This points to a failure problem

12345678910111213

var name = ' window '; var Student = {name: ' Kobe ', Getname:function () {console.log (this.name);}} Student.getname (); Kobevar S1 = student.getname;s1 (); Window

Cause: At this point S1 is a function

123	function () {console.log (this.name);}

For a basic function, the preceding one refers to the window in the basic function.

• In the development we often use this caching method, cache the current scope under this to another environment domain to use

Finally understand the usage of apply Function.prototype.apply

Format: fx.apply (Thisarg [, Argarray]); Parameter array, Argarray

1. Apply and call function is the same, but the way of communication,
2. Apply accepts two parameters, the first is the point of this in the FX function body, and the usage is the same as the first parameter of call. The second parameter is an array or an array of classes, and apply is to pass the array element into the function FX.

1234567

var add = function (A, B, c) {Console.log (a +b +c); add.apply (null, [+]); 6

Then thoroughly understand the subject is OK

1234567891011121314151617

var a=10;var foo={a:20, bar:function () {var a=30; return this.a;}} Foo.bar ()//20 (Foo.bar) ()//20 (Foo.bar=foo.bar) ()//10 (Foo.bar,foo.bar) ()//10

Where there is a mistake or a better understanding, I hope you can point it out. Common progress.

Master This,call,apply thoroughly