call、apply、bind的使用,改变this指向的三种方式
call
- 改变this的指向,通过第一个参数.
- 调用函数,可以传递参数,和普通调用一样,参数从第二个开始,第一个默认认为是修改this指向的那个对象。
- 实现继承
function Father(x, y) {
this.x = x;
this.y = y;
}
function Sun(x, y) {
Father.call(this, x, y);
}
var sun = new Sun(1, 2);
console.log(sun);
apply
- 改变this指向
- 调用方法,同call,区别在于参数必须是数组
function fn(arr) {
console.log(this);
console.log(arr);
}
var obj = {
name: "red"
}
fn.apply(obj, ["Lisa"]);
- 应用:求数组中的最大最小值
var arr = [12, 34, 22, 1, 90];
console.log(Math.max.apply(Math, arr));
console.log(Math.min.apply(Math, arr));
bind
- 改变this指向,返回原函数的拷贝,不会调用原函数。
function fn(name) {
console.log(this);
console.log(name);
}
var obj = {
name: "red"
}
var newfn = fn.bind(obj, "lisa");
newfn();
- 应用:不想调用函数又想改变原函数内部this的指向。例如:有一组按钮,在点击之后需要被禁用,2秒之后恢复。
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
this.disabled = true;
var that = this;
setTimeout(function() {
that.disabled = false;
}, 2000);
});
}
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
});
}
小结
- 共同点:都能改变this指向
- 不同点:
- call和apply会调用函数,bind不会
- apply传递的参数必须是数组,call和apply的参数为arg1,arg2…
- 应用场景
- call多用于继承。
- apply经常用于与数组有关的。
- bind用于不调用函数,但是需要改变this指向的时候。