JavaScript 中 this 用法-优快云博客

本文详细解析了JavaScript中this关键字的六种使用场景及其指向规则，包括纯函数、对象方法调用、构造函数、内部函数、call/apply及事件绑定。

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

this一般使用的情况如下：

1. 纯函数

2. 对象方法调用

3. 使用new调用构造函数

4. 内部函数

5. 使用call / apply

6. 事件绑定

1.纯函数

1. var name = 'this is window'; //定义window的name属性

2. function getName(){

3. console.log(this); //控制台输出: Window //this指向的是全局对象--window对象

4. console.log(this.name); //控制台输出: this is window /

5. }

6. getName();

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

1. var name = 'this is window'; //定义window的name属性,看this.name是否会调用到

2. var testObj = {

3. name:'this is testObj',

4. getName:function(){

5. console.log(this); //控制台输出:testObj //this指向的是testObj对象

6. console.log(this.name); //控制台输出: this is testObj

7. }

8. }

9. testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3. 使用new调用构造函数

1. function getObj(){

2. console.log(this); //控制台输出: getObj{} //this指向的新创建的getObj对象

3. }

4. new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4.内部函数/内部嵌套函数

1. var name = "this is window"; //定义window的name属性,看this.name是否会调用到

2. var testObj = {

3. name : "this is testObj",

4. getName:function(){

5. //var self = this; //临时保存this对象

6. var handle = function(){

7. console.log(this); //控制台输出: Window //this指向的是全局对象--window对象

8. console.log(this.name); //控制台输出: this is window

9. //console.log(self); //这样可以获取到的this即指向testObj对象

10. }

11. handle();

12. }

13. }

14. testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

varo={m:function(){

var self=this;

console.log(this===o); //true,对象方法调用，this指向调用该方法的对象

f();

function f(){ //定义一个嵌套函数

console.log(this===o); //false ，嵌套函数不会继承调用它的外函数的this

console.log(self===o); //true

}

}};

o.m();

5. 使用call / apply

1. var name = 'this is window'; //定义window的name属性,看this.name是否会调用到

2. var testObj1 = {

3. name : 'this is testObj1',

4. getName:function(){

5. console.log(this); //控制台输出: testObj2 //this指向的是testObj2对象

6. console.log(this.name); //控制台输出: this is testObj2

7. }

8. }

10. var testObj2 = {

11. name: 'this is testObj2'

12. }

13.

14. testObj1.getName.apply(testObj2);

15. testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：

[1] call( thisArg[，arg1，arg2，… ] ); // 第2个参数使用参数列表：arg1，arg2，...

[2] apply(thisArg[，argArray] ); //第2个参数使用参数数组：argArray

运行结果分析：使用call / apply 的函数里面的this指向绑定的对象。

6. 事件绑定

事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

1. //页面Element上进行绑定

2. <script type="text/javascript">

3. function btClick(){

4. console.log(this); //控制台输出: Window //this指向的是全局对象--window对象

5. }

6. </script>

7. <body>

8. <button id="btn"onclick="btClick();" >点击</button>

9. </body>

10. //js中绑定方式（1）

11. <body>

12. <button id="btn">点击</button>

13. </body>

14. <script type="text/javascript">

15. function btClick(){

16. console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象

17. }

18.

19. document.getElementById("btn").onclick= btClick;

20. document.getElementById("btn").onclick(); //默认点击

21. </script>

22.

23. //js中绑定方式（2）

24. <body>

25. <button id="btn">点击</button>

26. </body>

27. <script type="text/javascript">

28. document.getElementById("btn").onclick =function(){

29. console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象

30. }

31. document.getElementById("btn").onclick();

32. </script>

33.

34. //js中绑定方式（3）

35. <body>

36. <button id="btn">点击</button>

37. </body>

38. <script type="text/javascript">

39. function btClick(){

40. console.log(this);

41. }

42.

43. document.getElementById("btn").addEventListener('click',btClick);//控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。

44. document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制台输出: Window //this指向的是全局对象--window对象

45. </script>

运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法（this指向的是全局对象）外，this指向的是绑定事件的Elment元素。