浅谈JavaScript中this的指向
浅谈JavaScript中this的指向
浅谈JavaScript中this的指向
1.默认指向，this默认指向的是window对象
console.log(this);//打印的是window
2.函数调用时
2.1独立调用，this指向window对象
function test(){
console.log(this);//打印的是window
}
window.test();//简写test()
2.2函数作为某个对象的方法时，this指向的是当前对象
let obj = {
name:"test",
show:function(){
console.log(this);//这个打印出来的是window
}
}
let a = obj.show;//a就是function(){console.log(this);}
a();//window.a();
3.指向当前对象
let obj = {
name:'test',
age:19,
show:function(){
console.log(this);
}
}
obj.show();//打印出来的是Object
4.this指向绑定的元素，当函数作为一个事件处理函数的时候，这时this是指向绑定的元素
<body>
<button>点击</button>
</body>
<script>
document.querySelector("button").onclick=function(){
console.log(this);
}
</script>
5.改变this的指向
5.1 call()
let obj={
name:'hello',
age:19,
show:function(x,y){
console.log(this);//Object
console.log(this.name);//张三
console.log(this.age+x+y);//50
}
}
let obj2={
name:'张三',
age:30
}
obj.show.call(obj2,10,10);
5.2 aplly()
let obj={
name:'hello',
age:19,
show:function(x,y){
console.log(this);//Object
console.log(this.name);//张三
console.log(this.age+x+y);//60
}
}
let obj2={
name:'张三',
age:30
}
obj.show.apply(obj2,[10,20]);
es5中bind()
let obj={
name:'hello',
age:19,
show:function(x,y){
console.log(this);//Object
console.log(this.name);//张三
console.log(this.age+x+y);//60
}
}
let obj2={
name:'张三',
age:30
}
let test = obj.show.bind(obj2);
test(10,20);
6.箭头函数的this的指向，它的this指向始终是指向的外层作用域
由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值
let obj = {
name:"test",
show:()=>{
console.log(this);//打印出Window
}
}
obj.show();
版权声明：本文为Wardenclyffe原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。