Learn the this,call,apply of JavaScript

In the previous JavaScript learning, this,call,apply always puzzled me, but they used it very widely. It took a day to understand JavaScript's this,call,apply. There are also a lot of books in the middle, with JavaScript design patterns and development practices, JavaScript advanced programming, and JavaScript you don't know as a supplement. These three books have helped me to understand this,call,apply.

This

First of all, let's tell this first.

In the description of this in JavaScript design patterns and development practices, I think one sentence hits the core point of this. That is:

JavaScript's this always points to an object

Specific to the actual application, this point can be divided into the following four kinds:

1. Method invocation as an object

2. Called as a normal function

3. Constructor call

4. Apply and call calls

Next we analyze the top 3 points, and the 4th apply and call calls are explained in detail in the calling and apply sections.

1. Method calls as objects

Description: When called as an object method, this point points to the object. Example:

/**/var obj =  {1,  function() {    Console.log ( this = = obj);    Console.log (this. a);   // true, 1

2. As a normal function call

Description: When called as a normal function, this always points to the Global Object (window in the browser). Example:

/** 2. As a normal function call * * When not called as an object property, this must point to an object. That's the global object. */Window.name= ' Globalname ';varGetName =function() {Console.log ( This. name);}; GetName (); //' Globalname 'varMyObject ={name:"ObjectName", GetName:function() {Console.log ( This. Name)}}; Myobject.getname (); //' ObjectName '//This is essentially the function () {Console.log (this.name)}//this sentence was assigned to Thename. Thisname is called in the global object and is naturally read as the name value of the global objectvarThename =myobject.getname;thename ();//' Globalname '

3. Constructor invocation

Description: When called as a constructor, this points to the returned object. Example:

/* * * 3. Call as constructor *   */ var function () {  this. Name = "Lxxyx";};  var New  //  Lxxyx//  myClass {name: "Lxxyx"}

However, if a return other object is manually specified in the constructor, this will not work. If the return is a different data type, then there is no problem.

var function () {  this. Name = "Lxxyx";    // when you add a return, the other object is returned. This does not work.   return  {    name:"Returnothers"  }}; var New  //  returnothers

Call and apply

Call and apply are used the same way. is used to specify the direction of this in the function body.

The difference between call and apply

Call: The first parameter is the pointer to this, and the argument to the function has one input. Apply: The first parameter is the point of this, the second parameter is an array, and all parameters are passed in at once.

If the first argument is null, this points to the hosting environment, which is window in the browser. (Thank you for not a wave in the comments)

1. Change this point

Description: This is the most common use of call and apply. Used to change the direction of this in the function body. Example:

var name = "Globalname"varfunction() {  Console.log (this  // "Globalname" var obj = {  "Lxxyx",  function() {    Console.log (  This . Name)   // "Globalname" points this to window // "Lxxyx" points this to obj

2. Ways to borrow other objects

Here, let's start with an immediate execution of an anonymous function:

(function(A, b) {  //  +///    Call Array's prototype method  Array.prototype.push.call (arguments, 3);   // (+/-)}) (from)

A function has a arguments property, and arguments is an array of classes.
But arguments is not a way to call the array directly, so we use call or apply to invoke the Array object's prototype method.
The principle is also very easy to understand, for example, just called the Push method, and the push method in Google's V8 engine, the source code is this:

functionArraypush () {varn = To_uint32 ( This. length);//the length of the push object  varm =% _argumentslength ();//number of parameters for push   for(vari = 0; I < m; i++) {     This[i + n] =% _arguments (i);//copying elements  }   This. length = n + M;//Fixed Length Property  return  This. Length;}

It is only related to this, so as long as the class array object, you can call the relevant method to handle.

Reprinted from 1190000004380278

Learn the this,call,apply of JavaScript