What is the function function of js? How to use function in js

The content of this article is about what is the function of js? The usage of function in js has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Function and function

Function is a reference type provided by JavaScript, and Function objects are created through the Function type.
In JavaScript, functions also exist in the form of objects, and each function is a Function object.

//字面量方式创建函数
var fun =function () {
    console.log(100)
};
//函数声明方式创建函数
function fn () {
    console.log(200)
};
/*     创建Funtion类型的对象
*       var 函数名 = new Function('参数',''函数体)*/
var f = new Function('a','console.log(a)');
f(2);//以函数方式调用

Function type

Function’s apply() method

Function’s apply() method is used to call a function , and accepts the specified this value and an array as parameters.

//定义函数
function fun(value) {
    console.log(value)
}
/*
函数的apply()方法——>用于调用一个函数
     函数名.apply(thisArg,[argsArray])
       thisArg——>可选项，函数运行时使用的this值
       argsArray——>可选项，一个数组或者类数组对象,其中的元素作为单独的参数传给Function函数。*/
fun.apply(null,['100']);

Function’s call() method

Function’s call() method is used to call a function and accepts the specified this value and parameter list.

var fun  = function (value,a,b,) {
    console.log(value,a,b,)
}
/*
*   call()方法调用函数
*   函数名.call(thisArg,arg1,arg2,…)
*
*   和apply()的区别在于提供参数的方式不同
*/
fun.call(null,2,3,4);//2 3 4

Function’s bind method

Function is used to create a new function, called a bound function, and accepts the specified this value as a parameter, and a parameter list

var fun = function (a,b,c) {
    console.log( a,b,c)
}
/*  bind方法->相当于复制一份当前函数
*   函数名.bind(thisArg，arg1，arg2，...)
*     thisArg->当绑定函数被调用时，该属性作为原函数运行时的this指向
*     arg->参数。当绑定函数被调用时，这些参数将在实参之前传递给被绑定的方法
*     */

var v =fun.bind(null,2,3,4);
v();//2 3 4

No overloading

In other development languages, functions have a feature called overloading. That is to define multiple functions with the same name, but each function receives a different number of parameters. The program will determine which function is called based on the number of actual parameters passed during the call.
There is no overlapping of functions in a single JavaScript. If multiple functions with the same name are defined, only the last defined function is valid.

arguments object

Although there is no overloading, JavaScript provides arguments objects that can simulate the phenomenon of function overloading.

/*
*    argumengs对象
*    *该对象存储当前函数中所有的参数（实参）->类数组对象
*    *该对象一般用于函数中
*    *作用-用于获取当前函数的所有参数
*    *arguments.length->函数所有参数（实参）的个数*/
function fun() {
    var num = arguments.length;
    switch (num){
        case 2://参数个数
            return arguments[0]+arguments[1];
        break;
        case 3:
            return arguments[0]+arguments[1]+arguments[2];
        break;
    }
}
console.log(fun(4,5));//9
console.log(fun(4,5,6));//15

Recursion

A function that calls itself within the function body is called a recursive function. In a sense, recursion is similar to a loop. Both execute the same code repeatedly and both require a termination condition to avoid infinite loops and infinite recursion.
In a function body, if you want to call its own function, there are two ways

• By using its own function name

• Passed Use the callee attribute of the arguments object to implement

/*//无线递归
function fun() {
    console.log('23')
    fun()//调用自身函数，实现递归
}
fun()*/

function fn(v) {
    console.log(v);
    if (v>=5){
        return
    }
    /*fn(v+1)*///使用该方法终止递归当执行下列代码输出时，报错
    arguments.callee(v+1)
}
/*fn(0)*/
var f = fn;
fn=null;
f(0);

Special function

Anonymous function

In JavaScript, when the function When used as data, the name does not need to be set. Two uses of anonymous functions

• You can pass anonymous functions as parameters to other functions.

• You can define an anonymous function to perform certain one-time tasks.

Callback function

When a function is used as a parameter of another function, the function used as the parameter is called a callback function.

//作为另一个函数参数的函数fun->回调函数
var fun = function () {
    return 2;
};

function fn(v) {
    return v();
}
/*
var result=fn(fun);//函数fun作为函数fn的实参
console.log(result);
*/

//以上代码等同于以下代码
//以下代码中作为参数的函数->匿名回调函数

var f = fn(function(){return 2;});
console.log(f);

Self-tuning function

Self-tuning function is a function that calls itself after defining the function

/*    自调函数->定义即调用的函数
*      相当于在匿名函数外加了小括号
*      第一对括号->定义函数
*      第二对括号->调用函数*/

(function () {
    console.log('23')
})()//23->后边的括号表示调用

One function acts as another function The result is returned, and the function returned as the result is called a function as a value

var one = function(){
    return 100;
}
// 作为值的函数 -> 内部函数的一种特殊用法
function fun(){
    var v = 100;
    // 内部函数
    return function(){
        return v;
    };
}

var result = fun();
// console.log(result);// one函数
// console.log(result());// 100

console.log(fun()());

Closure

Scope chain

Scope chain means that the local scope can access the scope that its parent can access

var a = 10;// 全局变量
function fun(){
    var b = 100;// fun函数作用域的局部变量
    // 内部函数
    function fn(){
        var c = 200;// fn函数作用域的局部变量
        // 内部函数
        function f(){
            var d = 300;// f函数作用域的布局变量
            // 调用变量
            console.log(a);// 10
            console.log(b);// 100
            console.log(c);// 200
            console.log(d);// 300
        }
        f();
        // 调用变量
        // console.log(a);// 10
        // console.log(b);// 100
        // console.log(c);// 200
        // console.log(d);// d is not defined
    }
    fn();
    // 调用变量
    // console.log(a);// 10
    // console.log(b);// 100
    // console.log(c);// c is not defined
    // console.log(d);// d is not defined
}
fun();

Closure

When any internal function is passed When a method is accessed from any outer scope, it is a closure.

var n;// 定义变量，但不初始化值
function fun(){// 函数作用域
    var v = 100;
    // 进行初始化值 -> 一个函数
    n = function(){
        console.log(v);
    }
    // n();
}
fun();

n();// 100

The role of closure

• Provide shareable local variables

• Protect shared local variables and provide special reading Write functions of variables

• Avoid global pollution

Related recommendations:

Introduction to JavaScript Function function types

A brief analysis of the understanding of functions in JS

Function type in ECMAScript_javascript skills

The above is the detailed content of What is the function function of js? How to use function in js. For more information, please follow other related articles on the PHP Chinese website!