【浅谈call , apply ,bind 的 差异】贵有恒,何必三更起、五更眠、最无益,只怕一日曝、十日寒。这篇文章主要讲述浅谈call , apply ,bind 的 差异相关的知识,希望能为你提供帮助。
---恢复内容开始---
//首先这三个的根本作用都是改变this的指向,这个你必须明确先说call //首先用单列模式声明一个对象;里面有个fn的方法,很简单,就是返回a里面的name;
var a = {name : ‘极速代码‘,fn:function(){return this.name;
}
}; a.fn()
//-->
输出是 ‘极速代码’ ,这个毫无疑问; var b = a.fn;
//声明一个对象b;让他等于a里面的这个fn方法;b();
//那么这时候如果我们执行b();
就会提示b这个方法不存在 b is not a function;为什么?原因是这样的,name这个属性是在a里面的,a执行的时候this就是a本身,所以可以调用,而b()执行,这里面的this就变成了b,所以无法调用a下面的name,所以我们要做的就是改变b方法执行的时候this的指向,让它指向a,这么做 b.call(a)-->
输出 ‘极速代码‘
再举个例子,大家肯定更加明白;声明对象a,b,他们里面都有一个叫name 的私有属性;
var a = {name : ‘极速代码‘,fn:function(){return this.name;
}
}; var
b = {name:‘极速个啥‘} b.fn = a.fn//让b里面也有a里面的fn; b.fn() //--->
输出的是 ‘极速个啥‘ b.fn.call(a)-->
输出的是‘极速代码’因为现在的this是指向a了。所以找到的是a里面的name属性;apply 跟call基本相似,只是apply只能最多传2个参,第一个是this指向,第二个是一个数组;看例子:改变this指向跟call一样,下面就说他们传参的区别
var a = {name:‘极速代码‘,fn:function(n,m){return this.name + n+m ;
}
};
a.fn(1,3) //--输出 ‘’极速代码4‘’;这没问题 var b = a.fn;
b(1,3)
// 提示b is not a function,因为没有改变this指向; b.apply(a,[1,3]) //-->
输出极速代码4; b.call(a,1,3) // -->
输出极速代码4;这两个大家灵活运用,如果需要传参是一个数组,或者很多就可以用apply; 另外一点就是如果第一个参数没有传或者传个null,this默认指向windowvar name = ‘极速代码,极速个啥‘
var a = {
name:‘极速代码‘,
fn:function(n,m){
return this.name + n+m ;
}
}
var b = a.fn
b.call(null,1,3) //-->
输出"极速代码,极速个啥13"this.指向了window,自然找的name是全局环境下的name;bind 也是改变this指向,跟call,apply有明星区别,bind顾名思义,就是把this指向改变,然后绑定,但没有执行,看例子; var a = {name:‘极速代码‘,fn:function(n,m){return this.name + n+m ;
}
};
var b = a.fn;
b.bind(a,1,3);
//没有输出任何东西;因为只是改变了this指向,并没有执行函数, b.bind(a,1,3)();
//输出 ‘极速代码13’ 到这里相信大家对这三者有了一定的了解,一定要从本质上了解他们。 ---恢复内容结束---
推荐阅读
- Android Widget和悬浮窗 原理
- 创建Facelets视图并映射Faces Servlet
- hppsdr.exe进程指南(HP Print and Scan Doctor)(详细信息介绍)
- 如何在Windows 10中删除临时文件(操作分步指南)
- Win8.1升级Win10出现0xc1900101-0x30018出错怎样处理?
- Win8电脑卡在正在关机界面怎样处理?
- Win8.1提示“sgtool.exe损坏的映像”怎样办?
- Windows8如何查看计算机基本信息?
- Windows8怎样关闭网络共享?