修改this的指向 实现方法
改变this指向的方法 call、apply、bind、箭头函数
call apply bind 的区别
共同点：
call apply bind 箭头函数 都可以改变this的指向 （箭头函数也可以改变this的指向 因为箭头函数没有this指向 他的this和它的外层作用域保持一致）
区别：
1.call和apply的第一个参数都可以调用函数 ，方法内的第一个参数都可以修 改this的指向 而bind不可以调用函数（call apply this指向改变后 调用一次后就不再改变this的指向了 ）
2.call除了第一个参数其他参数也可以作为实参传递给函数 而apply只有两个参数 第二个参数是数组，数组的每一项可以作为实参传递给函数（call this指向改变后 调用一次后就不再改变this的指向了 ）
3.bind不可以调用函数 它会创建一个副本函数 并且绑定新的函数 this指向bind返回的新函数 （bind this改变 一次终身可用）
<body>
<script>
// 函数名.call(第一个参数,参数二，参数三)
// 作用立即执行函数
// 第一个参数可以改变this的指向
const obj = {
name: "zs",
age: 7,
};
function fun(a, b) {
console.log(this); //原本普通函数this指向window 修改this的指向后 指向call的第一个参数obj {name: 'zs', age: 7}
console.log(a + b);
}
fun.call(obj, 1, 4); //call除了第一个参数其他参数也可以作为实参传递给函数
</script>
</body>
<body>
<script>
const obj = {
name: "zs",
age: 7,
};
function fun(a, b) {
console.log(this); //原本this指向window apply第一个参数修改this指向后现在指向obj{name: 'zs', age: 7}obj
console.log(a + b); //3
}
// apply(第一个参数可以改变this指向，第二个参数必须是数组)
//可以立即调用函数 第一个参数可以改变this指向，第二个参数必须是数组
fun.apply(obj, [1, 2]);
// 举例
let arr = [1, 5, 8, 9];
// console.log(Math.max(...arr));
console.log(Math.max.apply(null, arr)); //apply只有两个参数 第二个参数是数组，数组的每一项可以作为实参传递给函数
console.log(Math.max.apply(Math, arr));
</script>
</body>
<body>
<button>发送短信</button>
<script>
const obj = {
name: "zs",
age: 7,
};
function fun(a, b) {
console.log(this); //原本this指向windowbind返回值是改变this之后的函数obj
console.log(a + b); //5
}
const fn = fun.bind(obj, 1, 4, 6); //返回值是改变this之后的函数
fn();
// bind 不会立即调用函数
// 返回值是改变this之后的函数
// 需求：点击按钮 过两秒后才能点击
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
// 立即不让点击
this.disabled = true;
console.log(1);
// 定时器两秒后可以点击
// 方法1
// setTimeout(function () {
// btn.disabled = false;
// }, 2000);
// 方法2y=优化成箭头函数
// setTimeout(() => {
// this.disabled = false;
// }, 2000);
// 方法3
setTimeout(
function () {
this.disabled = false;
}.bind(btn),
2000
);
});
</script>
</body>
