一、this的作用
this表示对当前对象的引用,在js中 this 不是固定不变的,它会随着执行环境的改变而改变。
二、this的指向
1.在方法中(function函数),this 表示该方法所属的对象。
<script type="text/javascript">
let box=document.querySelector(".box");
box.onclick=function(){
console.log(this);
//将会打印指向的box;
}
</script>
2.如果单独使用,this 表示全局对象。
<script type="text/javascript">
console.log(this);
//将会打印Window;
</script>
在箭头函数中,this 表示全局对象
<script type="text/javascript">
let a=()=>{
console.log(this);
}
a();
</script>
4.在setTimeout()中,this 表示全局对象
<script type="text/javascript">
let obj={
a:setTimeout(function(){
console.log(this);
},),
b:"岑子" ,
c:"18"
}
console.log(obj);
//obj中的a会等于setTimeout的触发次数
</script>
三.this的方法
1.call(接收的对象,参数1,参数2…)
<script type="text/javascript">
let obj={
a:function(x,y){
console.log(this);
console.log(x);
console.log(y);
}
}
let b={
x:"橙子",
y: 18
};
obj.a.call(b,"迷迭","蔷薇");
</script>
2.apply(接收的对象,[参数1,参数2…])
<script type="text/javascript">
let obj={
a:function(x,y){
console.log(this);
console.log(x);
console.log(y);
}
}
let b={
x:"橙子",
y: 18
};
obj.a.apply(b,"迷迭","蔷薇");
</script>
3.bind(接收的对象,参数1,参数2,[参数3,参数4…])()
<script type="text/javascript">
let obj={
a:function(x,y){
console.log(this);
console.log(x);
console.log(y);
}
}
let b={
x:"橙子",
y: 18
};
obj.a.bind(b,"迷迭",["蔷薇"])();
</script>
4.call,bind,apply的区别
1.applay、call、bind他们三个都能改变函数this的指向问题;
2.applay、call这两个方法的主动调用,bind返回的是改变this指向后的
新函数;
3.传参的问题区别,call和bind都是直接传递参数,applay传递的是数组