Three ways to define functions in js

js series tutorial 4-function, function parameters

In js, the function itself is a type of object , so it can be defined, assigned, used as an attribute of an object or a parameter of other functions. The function name is just a reference to the object class of the function.

1. Function definition

[1] Function declaration statement
Use the function keyword, followed by a set of parameters and the function body

function funcname([arg1 [,arg2 [...,argn]]]){
    statement;
}

【2】Function definition expression

A function defined in expression mode, the name of the function is optional

var functionName = function([arg1 [,arg2 [...,argn]]]){
    statement;
}var functionName = function funcName([arg1 [,arg2 [...,argn]]]){
    statement;
}

Anonymous function (anonymous function) is also called a lambda function, which is a function Functions without identifiers after keywords

Generally speaking, functions defined in expressions do not need names, which makes the code that defines them more compact. Function definition expressions are particularly suitable for defining functions that will only be used once

var tensquared = (function(x) {return x*x;}(10));   //

While a function definition expression contains a name, the local scope of the function will contain a name bound to the function object. In fact, the name of the function will become a local variable inside the function

var test = function fn(){   return fn;
}console.log(test);//fn(){return fn;}console.log(test());//fn(){return fn;}console.log(test()());//fn(){return fn;}

My personal understanding is that for named function expressions, the function name is equivalent to the formal parameter of the function object and can only be used inside the function; The variable name is equivalent to the actual parameter of the function object, which can be used both inside and outside the function.

var test = function fn(){   return fn === test;
}console.log(test());//trueconsole.log(test === fn);//ReferenceError: fn is not defined

The function defines a non-standard name attribute, through which the name specified by the given function can be accessed. The value of this attribute is always equal to the identifier following the function keyword. The name attribute of the anonymous function is empty

//IE11-浏览器无效，均输出undefined//chrome在处理匿名函数的name属性时有问题，会显示函数表达式的名字function fn(){};
console.log(fn.name);//'fn'var fn = function(){};
console.log(fn.name);//''，在chrome浏览器中会显示'fn'var fn = function abc(){};
console.log(fn.name);//'abc'

[3] Function constructor

The Function constructor receives any number of parameters , but the last parameter is always regarded as the function body, and the previous parameters enumerate the parameters of the new function

var functionName = new Function(['arg1' [,'arg2' [...,'argn']]],'statement;');

[Note] The Function constructor cannot specify a function name, it creates a Anonymous function

Technically, this is a function expression. However, it is not recommended because this syntax causes the code to be parsed twice. The first time is to parse the regular javascript code, and the second time is to parse the string passed into the constructor, which affects the performance

var sum = new Function('num1','num2','return num1 + num2');//等价于var sum = function(num1,num2){
    return num1+num2;
}

Function() The function created by the constructor will always be compiled globally executed within the scope. Therefore, the Function() constructor is similar to eval() executed in the global scope

var test = 0;function fn(){
    var test = 1;    return new Function('return test');}
console.log(fn()());//0

[Note] Not all functions can become constructors

var o = new Math.min();//Uncaught TypeError: Math.min is not a constructor

2 , Function declaration order

Function declaration will be loaded first compared to variables. So don't worry about whether the function declaration is before or after the call.

When calling a function, it will first be queried in the local active object, that is, in the current js file. If there is no query, it will be queried upwards. Therefore, if the same function name is defined in two js files, the two js The respective functions are called inside the file, and the last declared function is called in other js files.

3. Repeat

Repeated declarations of variables are useless and will not overwrite previously declared variables in the same scope, but repeated declarations of functions will overwrite previous declarations. function or variable with the same name.

//变量的重复声明无用var a = 1;var a;
console.log(a);//1

//覆盖同名变量var a;function a(){
    console.log(1);
}a();//1

//覆盖同名函数a();//2function a(){
    console.log(1);
}function a(){
    console.log(2);
}

4. Delete

The variables created by the function declaration statement cannot be deleted, which is the same as the variable declaration.

function foo(){
    console.log(1);
}delete foo;//falseconsole.log(foo());//1

This article introduces three ways to define functions in js. For more related content, please pay attention to the php Chinese website.

Related recommendations:

"True and False" in JS

How to determine collision through JS!

Introducing some js implementation solutions for classic algorithms

The above is the detailed content of Three ways to define functions in js. For more information, please follow other related articles on the PHP Chinese website!