Summary of examples of function calling patterns in javascript basic tutorials

It will only be executed when the function is called. The call operator is a pair of parentheses following any expression that produces a function value. The parentheses can contain zero or more comma-separated expressions. Each expression produces a parameter value, and each parameter value is assigned the formal parameter name

defined when the function was declared. JavaScript has a total of 4 calling modes: function calling mode, method calling mode, constructor calling mode and Indirect calling mode

【1】Function calling mode

When a function is not a property of an object, it is called as a function. For ordinary function calls, the return value of the function is the value of the calling expression

function add(x,y){    
   return x+y;
}
var sum = add(3,4);
console.log(sum)//7

When calling a function using the function call mode, in non-strict mode, this is bound to the global object; in strict mode , this is undefined

function add(x,y){
    console.log(this);//window}    
add();

function add(x,y){    
'use strict';
    console.log(this);//undefined
}    
add();//window

Therefore, 'this' can be used to determine whether the current is strict mode

var strict = (function(){return !this;}());

Rewrite

Because this is bound to the function in the function call mode Determined to the global object, so the phenomenon of global properties being overwritten will occur

var a = 0;
function fn(){
    this.a = 1;
}
fn();
console.log(this,this.a,a);//window 1 1

[2] Method calling mode

When a function is saved as an attribute of the object, we call it a method. When a method is called, this is bound to the object. If the calling expression contains an action to extract properties, then it is called as a method.

var o = {
    m: function(){
        console.log(1);
    }
};
o.m();//1

The method can use this to access the object it belongs to, so it can get the value from the object or modify the object. . The binding of this to the object occurs at call time. Methods that can obtain the context of the objects they belong to through this are called public methods

var o = {
    a: 1,
    m: function(){
        return this;
    },
    n: function(){
        this.a = 2;
    }
};
console.log(o.m().a);//1
o.n();
console.log(o.m().a);//2

Any function that is called as a method will actually pass in an implicit argument - this argument is an object, and the method call The parent is this object. Generally speaking, methods based on that object can perform a variety of operations. The syntax of the method call has clearly shown that the function will operate based on an object.

rect.setSize(width,height);
setRectSize(rect,width,height);

Assume the above two lines of code The functions are exactly the same, they all act on a hypothetical object rect. It can be seen that the method calling syntax in the first line clearly indicates that the carrier of this function execution is the rect object, and all operations in the function will be based on this object

Unlike variables, the keyword this has no scope Due to the restriction, a nested function does not inherit this from the function that calls it. If a nested function is called as a method, its this value points to the object that called it. If the nested function is called as a function, its this value is either a global object (in non-strict mode) or undefined (in strict mode)

var o = {
    m: function(){
         function n(){
             return this;
         }
         return n();
    }
}
console.log(o.m());//window

var o = {
    m: function(){
         function n(){
             'use strict';
             return this;
         }
         return n();
    }
}
console.log(o.m());//undefined

If you want to access the this value of this external function, you need to save the value of this In a variable, both the variable and the internal function are in the same scope. Usually the variable self or that is used to save this

var o = {
    m: function(){
        var self = this;
        console.log(this === o);//true
         function n(){
             console.log(this === o);//false
             console.log(self === o);//true
             return self;
         }
         return n();
    }
}
console.log(o.m() === o);//true

【3】Constructor call mode

If the function or method call is preceded by the keyword new, it constitutes a constructor call

function fn(){    
   this.a = 1;
};
var obj = new fn();
console.log(obj.a);//1

　If the constructor call contains a set of actual parameter lists in parentheses, these actual parameter expressions are first calculated and then passed into the function

function fn(x){    
  this.a = x;
};
var obj = new fn(2);
console.log(obj.a);//2

　If the constructor has no formal parameters, the javascript constructor call The syntax of allows the omission of the argument list and parentheses. Any constructor call without formal parameters can omit the parentheses

var o = new Object();//等价于
var o = new Object;

[Note] Although the constructor looks like a method call, it will still use the new object as the calling context. That is to say, in the expression new o.m(), the calling context is not o

var o = {
    m: function(){
        return this;
    }
}
var obj = new o.m();
console.log(obj,obj === o);//{} false
console.log(obj.constructor === o.m);//true

Constructors usually do not use the return keyword. They usually initialize new objects. When the function body of the constructor is executed, It is returned explicitly. In this case, the constructor call expression evaluates to the value of this new object

function fn(){    
  this.a = 2;
}var test = new fn();
console.log(test);//{a:2}

If the constructor uses a return statement but does not specify a return value, or returns a primitive value, then this will be ignored Return the value and use this new object as the call result

function fn(){
    this.a = 2;
    return;
}
var test = new fn();
console.log(test);//{a:2}

If the constructor explicitly uses the return statement to return an object, then the value of the calling expression is this object

var obj = {a:1};
function fn(){
    this.a = 2;
    return obj;
}
var test = new fn();
console.log(test);//{a:1}

[4] Indirect calling mode

Functions in JavaScript are also objects, and function objects can also contain methods. The call() and apply() methods can be used to call functions indirectly

Both of these methods allow you to explicitly specify the this value required for the call, that is, any function can be used as a method of any object. Called, even if this function is not a method of that object. Both methods can specify the actual parameters of the call. The call() method uses its own actual parameter list as the actual parameter of the function, and the apply() method requires the parameters to be passed in in the form of an array

var obj = {};
function sum(x,y){
    return x+y;
}
console.log(sum.call(obj,1,2));//3
console.log(sum.apply(obj,[1,2]));//3

The above is the detailed content of Summary of examples of function calling patterns in javascript basic tutorials. For more information, please follow other related articles on the PHP Chinese website!