function is the first citizen in the JavaScript world, in other words, if we can master the use of JavaScript functions, then the use of JavaScript can be more adept. Anyone familiar with JavaScript should know that the same function, which is called in a different way, is the one that is most affected. Let's talk about the various invocation patterns of JavaScript functions, hoping to help you learn JavaScript.the invocation pattern of a common functionThe call pattern of the so-called normal function is also the simplest invocation pattern of JavaScript function, which is directly followed by a () implementation call, see the following code:functionfunc() {Console.log ( This= = = window); True}func (); The above code, we declare a Func function with the function keyword, and we print the This===window in the body, and then we call the function func directly, we can see that the console is directly printing out true, that is, The normal invocation pattern of a function in which this is a pointer to the Global Environment window. Students who do not know this can encounter a bug like this:varcolor = ' GG ';varobj = {color: ' Red ', show:function(){functionfunc1() {Console.log ( This. color); //gg}func1 ();}} Obj.show (); We declare a variable color and an object obj   in the global context; in the object obj Inside we also declare a color property for ' Red ' , a show method. And in the show method, we also declare a function func1 and call the  FUNC1 , FUNC1 's role is printing this.color . Finally we run the Code obj.show (); invoke obj inside the show method. The students who do not know the characteristics of the normal calling mode of the function may think that the ' red ' will be promised at the console at this time. In fact at this time in the console agreed to come out should be gg . Because the call pattern of the function func1 is a normal function call pattern (even if it is in the obj show method), so the this in the function body is directed to the global Environment window , So we print the variable color in the global environment. Some students may ask: if we want the func1 function to print out the ' red ' , how should we change it? It's really simple, because obj.color is &.nbsp; ' Red ' so we just need to put obj this into the function func1 It's okay,: .varcolor = ' GG ';varobj = {color: ' Red ', show:function(){varthat = This;functionfunc1() {console.log (that.color); Red}func1 ();}} Obj.show (); In the above code, because the this in show is pointing to obj, we declare a variable in show. This is used to bring the this to obj into the func1, and then the This.color in the FUNC1 function is changed to That.color, when the console prints out the "red" we want. There may be a reunion now asking: Why is this in show pointing to obj? That's what we're talking about. The second invocation pattern of the JavaScript function: Method invocation patternSecond, method invocation modeThe method invocation pattern is simply to invoke a JavaScript function as a method of an object, and when a function is saved as a property of an object, we call it a method, such as show in the Obj object above, and when a method is called, the thi inside the function body S is bound to this object, such as this in the show above. The method invocation pattern is also easily distinguishable: Obj.show (), object name. property name (); The code can refer to the OBJ code above, the blogger will not write more. Remember that the invocation of a method can access the object to which it belongs by using this in the body of the function.third, constructor invocation patternThe blogger thinks that the constructor invocation pattern is a more complex call pattern relative to other modes. The keyword new allows you to invoke a function as a constructor. The keyword new can change the function's return value:functionFunc2(name{this.name = name;}name; undefined//Normal function call patternvarFoo = Func2 (' Afei '); foo; Undefinedname; afei//constructor Invocation Patternvarbar = new Func2 (' Lizefei '); bar.__proto__ = = = Func2.prototype; Truebar; {name: ' Lizefei '}bar.name; //' Lizefei ' in the code above we declare a function func2  , which is called with two different invocation patterns. Because the function func2 does not return a value explicitly, when called as a normal function, it does not return anything, so the value of foo is undefined . Because the normal invocation pattern of this is pointing to the global environment window , so func2 (' Afei '); , the global environment is more than a name variable and equals ' Afei ' . When func2 is called as a constructor, we can see that it returns an object because the keyword new makes the function in the call has the following special change: 1. created a new object, and this new object is linked to func2 prototype The 2. of the property points the this in the function to the new object 3. if there is no explicit return value, the new object is used as the constructor  FUNC2 The return value of is returned (so bar is {name: ' Lizefei '} ) This way we can see what the constructor does: Initialize the newly created object with the function's call. In javascript object-oriented programming, this is quite important. Because in the declaration of a function, there is no difference between a function that is called as a constructor in the future and the declaration of a normal function, so it is easy for later developers to fail the program because of errors in calling patterns. So the developers are all in agreementConvention, The first character of a function name used to make a constructor call should be capitalized, for example: person, people. This way, the next developer will know that the function is called using the constructor call pattern as soon as they see the function name.Iv. using the Apply () and call () method callsThis mode of invocation is created for more flexibility in controlling the context in which the function runs. The simple thing is to control the value of this in the function body flexibly. The first parameter of both the apply and call methods is to pass the object that is being used by the function context (the simple point is that the object to bind to the function this). The other parameters are different: The second parameter of the Apply method is an array, the values inside the array are used as parameters of the function call, and the calling method, starting with the second argument (including the second one), is the argument for the function call; let's look at chestnuts:varobj = {name: ' Afei '}functionsay(AG1,AG2) {Console.log (ag1+ ': ' +ag2+ "" + This. name);} Say.apply (obj,[' Apply method ', ' hello ']); Apply method: Hello Afeisay.call (obj, ' call method ', ' Hi '); Call method: Hi Afei as the chestnut shows, we use the object obj as the context of the function say to invoke the function say, so this in the function is pointing to the object obj. In the Apply method, we pass two parameters (' Apply method ' and ' Hello ') to the Say method through the array [' Apply method ', ' hello '], so print it out: The Apply method: Hello Afei. The same call is the same, and the way the function is passed through the above code also at a glance at me, bloggers do not explain more. In addition, bloggers also heard that the two methods of apply and call, in addition to the way the parameters are passed, the speed of execution or apply than call to be faster. However, the blogger has not experimented.v. SummaryIn JavaScript, the function as long as the invocation pattern is this kind of (in ES6 there is a very strange and special function call pattern, called ' tag template ', where Bo Master also said, there is no more), as long as the master of the main mode of invocation, then no need to worry about this The value of the change to change. Source: Blog Park
What are the invocation patterns for JavaScript functions?
