call,apply,bind三个方法都用来处理函数内部this指向的问题
call:会自动调用函数,并且改变this指向
// call:函数的方法,作用,改变this指向
// 普通函数
function fn (a, b) {
console.log(this, a, b);// this指向window[window调用的这个函数]
}
// fn();
var obj = {name : '张三丰', age : 22};
// 改变this指向
//obj undefined undefined
fn.call(obj);
// obj 111 222
fn.call(obj, 111, 222);
结果示例:
apply:会自动调用函数,但是传参必须数组形式
简单示例:
function fn (a, b, c) {
console.log( this, a, b, c );
}
var o = {name : '刘德华', age : 23};
// 改变this
fn.apply(o, [111, 222, 333]);
数组中求最大值:
var arr = [123,456,23,44,66,99];
// var n = Math.max(123,456,657,657,2345,456,345,234,345);
// console.log( n );
var n = Math.max.apply(null, arr);
console.log( n );
bind:不会自动调用函数,只能手动执行函数,传参与call一致
简单示例:
function fn (a, b,) {
console.log(this, a, b);
}
var o = {name : '阿飞', age : 22};
var newFn = fn.bind(o, 111, 222);//使用bind不会立即执行,需要手动调用
newFn();
定时器示例:
点击禁用按钮,3s后通过bind将定时器的this指向(window)改为btn(按钮),所以3s后按钮恢复启用状态
var btn = document.querySelector('input');
btn.onclick = function () {
// 点击吧按钮禁用
this.disabled = true;
// 启动延迟性定时器
window.setTimeout(function () {
this.disabled = false;
// call,apply,bind
}.bind(this), 3000);
}
call,apply,bind在传参和调用上有所不同