JavaScript深入理解函数 - 函数的属性

在上一篇文章中我们介绍了，因为函数是对象，所以函数也有自己的属性和方法。每个函数都包括两个属性： length 和 prototype 。 length 属性表示函数希望接收参数的个数， prototype 属性是函数的原型。

函数的 length 属性表示函数希望接收参数的个数。例如下面的代码：

function fn1(num1){
  return num1 * 10;
}
function fn2(num1,num2){
  return num1 + num2;
}
function fn3(){
  return true;
}
console.info(fn1.length);   // 1
console.info(fn2.length);   // 2
console.info(fn3.length);   // 0
                            

上面的代码中定义了3个函数，这3个函数的参数个数均不相同，通过控制台的打印可以看出各个函数所期望的参数个数是多少。

每个函数都包括两个非继承来的方法： call() 和 apply() 。这两个方法的作用是在特定的作用域中调用函数，也就是说这两个方法可以通过函数名称来调用函数。

对于 apply() 方法，第一个参数是调用方法的上下文，第二个参数是一个参数数组，可以直接把 arguments 传入。

对于 call() 方法，第一个参数是上下文对象，第二个参数是不同的函数参数。

例如下面的例子展示了 apply() 方法的应用。

function sum(num1,num2){
  return num1+num2;
}
/* 通过arguments来调用 */
function applySum1(num1,num2){
  //使用sum函数来完成一次调用，调用的参数就是applySum1这个函数的参数(此时的this是window)
  return sum.apply(this,arguments);
}

/* 通过参数数组来调用 */
function applySum2(num1,num2){
  return sum.apply(this,[num1,num2]);
}
alert(applySum1(11,22));      //输出33
alert(applySum2(11,22));      //输出33                        
                            

上面的 applySum1() 和 applySum2() 两个函数是 apply() 方法的两种使用方式。

在 applySum1() 函数中，使用sum函数来完成调用，在 apply() 方法中， this 是调用 sum 方法的上下文对象，即 window 对象，而调用的参数就是 applySum1() 方法的参数。

applySum2() 方法和 applySum1() 方法唯一的区别是参数不同， applySum2() 中 apply() 方法的参数是一个数组对象。

call() 方法和 apply() 方法的功能完全相同，不同的是 call() 方法是通过参数列表来完成调用。例如下面的例子：

function callSum(num1,num2){
  //call是通过参数列表来完成调用，其它和apply没有任何区别
  return sum.call(this,num1,num2);
}
alert(callSum(11,22));      //输出33                              
                            

call() 和 apply() 方法的真正强大的地方是可以扩充函数运行的作用域。例如下面的例子：

var color = "red";
function showColor(){
  alert(this.color);
}
//创建了一个类
function Circle(color){
  this.color = color;
  this.showColor = showColor;
}
var c = new Circle("yellow");

//使用上下文(window)来调用showColor，结果是red
showColor.call(this);
//上下文对象是c，结果是yellow
showColor.call(c);                              
                            

在这个例子中， showColor.call(this); 是在全局作用域中调用 showColor 方法，此时的 this == window ，所以它会打印出颜色为“red”，而 showColor.call(c); 则是使用对象c作为调用 showColor 方法的上下文，所以会打印出颜色“yellow”。

对于函数的 prototype 属性，我们将会在介绍JavaScript对象的时候详细讲解。

查看更多关于JavaScript深入理解函数 - 函数的属性的详细内容...