关于javascript的this指向的一些探索

最新推荐文章于 2025-04-29 12:55:44 发布

原创最新推荐文章于 2025-04-29 12:55:44 发布 · 165 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#this #this指向 #Javascript的this指向

本文深入解析JavaScript中this关键字的不同应用场景，包括全局作用域、构造函数、原型链继承等情况下的指向规则，并通过具体示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.this指向全局对象

function test(){
               this.x=3;
           }
           test();
           console.log(x) //打印出3

2.this指向构造函数new出来的实例内部

var x=8;
function test(){
this.x=90;
console.log(this.x)
}
new test(); //打印出90,

3.this指向上一级对象

var o={};
o.x=990;
var x=888;
o.test=function(){
console.log(this.x)
}
o.test() //打印出990

4.this可以通过apply方法改变this的指向

var x=666;
var o={};
o.x=1;
o.test=function(){
console.log(this.x);
}
o.test();//打印出1,指向了上一级
o.test.apply();//打印出666,指向了全局对象
o.test.apply(o);//打印出1,指向上一级

5.关于构造函数的this指向问题，原则就近原则,没有就沿着原型链往上找

① function Test(){
   this.a=66;
   this.b=55;
   this.show=function(){
       console.log(this.a,this.b);
   }
}
function Big(){
   this.a=125;
   this.b=2;
   this.add=function(){
       console.log(this.a,this.b);
   }
}

//通过这个实现构造函数Test继承Big
Test.prototype=new Big();
var x=new Test();
x.show();//打印出66,55

② function Test(){
   this.show=function(){
       console.log(this.a,this.b);
   }
}
function Big(){
   this.a=125;
   this.b=2;
   this.add=function(){
       console.log(this.a,this.b);
   }
}

//通过这个实现构造函数Test继承Big
Test.prototype=new Big();
var x=new Test();
x.show();//打印出125,2

③ function Test(){

  this.a=6587;
   this.show=function(){
       console.log(this.a,this.b);
   }
}
function Big(){
   this.a=125;
   this.b=2;
   this.add=function(){
       console.log(this.a,this.b);
   }
}

//通过这个实现构造函数Test继承Big
Test.prototype=new Big();
var x=new Test();
x.show();//打印出6587,2

④ function Test(){
   this.a=6587;
   this.show=function(){
       console.log(this.a,this.b);
   }
}
function Big(){
   this.a=125;
   this.b=2;
   this.add=function(){
       console.log(this.a,this.b);
   }
}
Test.prototype=new Big();
var x=new Test();
x.add();//打印出6587,2

⑤function Test(){
   this.a=6587;
   this.show=function(){
       console.log(this.a,this.b);
   }
}
function Big(){
   this.a=125;
   this.b=2;
   this.add=function(){
       console.log(this.a,this.b);
   }
}
Test.prototype=new Big();
var x=new Test();

//在这里对实例重新赋值的情况

x .a=54321
x.add();//打印出54321,2

博主经验总结得出下图：