你的浏览器不支持canvas

Enjoy life!

javascript - 函数方法 apply()、call()、bind()

Date: Author: JM

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。

  • 参考资料
    • 《JavaScript高级程序设计(第3版)》 5.5.5 函数属性和方法

一、apply() 和 call()

1.1 apply()

  • apply(context,array):在特定的作用域中调用函数,即:等于设置函数体内 this 对象的值。
    • context:在其中运行函数的作用域。
    • array:参数数组。【可以是 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 

1.2 call()

  • call(context,...arg):在特定的作用域中调用函数,即:等于设置函数体内 this 对象的值。
    • context:在其中运行函数的作用域。
    • ...arg:传递给函数的参数必须逐个列举出来。
function sum(num1, num2){
 return num1 + num2;
}
function callSum(num1, num2){
 return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20 

1.3 扩充函数赖以运行的作用域

  • 传递参数并非 apply()call() 真正的用武之地;它们真正强大的地方是 能够扩充函数赖以运行的作用域
window.color = "red";

var o = { color: "blue" };

function sayColor(){
 alert(this.color);
}

sayColor(); //red

sayColor.call(this); //red,this = window,函数体内的 this 对象指向了 window
sayColor.call(window); //red,函数体内的 this 对象指向了 window
sayColor.call(o); //blue ,函数体内的 this 对象指向了 o
  • 使用 call()(或 apply())来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。

二、bind()

  • bind(context):创建一个函数的实例,其 this 值会被绑定到传给 bind() 函数的值。
    • context:在其中运行函数的作用域。
  • 支持 bind() 方法的浏览器有 IE9+Firefox 4+Safari 5.1+Opera 12+Chrome
window.color = "red";

var o = { color: "blue" };

function sayColor(){
 alert(this.color);
}

var objectSayColor = sayColor.bind(o);

objectSayColor(); //blue 

对于本文内容有问题或建议的小伙伴,欢迎在文章底部留言交流讨论。