您的位置:首页 > 移动开发

js三种改变this指向的方法call、apply、bind及区别

2020-07-09 00:50 525 查看
call()方法

1、第一个作用可以调用函数,第二个可以改变函数内this的指向
2、call 主要作用可以实现继承

var o = {
name: "andy"
}

function fn(a, b) {
console.log(this); //指向 对象o
console.log(a + b);

};
fn.call(o, 1, 2);

实现子类对父类的继承

function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}

function Son(uname, age, sex) {
Father.call(this, uname, age, sex) //父类构造函数调用了子类的this

}
var son = new Son("刘德华", 18, "男");
console.log(son);
apply()方法

1、第一个作用可以调用函数,第二个可以改变函数内this指向
2、第二个参数必须是数组

比如可以利用apply方法借助于数学内置对象求数组最大值

var arr = [1, 66, 22, 10];
var arr1 = ["red", "pink"];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
bind()方法

1、不会调用原来的函数,可以改变this指向
2、返回的是原函数改变this之后产生的函数
3、如果有的函数我们不需要立即调用
4、当我们击了之后,就禁用这个按钮,3秒之后再开启

var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000) //bind 里面的this指向的是btn
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: