函数的声明有三种方式
function命令
function print(s) {
console.log(s);
}
function
命令声明的代码区块,就是一个函数。 function
命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。
函数表达式
采用变量赋值的写法,这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称 函数表达式(Function Expression) ,因为赋值语句的等号右侧只能放表达式。
var print = function(s) {
console.log(s);
};
函数表达式的函数名只在函数体内部有效,下面的 x
只在函数体内部可用,指代函数表达式本身,其他地方都不可用:
var print = function x(){
console.log(typeof x);
};
x
// ReferenceError: x is not defined
print()
// function
这种写法的用处有两个
可以在函数体内部调用自身
方便除错(除错工具显示函数调用栈时,将显示函数名,而不再显示这里是一个匿名函数)。因此,下面的形式声明函数也非常常见
var f = function f() {};
Function构造函数
var add = new Function(
'x',
'y',
'return (x + y)'
);
// 等同于
function add(x, y) {
return (x + y);
}
在上面代码中, Function
构造函数接受三个参数,除了最后一个参数是 add
函数的“函数体”,其他参数都是 add
函数的参数。如果只有一个参数,该参数就是函数体:
var foo = new Function(
'return "hello world"'
);
// 等同于
function foo() {
return "hello world";
}
Function
构造函数可以不使用 new
命令,返回结果完全一样。
JS中函数允许多次声明,后面的声明就会覆盖前面的声明。
而且由于函数名的提升(参见下文),前一次声明在任何时候都是无效的。
JS的函数与其他数据类型(数值、字符串、布尔值等等)处于同等地位,可以使用其他数据类型的地方,就能使用函数。
比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。
function add(x, y) {
return x + y;
}
// 将函数赋值给一个变量
var operator = add;
// 将函数作为参数和返回值
function a(op){
return op;
}
a(add)(1, 1)
JS引擎将函数名视同变量名,所以采用 function
命令 声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错:
f();
function f() {}
但是,如果采用 赋值语句 定义函数,JavaScript就会报错:
f();
var f = function (){};
// TypeError: undefined is not a function
if (foo) {
function x() {}
}
try {
function x() {}
} catch(e) {
console.log(e);
}
按照语言规范,这是不合法的。但是,实际情况是各家浏览器往往并不报错,能够运行。
但是由于存在函数名的提升,所以在条件语句中声明函数,可能是无效的。
要达到在条件语句中定义函数的目的,只有使用函数表达式。
if (false) {
var f = function () {};
}
f() // undefined
name
属性返回紧跟在 function
关键字之后的那个函数名。
length
属性返回 函数预期传入的 参数个数,即函数定义之中的参数个数。
function f(a, b) {}
f.length // 2
上述函数不管调用时输入了多少个参数, length
属性始终等于2。
函数的 toString
方法返回函数的源码
function f() {
a();
b();
c();
}
f.toString()
// function f() {
// a();
// b();
// c();
// }
函数内部的注释也可以返回
function f() {/*
这是一个
多行注释
*/}
f.toString()
// "function f(){/*
// 这是一个
// 多行注释
// */}"
类似于java,在函数外声明就是全局变量(global variable),在函数内声明就是“局部变量”(local variable)。局部定义的变量,会覆盖同名全局变量。
注意:对于 var
命令来说,只有在函数内部声明的才是局部变量,由于存在变量提升,所以在其他区块中声明,一律都是全局变量:
if (true) {
var x = 5;
}
console.log(x); // 5
上面代码中,变量 x
在条件判断区块之中声明,结果就是一个全局变量,可以在区块之外读取。
ES6中的let命令可以避免这一点
与全局作用域一样,函数作用域内部也会产生“变量提升”现象。 var
命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。
function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
}
上面的代码等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}
函数本身也是一个值,也有自己的作用域,它的作用域绑定其声明时所在的作用域。函数内部访问的变量和该函数具有相同的作用域
下面的函数x的作用域绑定外层,x的内部变量a不会到函数f体内取值,所以输出1,而不是2
var a = 1;
var x = function () {
console.log(a);
};
function f() {
var a = 2;
x();
}
f() // 1
下面的外部作用域的x函数希望访问到y的内部变量,显然是不可以的:
var x = function (){
console.log(a);
};
function y(f){
var a = 2;
f();
}
y(x)
// ReferenceError: a is not defined
JS中函数参数不是必需的,允许省略参数,甚至一个都不传:
function f(a, b) {
return a;
}
f(1, 2, 3) // 1
f(1) // 1
f() // undefined
f.length // 2
上面的三种调用都不会报错。被省略的参数的值就变为 undefined
。
需要注意的是,函数的 length
属性与实际传入的参数个数无关,只反映函数预期传入的参数个数。
但是无法只省略靠前的参数。如果一定要省略靠前的参数,只有显式传入 undefined
:
function f(a, b) {
return a;
}
f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined
function f(a){
a = a || 1;
return a;
}
f('') // 1
f(0) // 1
上面代码的 ||
表示“或运算”,即如果 a
有值,则返回 a
,否则返回事先设定的默认值(上例为1)。
这种写法会对 a
进行一次布尔运算,只有为 true
时,才会返回 a
。
但是,除了 undefined
以外, 0
、空字符、 null
等的布尔值也是 false
。也就是说,如果外部传入了0或者空字符,也会返回默认值,为了避免这个问题,可以采用下面更精确的写法:
function f(a) {
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}
f() // 1
f('') // ""
f(0) // 0
var obj = [1, 2, 3];
function f(o){
o = [2, 3, 4];
}
f(obj);
obj // [1, 2, 3]
上面代码中,在函数 f
内部,参数对象 obj
被整个替换成另一个值,而不是参数对象的某个属性,这时不会影响到原始值。这是因为,形式参数( o
)与实际参数 obj
存在一个赋值关系。
// 函数f内部
o = obj;
上面代码中,对 o
的修改都会反映在 obj
身上。
但是,如果对 o
赋予一个新的值,就等于切断了 o
与 obj
的联系,导致此后的修改都不会影响到 obj
了。
某些情况下,如果需要对某个原始类型的变量,获取传址传递的效果,可以将它写成全局对象的属性。
var a = 1;
function f(p) {
window[p] = 2;
}
f('a');
a // 2
上面代码中,变量 a
本来是传值传递,但是写成 window
对象的属性,就达到了传址传递的效果。
如果有同名的参数,则取最后出现的那个值,即使后面的 a
没有值或被省略,也是以其为准:
function f(a, a) {
console.log(a);
}
f(1, 2) // 2
但调用函数 f
的时候,没有提供第二个参数, a
的取值就变成了 undefined
:
function f(a, a){
console.log(a);
}
f(1) // undefined
如果要获得第一个 a
的值,可以使用 arguments
对象
function f(a, a){
console.log(arguments[0]);
}
f(1) // 1
由于JS允许函数有不定数目的参数,所以需要一种机制,可以在函数体内部读取所有参数。这就是 arguments
对象的由来。
arguments
对象包含了函数运行时的所有参数,这个对象只有在函数体内部,才可以使用
var f = function(one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1, 2, 3)
// 1
// 2
// 3
arguments
可以为参数赋值(严格模式不允许这种用法):
var f = function(a, b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1)
// 5
可以通过 arguments
对象的 length
属性,判断函数调用时到底带几个参数
function f() {
return arguments.length;
}
f(1, 2, 3) // 3
f(1) // 1
f() // 0
虽然 arguments
很像数组,但它是一个对象。数组专有的方法(比如 slice
和 forEach
),不能在 arguments
对象上直接使用。
apply方法
可以通过 apply
方法,把 arguments
作为参数传进去,这样就可以让 arguments
使用数组方法了:
// 用于apply方法
myfunction.apply(obj, arguments).
// 使用与另一个数组合并
Array.prototype.concat.apply([1,2,3], arguments)
将arguments转为真正的数组
要让arguments对象使用数组方法,真正的解决方法是将arguments转为真正的数组。
下面是两种常用的转换方法:slice方法和逐一填入新数组
var args = Array.prototype.slice.call(arguments);
// or
var args = [];
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
arguments
对象带有一个 callee
属性,返回它所对应的原函数,可以通过 arguments.callee
,达到调用函数自身的目的。
var f = function(one) {
console.log(arguments.callee === f);
}
f() // true
function f1() {
var n = 999;
function f2() {
console.log(n); // 999
}
}
闭包简单理解成“定义在一个函数内部的函数”。
上述代码中,闭包就是函数 f2
,即能够读取其他函数内部变量的函数。由于在JavaScript语言中,只有函数内部的子函数才能读取内部变量,所以定义了这样的一种概念。
闭包最大的特点,就是它可以“记住”诞生的环境。本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
把 f2
作为返回值,达到在 f1
外部读取它的内部变量的目的:
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result(); // 999
可以读取函数内部的变量(可以封装对象的私有属性和方法)
和Java开发中的javabean的概念类似:
function Person(name) {
var _age;
function setAge(n) {
_age = n;
}
function getAge() {
return _age;
}
return {
name: name,
getAge: getAge,
setAge: setAge
};
}
var p1 = person('张三');
p1.setAge(25);
p1.getAge() // 25
上面代码中,函数 Person
的内部变量 _age
,通过闭包 getAge
和 setAge
,变成了返回对象 p1
的私有变量。
让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在
闭包使得内部变量记住上一次调用时的运算结果:
function createIncrementor(start) {
return function () {
return start++;
};
}
var inc = createIncrementor(5);
inc() // 5
inc() // 6
inc() // 7
上面代码中, start
是函数 createIncrementor
的内部变量。通过闭包, start
的状态被保留了,每一次调用都是在上一次调用的基础上进行计算。从中可以看到,闭包 inc
使得函数 createIncrementor
的内部环境,一直存在。所以,闭包可以看作是函数内部作用域的一个接口。
为什么会这样呢?原因就在于 inc
始终在内存中,而 inc
的存在依赖于 createIncrementor
,因此也始终在内存中,不会在调用结束后,被垃圾回收机制回收。
注意,外层函数每次运行,都会生成一个新的闭包,而这个闭包又会保留外层函数的内部变量,所以内存消耗很大。因此不能滥用闭包,否则会造成网页的性能问题。
有时在定义函数之后,希望立即调用该函数。但不能在函数的定义之后加上圆括号,这会产生语法错误。
function(){ /* code */ }();
// SyntaxError: Unexpected token (
产生这个错误的原因是, function
这个关键字即可以当作语句,也可以当作表达式
// 语句
function f() {}
// 表达式
var f = function f() {}
因此,JavaScript引擎规定,如果 function
关键字出现在行首,一律解释成语句。因此,JavaScript引擎看到行首是 function
关键字会解析成函数的定义,函数不应该以圆括号结尾,所以就报错了。
不要让 function
出现在行首,让引擎将其理解成一个表达式,将其放在一个圆括号里面:
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
上面两种写法都是以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义语句,所以就避免了错误。这就叫做 “立即调用的函数表达式”(Immediately-Invoked Function Expression) ,简称 IIFE 。
eval
命令的作用是,将字符串当作语句执行:
eval('var a = 1;');
a // 1
上面代码将字符串当作语句运行,生成了变量 a
。
eval
命令可以修改了外部变量a的值,存在安全风险
由于这个原因,如果无法做到作用域隔离,最好不要使用
var a = 1;
eval('a = 2');
a // 2
eval
的命令字符串不会得到JavaScript引擎的优化,运行速度较慢,尽量少用
ECMAScript 5将 eval
的使用分成两种情况:
eval
的作用域就是当前作用域(即全局作用域或函数作用域) “间接调用”,此时eval的作用域总是全局作用域
var a = 1;
function f(){
var a = 2;
var e = eval;
e('console.log(a)');
}
f() // 1
JavaScript 标准参考教程