The This keyword in javascript

normal function call

function Person () {    this. Name= "XL";    Console.log (this);    Console.log (this. name);} Person ();   // Output  window  XL

In this code, the person function is called as a normal function, in fact the person is called as a method of the global object window, namely Window.person (); So this place is the window object called the person method, Then this in the person function refers to window, and window has another property name, the value is XL.

var name= "XL"; function Person () {    console.log (this// output XL

The same place person as window the method to invoke, at the beginning of the code defines a global variable name , the value is xl , it window is equivalent to a property, that is window.name="xl" , because person when the call this is pointing to the window, so the output will be here xl .

As a method call

varName= "XL";varperson={name:"XL", ShowName:function() {Console.log ( This. Name);  }}person.showname (); //Output XL //here is the person object calling the ShowName method, it is obvious that the this keyword is pointing to the person object, so the name is output    varShownamea=Person.showname;shownamea (); //Output XL//This assigns the Person.showname method to the Shownamea variable, at which point the SHOWNAMEA variable corresponds to a property of the Window object, so Shownamea () executes at the time equivalent to Window.shownamea (), That is, the Window object calls Shownamea this method, so the This keyword points to the window

Another example

var persona={    name:"XL",    showname:function() {        Console.log (  this. name);}    } var personb={    name:"XL",    SayName:personA.showName}    personb.sayname ();   // output XL// Although the ShowName method is defined in the Persona object, it is called in the Personb object. So the This object points to

Called as a constructor function

functionPerson (name) { This. name=name;}varPersona=person ("XL"); Console.log (Persona.name); //output undefinedConsole.log (Window.name);//Output XL//The above code does not perform a new operation, which is equivalent to invoking the person ("XL") method of the Window object, then this point points to the Window object and assigns the Operation Window.name= "XL".    varpersonb=NewPerson ("XL"); Console.log (personb.name);//Output XL//The explanation of this part of the code is shown below

New operator

 //  The following code simulates the internal procedure of the new operator (instanced object)  Span style= "COLOR: #0000ff" >function   person (name) { var  o={};  o.__proto__  =person.prototype; //  prototype inherits      Person.call (o,name);  return   o;}     var  Personb=person ("XL"  //  output XL  

In person, first create an empty object o, point O's proto to Person.prototype to complete the inheritance of the properties and methods of the prototype
Person.call (O,name) Here is the function person as the Apply/call call (below the specific content), the person object in the change to O, that is, the completion of the o.name=name operation
Returns the object O.
So ' person (' XL ') ' Returns a property and method that inherits the ' Person.prototype ' object, and an object that has the ' name ' property ' XL ' and assigns it to the variable ' personb '. so ' Console.log ( Personb.name) ' will output ' XL '

Invocation of the Call/apply method

In JS, functions are also objects, so functions have methods. Inherit from Function.prototype to Function.prototype.call/Function.prototype.apply method
call/applyThe most important function of the method is to change this the direction of the keyword.

Obj.method.apply(AnotherObj,arguments);

var name= "XL"; var person={    name:"XL",    showname:function() {        Console.log (this  . Name);     // output "XL" // the first parameter inside the call method is null, which points to window by default.  // Although the ShowName method is defined inside the person object, but after using the call method, the this point in the ShowName method points to window. So the final output is "XL";

funtion Fruita (n1,n2) { This. n1=N1;  This. n2=N2;  This. change=function(x, y) { This. n1=x;  This. n2=y; }}    varFruita=NewFruita ("Cheery", "banana");varfruitb={n1:"Apple", N2:"Orange"};fruita.change.call (FRUITB,"Pear", "peach"); Console.log (FRUITB.N1); //Output PearConsole.log (FRUITB.N2);//Output Peach

FruitBInvokes fruitA a change method that fruitA this binds a binding to an object FruitB .

The This keyword in javascript