this的口诀:this指向调用该函数的对象。
call,apply,bind就是为了改变函数里面this的指向而存在的
1. call方法
-
语法 :任意函数.call(任意对象,参数1,参数2…)
-
特征:call能调用函数,后面可传入多个参数,用逗号隔开
3.价值:任意对象 都能调用 任意函数(功能)function fn(a, b) { alert('函数被调用了'); var res = a + b; this.abc = res; } var obj2 = { name: '小明', age: 19 }; fn.call(obj2, '你好', 6);
这样就能为obj2新增一个属性abc,值为“你好6”。原因是使用call改变了call的this指向,fn.call(obj2, ‘你好’, 6) 中通过call把调用函数fn的对象设置为obj2,故函数内为this添加属性即为this指向的obj2添加属性abc。
2.apply方法
-
价值和call一样,语法略微不同
-
语法 :任意函数.call(任意对象,[参数1,参数2…]),只允许传递两个参数,第二个参数为数组
/** apply * 第一个参数 表示调用的对象, * 第二个参数 借用时候传递的数据(数组) **/ var arr = [11, 22, 33, 44, 55, -99]; var obj={} var min = Math.min.apply(arr, arr); var min1 = Math.min.apply(obj, arr);
此处借用Math的内置方法,第一个参数对于我们的运算没有影响,min和min1是相等的。但是如果要在函数内部使用this进行运算的话,第一个参数则需要多加考虑。
3.bind方法
var box = document.querySelector('#box');
var num = 0;
box.onclick = function () {
console.log(this); // box
this.timer = window.setInterval(function () {
num += 10;
this.style.left = num + 'px';
/* .bind(this) 把定时器回调函数内部的 this 指向改变了 */
}.bind(this), 24);
}
上面代码,通过bind改变了函数内部的this指向,达到了 (定时器外:var that=this;定时期器内:that.style.left=num+‘px’)的效果