var obj = { a: 1, // a是定义在对象obj中的属性 fire: function () { console.log(this.a) } } fireInGrobal = obj.fire; fireInGrobal(); // 输出2 fireInGrobal.call(obj); // 输出1
原本丢失了与obj绑定的this参数的fireInGrobal再次重新把this绑回到了obj
但是,我们其实不太喜欢这种每次调用都要依赖call的方式,我们更希望:能够一次性 返回一个this被永久绑定到obj的fireInGrobal函数,这样我们就不必每次调用fireInGrobal都要在尾巴上加上call那么麻烦了。
怎么办呢? 聪明的你一定能想到,在fireInGrobal.call(obj)外面包装一个函数不就可以了嘛!
var obj = { a: 1, // a是定义在对象obj中的属性 fire: function () { console.log(this.a) } } fn = obj.fire; var fireInGrobal = function () { fn.call(obj) //硬绑定 } fireInGrobal(); // 输出1
如果使用bind的话会更加简单
var fireInGrobal = function () { fn.call(obj) //硬绑定 }
可以简化为:
var fireInGrobal = fn.bind(obj);
call和bind的区别是:在绑定this到对象参数的同时:
1.call将立即执行该函数
2.bind不执行函数,只返回一个可供执行的函数
【其他】:至于apply,因为除了使用方法,它和call并没有太大差别,这里不加赘述
在这里,我把显式绑定和隐式绑定下,函数和“包含”函数的对象间的关系比作买房和租房的区别。
因为this的缘故
在隐式绑定下:函数和只是暂时住在“包含对象“的旅馆里面,可能过几天就又到另一家旅馆住了
在显式绑定下:函数将取得在“包含对象“里的永久居住权,一直都会”住在这里“
new绑定
【故事】 迪斯(this)组建了自己的家庭,并生下多个孩子(通过构造函数new了许多个对象)
执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象
function foo (a) { this.a = a; } var a1 = new foo (1); var a2 = new foo (2); var a3 = new foo (3); var a4 = new foo (4); console.log(a1.a); // 输出1 console.log(a2.a); // 输出2 console.log(a3.a); // 输出3 console.log(a4.a); // 输出4
【完】