1、call函数
call函数可以改变具体如下
定义一个对象:
var a={
name:'我是你爸爸'
}
定义一个普通方法
function b(){
// alert(this)
console.log(this)//普通函数中的this指向的是windown
}
调用b函数,查看控制台打印,指向的是windown对象
b();
改变this的指向:
b.call(a);
可以看到this的指向发生了改变
2、apply()函数
该函数跟call函数差不多,只不过可以传递第二个参数进去,第二个参数必须是一个数组
var arr=[1,2,3,55,30];
let result=Math.max.apply(Math,arr);
console.log(result)
2、bind()函数
bind()方法不会调用自身函数,但是自身拷贝了一份,可以用var接收,也可以改变this指向
var a={
name:'我是你爸爸'
}
function b(){
// alert(this)
console.log(this)
}
var result=b.bind(a);//返回一个拷贝后的函数,这里不会自动打印,apply(),call()会自动打印。
result();//调用result函数(拷贝的,已经通过bind将windown(普通方法this默认指向windown)指向了a对象)
使用一个小案列理解this的指向:
点击按钮是按钮禁用,定义定时器,使按钮三秒钟后取消禁用,恢复可以点击
<button>点击</button>//定义按钮
<script>
var btn=document.querySelector("button");//获取到按钮
btn.onclick=function(){//绑定点击事件
this.disabled=true;//此时的this指向调用者的本身,也就是btn, this.disabled=true;表示这个按钮被禁用,也就被灰色不可以点击
setTimeout(function(){//定义一个定时器
this.disabled=false;//此时的this指向的定时器自身,所以这样写是不会使btn在三秒钟后恢复
}.bind(this),3000)//重点:定时器的花括号外使用 .bind(this)就可以使this指向会btn,三秒钟后即可恢复按钮
}
</script>