The three definitions of function in js, function declaration, function homonymy repetition, function deletion,

Posted by mikelmao on Fri, 24 May 2019 19:35:03 +0200

Full Stack Engineer Development Manual (Author: Luan Peng)

js series of tutorials 4-function, function parameters

In js, function itself belongs to one kind of object, so it can be defined and assigned as the attribute of object or the parameter of other functions. The function name is only a reference to the object class of the function.

Function Definition

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

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

[2] Function Definition Expressions

The name of a function defined in an expression is optional

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

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

Anonymous function, also known as Ramda function, is a function without an identifier after the function keyword.

Normally, functions are defined expressively without names, which makes the code that defines them more compact. Function Definition Expressions are particularly suitable for defining functions that can only be used once.

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

A function definition expression contains a name, and 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 within 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;}

Personally, for a named function expression, the function name corresponds to the formal parameter of the function object and can only be used inside the function, while the variable name corresponds to the real parameter of the function object and can be used inside and outside the function.

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

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

//IE11 - Browser is invalid, all output undefined
//chrome has problems dealing with the name attribute of anonymous functions and displays the name of the function expression
function fn(){};
console.log(fn.name);//'fn'
var fn = function(){};
console.log(fn.name);//'', will display'fn'in chrome browser
var fn = function abc(){};
console.log(fn.name);//'abc'

Function constructor

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

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

[Note] The Function constructor cannot specify the name of the function. It creates an anonymous function.

Technically, this is a functional expression. However, it is not recommended because this grammar causes code to be parsed twice. The first is to parse regular javascript code, and the second is to parse strings in incoming constructors, affecting performance

var sum = new Function('num1','num2','return num1 + num2');
//Equivalent to
var sum = function(num1,num2){
    return num1+num2;
}

Function() constructor creates a function whose body is always compiled in the global scope. Thus, the Function() constructor is similar to eval() executed in global scope.

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

[Note] Not all functions can be constructors

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

2. Order of Function Declarations

Function declarations are loaded preferentially over variables. So you don't have to worry about whether the function declaration is called before or after.

When calling a function, it will first query in the local active object, that is, in the current js file, if not, it will query upward. So if the same function name is defined in two js files, the two js files call their respective functions internally, and the last declared function is called in other js files.

Three, repeat

Duplicate declarations of variables are useless and do not override previously declared variables in the same scope, but duplicate declarations of functions override previously declared functions of the same name or variables of the same name.

//Duplicate declarations of variables are useless
var a = 1;
var a;
console.log(a);//1
//Override homonymous variables
var a;
function a(){
    console.log(1);
}
a();//1
//Covering homonymous functions
a();//2
function a(){
    console.log(1);
}
function a(){
    console.log(2);
}

Four, delete

Function declaration statements create variables that cannot be deleted, just like variable declarations.

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

Topics: Attribute Javascript