首页  >  文章  >  web前端  >  js中函数的三种定义方式

js中函数的三种定义方式

jacklove
jacklove原创
2018-06-15 15:59:476300浏览

js系列教程4-函数、函数参数

在js中,函数本身属于对象的一种,因此可以定义、赋值,作为对象的属性或者成为其他函数的参数。函数名只是函数这个对象类的引用。

一、函数定义

【1】函数声明语句
使用function关键字,后跟一组参数以及函数体

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

【2】函数定义表达式

以表达式方式定义的函数,函数的名称是可选的

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

匿名函数(anonymous function)也叫拉姆达函数,是function关键字后面没有标识符的函数

通常而言,以表达式方式定义函数时都不需要名称,这会让定义它们的代码更加紧凑。函数定义表达式特别适合用来定义那些只会使用一次的函数

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

 而一个函数定义表达式包含名称,函数的局部作用域将会包含一个绑定到函数对象的名称。实际上,函数的名称将成为函数内部的一个局部变量

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

个人理解,对于具名的函数表达式来说,函数名称相当于函数对象的形参,只能在函数内部使用;而变量名称相当于函数对象的实参,在函数内部和函数外部都可以使用

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

函数定义了一个非标准的name属性,通过这个属性可以访问到给定函数指定的名字,这个属性的值永远等于跟在function关键字后面的标识符,匿名函数的name属性为空

//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构造函数

Function构造函数接收任意数量的参数,但最后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数

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

[注意]Function构造函数无法指定函数名称,它创建的是一个匿名函数

从技术上讲,这是一个函数表达式。但,不推荐使用,因为这种语法会导致解析两次代码。第一次是解析常规javascript代码,第二次解析传入构造函数中的字符串,影响性能

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

Function()构造函数创建的函数,其函数体的编译总是会在全局作用域中执行。于是,Function()构造函数类似于在全局作用域中执行的eval()

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

[注意]并不是所有的函数都可以成为构造函数

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

二、函数声明顺序

函数声明,相对于变量会优先加载。所以不用担心函数声明在调用前还是调用后。

调用函数时会先在本机活动对象中查询,即当前js文件中查询,如果没有才会向上查询,所以若在两个js文件中定义相同函数名,这两个js文件内部调用各自的函数,其他js文件中调用最后声明的函数。

三、重复

变量的重复声明是无用的,不会覆盖之前同一作用域声明的变量,但函数的重复声明会覆盖前面的声明的同名函数或同名变量。

//变量的重复声明无用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);
}

四、删除

函数声明语句创建的变量无法删除,这一点和变量声明一样。

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

   本文介绍了js中函数的三种定义方式,更多相关内容请关注php中文网。

相关推荐:

JS 中的‘’真假‘’

通过JS实现判断碰撞的方法!

介绍一些经典算法的js实现方案

以上是js中函数的三种定义方式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn