1. 定义方式
- 函数声明语法
function sum (num1, num2) {
return num1 + num2;
}
- 函数表达式
var sum = function(num1, num2){
return num1 + num2;
};
- Function 构造函数
Function 构造函数可以接收任意数量的参数,
但最后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数。
var sum = new Function(“num1”, “num2”, “return num1 + num2”);
2. 特性
- 没有重载
函数实际上是对象。每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法。 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。 - 函数声明与函数表达式区别
执行顺序,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。
这样没有问题,因为解析器先解析sum方法
alert(sum(10,10));
function sum(num1, num2){
return num1 + num2;
}
这样执行会报错,按顺序sum中还没保存对函数的引用
alert(sum(10,10));
var sum = function(num1, num2){
return num1 + num2;
};
- 作为值的函数
因为 ECMAScript 中的函数名本身就是变量,所以函数也可以作为值来使用。
要访问函数的指针而不执行函数的话,必须去掉函数名后
面的那对圆括号 。
function createComparisonFunction(propertyName) {
return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if (value1 < value2){
return -1;
} else if (value1 > value2){
return 1;
} else {
return 0;
}
};
}
- 函数内部属性
在函数内部,有两个特殊的对象: arguments 和 this。
虽然 arguments 的主要用途是保存函数参数,但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这arguments 对象的函数。
function factorial(num){
if (num <=1) {
return 1;
} else {
return num * arguments.callee(num-1)
}
}
this引用的是函数据以执行的环境对象——或者也可以说是 this 值(当在网页的全局作用域中调用函数时,this 对象引用的就是 window)。
ECMAScript 5 也规范化了另一个函数对象的属性: caller。除了 Opera 的早期版本不支持,其他浏览器都支持这个 ECMAScript 3 并没有定义的属性。这个属性中保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,它的值为 null。例如:
function outer(){
inner();
}
function inner(){
alert(inner.caller);
}
outer();
以上代码会导致警告框中显示 outer()函数的源代码。因为 outer()调用了 inter(),所以inner.caller 就指向 outer()。为了实现更松散的耦合,也可以通过 arguments.callee.caller来访问相同的信息。
IE、 Firefox、 Chrome 和 Safari 的所有版本以及 Opera 9.6 都支持 caller 属性。
当函数在严格模式下运行时,访问 arguments.callee 会导致错误。 ECMAScript 5 还定义了arguments.caller 属性,但在严格模式下访问它也会导致错误,而在非严格模式下这个属性始终是
undefined。定义这个属性是为了分清 arguments.caller 和函数的 caller 属性。以上变化都是为了加强这门语言的安全性,这样第三方代码就不能在相同的环境里窥视其他代码了。
严格模式还有一个限制:不能为函数的 caller 属性赋值,否则会导致错误。
5. 函数属性和方法
每个函数都包含两个属性: length 和 prototype。其中, length 属性表示函数希望接收的命名参数的个数, 对于ECMAScript 中的引用类型而言, prototype 是保存它们所有实例方法的真正所在。
每个函数都包含两个非继承而来的方法: apply()和 call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的值。首先, apply()方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是
arguments 对象。例如:
function sum(num1, num2){
return num1 + num2;
}
function callSum1(num1, num2){
return sum.apply(this, arguments); // 传入 arguments 对象
}
function callSum2(num1, num2){
return sum.apply(this, [num1, num2]); // 传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20
在上面这个例子中, callSum1()在执行 sum()函数时传入了 this 作为 this 值(因为是在全局
作用域中调用的,所以传入的就是 window 对象)和 arguments 对象。而 callSum2 同样也调用了
sum()函数,但它传入的则是 this 和一个参数数组。这两个函数都会正常执行并返回正确的结果。
严格模式下,未指定环境对象而调用函数,则this值不会转换成window对象
call()方法与 apply()方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call()
方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用
call()方法时,传递给函数的参数必须逐个列举出来,如下面的例子所示。
function sum(num1, num2){
return num1 + num2;
}
function callSum(num1, num2){
return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20
事实上,传递参数并非 apply()和 call()真正的用武之地;它们真正强大的地方是能够扩充函数
赖以运行的作用域。下面来看一个例子。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
使用 call()(或 apply())来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。
在前面例子的第一个版本中,我们是先将 sayColor()函数放到了对象 o 中,然后再通过 o 来调用它的;
而在这里重写的例子中,就不需要先前那个多余的步骤了。
ECMAScript 5 还定义了一个方法: bind()。这个方法会创建一个函数的实例,其 this 值会被绑
定到传给 bind()函数的值。例如:
window.color = “red”;
var o = { color: “blue” };
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
在这里, sayColor()调用 bind()并传入对象 o,创建了 objectSayColor()函数。 objectSayColor()函数的 this 值等于 o,因此即使是在全局作用域中调用这个函数,也会看到"blue"。
支持 bind()方法的浏览器有 IE9+、 Firefox 4+、 Safari 5.1+、 Opera 12+和 Chrome。