What are the invocation patterns for JavaScript functions?

Source: Internet
Author: User

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 &nbsp 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 &nbsp, 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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.