call apply bind 改变this指向的三种方式的异同
改变this指向三种方法
1,call方法
//1,call()
let o = {
name: red,
}
function fn(a, b) {
console.log(this);
console.log(a + b);
}
fn.call(o, 1, 2) //调用函数,改变this指向, 最前面的参数是改变的this指向,后面的是传递参数
//call的主要作用可以实现继承
function Father(uname, sex, age) {
this.uname = uname;
this.sex = sex;
this.age = age;
}
function Son(uname, sex, age) {
Father.call(this, uname, sex, age) //this修改为指向Son
}
let son = new Son(张三, 男, 12)
console.log(son);
2,apply方法
//2,apply
let o = {
name: red,
}
function fn(arr) {
console.log(this);
console.log(arr);
}
fn.apply(o, [1234]);
//1,第二个参数必须是数组
//2,但是打印出来的是字符串
//3,apply的主要应用 利用apply借助数学内置对象求最大值
// Math.max();
let arr = [1, 42, 5212, 43, 5634, 332, 329];
let max = Math.max.apply(Math, arr);
console.log(max);
function num(arr, flag) {
return flag ? Math.max.apply(Math, arr) : Math.min.apply(Math, arr);
}
console.log(num([1, 4, 6, 3, 2], true));
3.bind方法(不调用)
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
let btns = document.querySelectorAll(button);
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true;
setTimeout(function () {
this.disabled = false;
}.bind(this), 2000) //仅仅改变了this的指向而不调用函数
}
}
</script>
</body>
三者异同总结:
共同点:都能改变this的指向, 不同点: call 和 apply 会调用函数, 并且改变函数内部this指向. call 和 apply传递的参数不一样, call传递参数使用逗号隔开, apply使用数组传递 bind 不会调用函数, 可以改变函数内部this指向.
应用场景 call 经常做继承. apply经常跟数组有关系.比如借助于数学对象实现数组最大值最小值 bind 不调用函数, 但是还想改变this指向.比如改变定时器内部的this指向.
