call、apply、bind看了必懂

人们常说以上这三个是矫正this指向的,但是初次遇到它的人难免有点傻傻分不清楚,其实你需要的是三个足够简单精准的例子来做说明。

  • here we go---apply()
 function sum(num1,num2){
               return num1+num2;
}
function callSum1(num1,num2){
               return sum.apply(this,arguments); //传入arguments参数
}
function callSam2(num1,num2){
               return sum.apply(this,[num1,num2]); //传入数组
 }
alert(callSam1)(10,10);    //20
alert(callSam2))10,10);    //20

因为当前是在window环境调用的所以这个this传入的就是window对象。

  • call()
function sum(num1,num2){
         return num1+num2;
}
function callSum(num1,num2){
         return sum.call(this,num1,num2);
}
alert(callSum(10,10));   //20

在使用call()方法时,callSum()必须明确传入每一个参数。结果与使用apply()没什么不同,至于是使用apply()还是call(),完全取决于你采取哪种给函数传递参数的方式更方便。如果你打算直接传入arguments对象,或者包含函数中先接受到的也是一组数组,那么使用apply()肯定更方便;否则,选择call()可能更合适。(再不给函数传递参数的情况下,使用哪个方法都无所谓)

事实上,传递参数并非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;函数的执行函数不一样了,因为此时函数体内的this指向 了o,所以是“blue”
  • bind()
window.color="red";
var o = {color:"blue"};
function sauColor(){
     alert(this.color);
}
var anotherSaycolor = saycolor.bind(o);
anotherSaycolor(); //blue
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文档内容参考 《JavaScript 闯关记》之函数 函数是一段代码,它只定义一次,但可以被执行或调用任意次。在...
    穿越人海遇见你阅读 4,599评论 0 1
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 5,617评论 0 6
  • Chapter 5 引用类型 Object类型 创建Object实例new Object()var person ...
    云之外阅读 2,981评论 0 0
  • 之前写过函数也属于引用类型,与其他引用类型一样也是具有属性和方法。由于函数是对象,继承自object,因此函数名实...
    Miss____Du阅读 11,053评论 4 17
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,461评论 0 4