根据三种方法不同的特性,我们可以灵活的应用 相关链接:call ,apply,bind区别
- call 常用来继承,因为ES6之前没有extends,用构造函数来模拟继承
这里里面的Son通过改变Father构造函数this指向问题,来获取Father里面的属性,实现继承的效果,Son还可以添加自己的额 外属性sex
function Father(name, age) {
this.name = name;
this.age = age;
}
function Son(name, age, sex) {
Father.call(this, name, age);
this.sex = '男';
}
var son = new Son('李白', 99);
console.log(son);
2,apply 常用于与数组有关的操作,因为传递的参数是数组
这里将arr数组传递过去,来达到找到数组最大值的方法,传递过去的arr不再是以数组的形式,而是数字类型,再通过Math 对象里面的max方法巧妙的获取数组最大值
var arr = [-12, 0, 3, -6];
var num = Math.max.apply(Math, arr);
console.log(num);
3, bind不会调用函数,要自己用函数就收才能调用
下面实现一个按钮点击后变为不可选,倒计时3秒后恢复可选状态,其中bind函数在计时器外,他的this指向的是触发点击事 件的button,然后利用bind,让倒计时函数里面的this指向的button,而且不会立即执行(用call就会立即执行改变this指向后的函 数,倒计时效果将不存在)
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
this.disabled = true;
var num = 3;
btn.innerHTML = num;
var timer = setInterval(function() {
num--;
btn.innerHTML = num;
if (num == 0) {
this.disabled = false;
this.innerHTML = '点击';
clearInterval(timer);
}
}.bind(this), 1000)
})