一 概述
1.1 函数声明
(1)function命令
函数就是使用function命令命名的代码区块,便于反复调用。这种声明方式叫做函数的声明(Function Declaration)。
function print(){
// ...
}
(2)函数表达式
除了用function命令声明函数,还可以采用变量赋值的写法。
var print = function (){
// ...
};
这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式(Function Expression),因为赋值语句的等号右侧只能放表达式。采用函数表达式声明函数时,function命令后面不带有函数名。如果加上函数名,该函数名将成为函数内部的一个局部变量,只在函数体内部有效,在函数体外部无效。
var print = function x(){
console.log(typeof x);
}; x // ReferenceError: x is not defined print() // function
(3)Function构造函数
还有第三种声明函数的方式:通过Function构造函数声明。如果只有一个参数,该参数就是函数体。
var add = new Function("x","y","return (x+y)");
// 相当于定义了如下函数
// function add(x, y) {
// return (x+y);
// }
1.2 return语句
JavaScript引擎遇到return语句,就直接返回return后面的那个表达式的值,后面即使还有语句,也不会得到执行。也就是说,return语句所带的那个表达式,就是函数的返回值。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。
1.3 第一等公民
JavaScript的函数与其他数据类型处于同等地位,可以使用其他数据类型的地方就能使用函数。比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。这表示函数与其他数据类型的地方是平等,所以又称函数为第一等公民。
function add(x,y){
return x+y;
} // 将函数赋值给一个变量
var operator = add; // 将函数作为参数和返回值
function a(op){
return op;
}
a(add)(1,1) //
1.4 函数名的提升
JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会被提升到代码头部。所以,下面的代码不会报错:
f();
function f(){}
表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错:
f();
var f = function (){}; // TypeError: undefined is not a function
上面的代码等同于:
var f;
f();
f = function (){};
当调用f的时候,f只是被声明,还没有被赋值,等于undefined,所以会报错。因此,如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。
// 由于不带var的function声明被提前解析,被带var的函数覆盖
var f = function() {
console.log ('1');
} function f() {
console.log('2');
} f() //
1.5 不能声明函数的情况
函数声明语句并非真正的语句,ECMAScript规范只是允许他们作为*语句。它们可以出现在全局代码里,或者内嵌在其他函数里,但它们不能出现在循环、条件判断、或者try/catch/finally以及with语句中。
1.6 name属性
大多数JavaScript引擎支持非标准的name属性。该属性返回紧跟在function关键字之后的那个函数名。
function f1() {}
f1.name // 'f1' var f2 = function () {};
f2.name // '' var f3 = function myName() {};
f3.name // 'myName'
上面代码中,函数的name属性总是返回紧跟在function关键字之后的那个函数名。对于f2来说,返回空字符串,对于f3来说,返回函数表达式的名字(真正的函数名还是f3,myName这个名字只在函数体内部可用)。
2. 函数的实参和形参
2.1 length属性
所有函数都有一个length属性,返回函数定义中参数的个数。length属性提供了一种机制,判断定义时和调用时参数的差异,以便实现面向对象编程的”方法重载“(overload)。
function f(a,b) {} f.length //
上面代码定义了空函数f,它的length属性就是定义时参数的个数。不管调用时输入了多少个参数,length属性始终等于2。
2.2 参数的省略
参数不是必需的,Javascript语言允许省略参数。
function f(a,b){
return a;
} f(1,2,3) //
f(1) //
f() // undefined f.length //
上面代码的函数f定义了两个参数,但是运行时无论提供多少个参数(或者不提供参数),JavaScript都不会报错。被省略的参数的值就变为undefined。需要注意的是,函数的length属性与实际传入的参数个数无关,只反映定义时的参数个数。
但是,没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。
2.3 传参方式
JavaScript的函数参数传递方式是传值传递(passes by value),这意味着,在函数体内修改参数值,不会影响到函数外部。
// 修改原始类型的参数值
var p = 2; function f(p){
p = 3;
} f(p);
p // // 修改复合类型的参数值
var o = [1,2,3]; function f(o){
o = [2,3,4];
} f(o);
o // [1, 2, 3]
上面代码分成两段,分别修改原始类型的参数值和复合类型的参数值。两种情况下,函数内部修改参数值,都不会影响到函数外部。
需要十分注意的是,虽然参数本身是传值传递,但是对于复合类型的变量来说,属性值是传址传递(pass by reference),也就是说,属性值是通过地址读取的。所以在函数体内修改复合类型变量的属性值,会影响到函数外部。
// 修改对象的属性值
var o = { p:1 }; function f(obj){
obj.p = 2;
} f(o);
o.p // // 修改数组的属性值
var a = [1,2,3]; function f(a){
a[0]=4;
} f(a);
a // [4,2,3]
上面代码在函数体内,分别修改对象和数组的属性值,结果都影响到了函数外部,这证明复合类型变量的属性值是传址传递。
某些情况下,如果需要对某个变量达到传址传递的效果,可以将它写成全局对象的属性。
var a = 1; function f(p){
window[p]=2;
} f('a'); //变量a本来是传值传递,但是写成window对象的属性,就达到了传址传递的效果。 a //
2.4 可变长的实参列表arguments对象
ECMAScript函数不介意传递进来多少个参数,也不在乎传进来的参数是什么类型的,原因是在ECMAScript中的参数是用一个数组表示的,这个数字就是arguments。arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,依次类推。这个对象只有在函数体内部,才可以使用。
var f = function(one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
} f(1, 2, 3)
//
//
//
arguments对象除了可以读取参数,还可以为参数赋值(严格模式不允许这种用法)。可以通过arguments对象的length属性,判断函数调用时到底带几个参数。
(1)与数组的关系
需要注意的是,虽然arguments很像数组,但它是一个对象。某些用于数组的方法(比如slice和forEach方法),不能在arguments对象上使用。但是,有时arguments可以像数组一样,用在某些只用于数组的方法。比如,用在apply方法中,或使用concat方法完成数组合并。
// 用于apply方法
myfunction.apply(obj, arguments). // 使用与另一个数组合并
Array.prototype.concat.apply([1,2,3], arguments)
(2)caller和callee
callee属性指代当前正在执行的函数,caller指代调用当前正在执行的函数的函数。用caller属性可以访问调用栈。
3 函数调用
3.1 作为函数调用
var total = distance(0,0,2,1) + distance(2,1,3,5);
var probability = factorial(5) / factorial(13);
3.2 作为方法调用
一个方法就是保存在一个对象的属性里的JavaScript函数。例如:
o.m = f; //给o定义一个名为m()的方法
o.m() //调用m()函数的方法
o.m(x.y) // m()函数包含两个参数
方法调用和函数调用有一个重要的区别,即:调用上下文。属性访问表达式由两部分组成:一个对象(例如o)和属性名称(m)。在像这样的方法调用表达式里,对象o成为调用上下文,函数体可以使用关键字this引用该对象。
3.3 作为构造函数
var o = new Object();
如果函数或方法调用之前带有关键字new,它就构成了构造函数调用。构造函数调用会试图创建一个新的空对象,这个对象继承自构造函数的prototype属性。
3.4 间接调用
JavaScript中的函数也是对象,和其他JavaScript对象没有两样,函数对象也可以包含方法。其中call()和apply()可以用来间接的调用函数。两个方法都允许显式指定调用所需的this值,也就是说,任何函数可以作为任何对象的方法来调用,哪怕这个函数不是这个对象的方法。
call()和apply()看做某个对象的方法,通过调用方法的形式来间接调用函数。call()和apply()的第一个参数是要调用函数的母对象,它是调用上下文(运行函数的作用域),在函数体内通过this来获得对它的引用。
// 以对象o的方法来调用函数f()
f.call(o);
f.apply(o);
对于call()来说,第一个调用上下文参数之后的所有实参就是要传入待调用函数的值。
f.call(o,1,2); //以对象o的形式调用函数f(),并传入两个参数
apply()方法和call()方法类似,但传入实参的形式和call()有所不同,它的实参都放入一个数组中。传入apply()的参数数组可以是类数组对象也可以是真实数组。
f.apply(o, [1,2]);
4 作为命名空间的函数
由于在函数中声明的变量在整个函数体内都是可见的,在函数的外部是不可见的。而不在任何函数中声明的变量是全局变量,为了不污染全局命名空间,可以声明一个函数用作临时的命名空间。
// 将代码放入一个函数内,然后调用这个函数
(function(){
// 代码模块
}());
function之前的左圆括号是必需的,因为如果不写这个左圆括号,JavaScript解释器会试图将关键字function解析为函数声明语句。使用圆括号JavaScript解释器才会正确地将其解析为函数定义表达式。
var students = (function() {
// 这里定义了很多类如课程类/成绩类, 使用局部变量和函数
function Subject() { /* ... */ }
function Grade() { /* ... */ } // 通过返回命名空间对象将API导出
return {
Subject: Subject,
Grade: Grade
};
}());
5. 函数属性、方法
5.1 length属性
函数的length属性是只读的,代表函数实参的数量,这里的参数指的是“形参”而非“实参”,也就是函数定义时给出的形参个数,通常也是在函数调用时期望传入的实参个数。
function check(args){
var actual = args.length;
var expected = args.callee.length;
if(actual !== expected){
throw Error("Expected "+expected+"args; got"+actual);
}
}
function f(x, y, z){
check(arguments);
return x+y+z;
}
console.log(f(1,2,3)); //
5.2 prototype属性
每个函数都包含一个prototype属性,这个属性是指向一个对象的引用,这个对象称作“原型对象”。当将函数用做构造函数时,新创建的对象会从原型对象上继承属性。
5.3 bind()方法
bind()方法:将函数绑定至某个对象。在函数f()上调用bind()方法并传入一个对象o作为参数时,这个方法返回一个新函数。调用新的函数将会把原始的函数f()当做o的方法来调用。传入新函数的任何实参都是传入原始函数。
function f(y) {return this.x + y;}
var o = {x:1};
var g = f.bind(o);
console.log(g(2)); //
5.4 toString()方法
toString方法返回函数的源码。
function f() {
a();
b();
c();
} console.log(f.toString());
// function f() {
// a();
// b();
// c();
// }