JavaScript Again (i): Effect of function invocation pattern on this

Recently, I learned a little bit about JavaScript, and read the chapter on functions to clarify the direction of this in JavaScript in different invocation modes.

1. Function call Mode: function is a reference type of JavaScript and has four invocation modes: Method invocation pattern, function call pattern, constructor call pattern, apply call mode

2. Different invocation modes of function have different effects on this:

(1) method invocation pattern: function as the method of the object is called. At this point, this points to the object calling function.

1 var obj = {2    name: "Lucy"3    function() {  4This        . Name);  At this point printname, as the method of obj is called, this points to call Printname's Obj,this.name = = = "Lucy".  56   };

(2) constructor invocation pattern: function is called as a constructor, that is, the new operator is used to create an instance of the object, the new object is connected to the prototype of the function, and this points to the newly created object instance; The code inside the execution constructor adds a member to the new object instance, and finally returns the new object instance.

1 //Create the constructor demo, which points to the prototype of the demo when the demo is called by the new operator. 2 varDemo =function( ){3     This. Name = "Jack";4 };5 6 //in the demo's prototype, add the method Printname. 7Demo.prototype.printName =function( ){8Concole.log ( This. Name);9 };Ten  One //Create the demo instance, at which point this is already pointing to the demo's prototype A varD =NewDemo (); -Console.log (D.name);//output "Jack" on the console -D.printname ();//output "Jack" on the console

PS: The constructor, the constructor is only in English translation in the process of the translation of the word difference, in English are constructor. JavaScript pristine is translated as a constructor, and the third edition of JavaScript Advanced Programming is translated as a constructor.

(3) Apply call mode: In JavaScript, a function is also an object and has a method, which has the method apply. Apply accepts two parameters, the first one is the value to pass to this, and the second is the parameter array. When the function calls the Apply method, the This inside of the function points to the first argument passed by apply.

1 varPeople = {2      This. Name = "Lily";3 }4 5 varPrintname =function( ){6Console.log ( This. Name)7 }8 9 //Apply now points this to the peopleTenPrintname.apply (People)//on the console output lily

PS: "JavaScript pristine" mentions only apply. Apply and call are functionally identical, but there are small differences in how they are used.

(4) Function call pattern: Neither as a method call nor as a call to itself nor as a constructor called by new, this is called the function invocation pattern. This time inside of the function refers to the global variable, in the browser is the window variable, in node. JS is the global variable.

1Window.name = "Bob";2 3 //this point points to the window4 varPrintname =function( ) {5Console.log ( This. Name);6 };7 8Console.log (Window.name)//on the console output Bob9Printname ()//on the console output Bob

3, Summary:

(1) method invocation pattern: This points to the object that invokes the method.

(2) constructor invocation pattern: This points to the prototype of the constructor.

(3) Apply invocation mode: This points to the first object passed in by apply.

(4) Function call mode: This points to the Global object window.

JavaScript Again (i): Effect of function invocation pattern on this