Javascript 中的this 指向的对象,你搞清楚了吗?

时间:2023-03-09 04:48:15
Javascript 中的this 指向的对象,你搞清楚了吗?

Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗?

注:以下Javascript运行环境中为浏览器

//1 this在全局函数中使用

var x = 1;

function test1() {

var  x = 5;

alert(this.x);

}

function _test2() {

this.x = 5;

alert(this.x);

}

//2 this 在构造函数中 new 中使用

function test2() {

var f = new _test2();

}

//3 this 在 对象的方法中使用

function _test3() {

alert(this.x)

}

function test3() {

var a = {};

a.x = 100;

a.show = _test3;

a.show();

}

搞清楚this指向的关键是:

函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

  1. test1的调用的场景:相当于window.test1(),alert 显示调用函数的x,也就是window.x的值
  2. test2的调用的场景:new 关键字时,生成新对象,this指向的对象就是新生成的对象 _test2()。
  3. test3 的调用的场景:函数作为某个对象的方法调用,这时this就指这个上级对象,也就是a