Four invocation patterns of functions

Most of the night still can't sleep. Insomnia ([email protected][email protected]=) ...

　1. Introduction

Let's introduce the four kinds of function invocation patterns:

function call pattern,

Method invocation Mode,

Constructor call pattern,

context invocation mode;

Here, for the function invocation pattern, we mainly describe the point and return value of this for each invocation pattern.

　2. Code Analysis

　①, Function call pattern

　The following invocation pattern is the most familiar function invocation pattern, and what is the this point and return value of the function invocation pattern?

function fn1 () {   Console.log (this);  };
FN1 (); When the function fn1 is called, the result of this output is the window

In the above code, FN1, which is the function invocation pattern, is pointing to the window, and the return value is determined by return.

The following conclusions can be drawn (in the function invocation pattern):

A, this is a pointer to the window

b, the return value is determined by the return statement, and if there is no return the value is not returned

　　②, method invocation mode

var name = "James";
var obj = {
　  Name: "Wade",
   function () {       console.log (this.name);    }     };o Bj.fn1 ();  When invoking the Fn1 method function in obj, the output is Wade

Through the above code results analysis, you will get the following conclusions (in the method invocation pattern):

A, this is a pointer to the object that called the method

b, the return value is still determined by the return statement, if there is no return indicating that no value is returned

　　③, constructor call pattern

function Fn () {   this. Name = ' James ',   this. Age = +,   console.log (   This )          }; var New　　Fn (); When calling this code, the output is fn {name: "James", age:32}

Through the above code results analysis, you will get the following conclusions (in the constructor call pattern):

A, this is an instance that points to a constructor

B, if no return value is added, the default return value is this

But what if you add the return value manually?

function Fn1 () {   this. Name = "James";     return "Wade"    }; var New Fn1 ();
Console.log (Fn1.name); This code is the output of James;
function Fn2 () {   this. Name = "James";     return [N/a];    }; var New Fn2 ();
Console.log (Fn2.name); And this piece of code is output undefined

And through the above code results analysis, optimize the above conclusions:

A, this is an instance that points to a constructor

B, if no return value is added, the default return value is this

C, if there is a return value, and the return value is a simple data type (Number,string,boolean ), and return this at the end

D, if there is a return value, and the return value is a complex data type (object), the object is eventually returned, so the above fn2 is a pointer to the array, so fn2.name is undefined

　　④, Context invocation mode

　　

Function F1 () {
    Console.log (this);
}
F1.call (null);  Window
F1.call (undefined);  Window
F1.call (123);  Instance of number
F1.call ("abc");  Instance of string
F1.call (true);  Instances of Boolean
F1.call ([+]);  An instance of an array

Through the above analysis of the code results, the following conclusions are drawn (in context invocation mode):

A, the parameters passed are different, this point is different, this will point to the data type of the passed parameter

b, the return value is determined by return, if there is no return value.

Four invocation patterns of functions