js基础1-深入理解javascript之this

旧城等待， 2022-06-06 23:09 210阅读 0赞

感谢出处：http://blog.csdn.net/mevicky/article/details/46659273

备份下：

# [深入理解javascript之this][javascript_this] #

2015-06-27 10:08  2706人阅读 [评论][Link 1](0) 收藏 [举报][Link 2]

![category_icon.jpg][] 分类：

javascript*（44）* ![arrow_triangle_20_down.jpg][]

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录[(?)][Link 3][\[+\]][Link 3]

javascript中的this含义非常丰富，它可以是全局对象，当前对象或者是任意对象，这都取决于函数的调用方式。函数有以下几种调用方式：作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。

### 对象方法调用 ###

作为对象方法调用的时候，this会被绑定到该对象。

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var point = \{   
2.   x : 0,   
3.   y : 0,   
4.   moveTo : function(x, y) \{   
5.       this.x = this.x + x;   
6.       this.y = this.y + y;   
7.       \}   
8.   \};   
9.    
10.  point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.

这里我想强调一点内容，就是this是在函数执行的时候去获取对应的值，而不是函数定义时。即使是对象方法调用，如果该方法的函数属性以函数名的形式传入别的作用域，也会改变this的指向。我举一个例子：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var a = \{  
2.      aa : 0,  
3.      bb : 0,  
4.      fun : function(x,y)\{  
5.          this.aa = this.aa + x;  
6.          this.bb = this.bb + y;  
7.      \}  
8.  \};  
9.  var aa = 1;  
10. var b = \{  
11.     aa:0,  
12.     bb:0,  
13.     fun : function()\{return this.aa;\}  
14. \}     
15. a.fun(3,2);  
16. document.write(a.aa);//3，this指向对象本身  
17. document.write(b.fun());//0,this指向对象本身  
18. (function(aa)\{//注意传入的是函数，而不是函数执行的结果  
19.     var c = aa();  
20.     document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window  
21. \})(b.fun);

这样就明白了吧。这是一个容易混淆的地方。

### 函数调用 ###

函数也可以直接被调用，这个时候this被绑定到了全局对象。

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var x = 1;  
2.  　function test()\{  
3.  　　　this.x = 0;  
4.  　\}  
5.  　test();  
6.  　alert(x); //0

但这样就会出现一些问题，就是在函数内部定义的函数，其this也会指向全局，而和我们希望的恰恰相反。代码如下：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var point = \{   
2.   x : 0,   
3.   y : 0,   
4.   moveTo : function(x, y) \{   
5.       // 内部函数  
6.       var moveX = function(x) \{   
7.       this.x = x;//this 绑定到了全局  
8.      \};   
9.      // 内部函数  
10.     var moveY = function(y) \{   
11.     this.y = y;//this 绑定到了全局  
12.     \};   
13.   
14.     moveX(x);   
15.     moveY(y);   
16.     \}   
17.  \};   
18.  point.moveTo(1, 1);   
19.  point.x; //==>0   
20.  point.y; //==>0   
21.  x; //==>1   
22.  y; //==>1

我们会发现不但我们希望的移动呢效果没有完成，反而会多出两个全局变量。那么如何解决呢？只要要进入函数中的函数时将this保存到一个变量中，再运用该变量即可。代码如下：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var point = \{   
2.   x : 0,   
3.   y : 0,   
4.   moveTo : function(x, y) \{   
5.        var that = this;   
6.       // 内部函数  
7.       var moveX = function(x) \{   
8.       that.x = x;   
9.       \};   
10.      // 内部函数  
11.      var moveY = function(y) \{   
12.      that.y = y;   
13.      \}   
14.      moveX(x);   
15.      moveY(y);   
16.      \}   
17.  \};   
18.  point.moveTo(1, 1);   
19.  point.x; //==>1   
20.  point.y; //==>1

### 构造函数调用 ###

在javascript中自己创建构造函数时可以利用this来指向新创建的对象上。这样就可以避免函数中的this指向全局了。

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var x = 2;  
2.  　function test()\{  
3.  　　　this.x = 1;  
4.  　\}  
5.  　var o = new test();  
6.  　alert(x); //2

### apply或call调用 ###

这两个方法可以切换函数执行的上下文环境，也就是改变this绑定的对象。apply和call比较类似，区别在于传入参数时一个要求是数组，一个要求是分开传入。所以我们以apply为例：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  <pre name="code" class="html">var name = "window";  
2.        
3.  var someone = \{  
4.      name: "Bob",  
5.      showName: function()\{  
6.          alert(this.name);  
7.      \}  
8.  \};  
9.    
10. var other = \{  
11.     name: "Tom"  
12. \};     
13.    
14. someone.showName();     //Bob  
15. someone.showName.apply();    //window  
16. someone.showName.apply(other);    //Tom

可以看到，正常访问对象中方法时，this指向对象。使用了apply后，apply无参数时，this的当前对象是全局，apply有参数时，this的当前对象就是该参数。

### 箭头函数调用 ###

这里需要补充一点内容，就是在下一代javascript标准ES6中的箭头函数的 this始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var o = \{  
2.      x : 1,  
3.      func : function() \{ console.log(this.x) \},  
4.      test : function() \{  
5.          setTimeout(function() \{  
6.              this.func();  
7.          \}, 100);  
8.      \}  
9.  \};  
10.   
11. o.test(); // TypeError : this.func is not a function

上面的代码会出现错误，因为this的指向从o变为了全局。我们需要修改上面的代码如下：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var o = \{  
2.      x : 1,  
3.      func : function() \{ console.log(this.x) \},  
4.      test : function() \{  
5.          var \_this = this;  
6.          setTimeout(function() \{  
7.              \_this.func();   
8.          \}, 100);  
9.      \}  
10. \};  
11.   
12. o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var o = \{  
2.      x : 1,  
3.      func : function() \{ console.log(this.x) \},  
4.      test : function() \{  
5.          setTimeout(() => \{ this.func() \}, 100);  
6.      \}  
7.  \};  
8.    
9.  o.test();

这回this就指向o了，我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。

**\[html\]** [ view plain][Link 3] [ copy][Link 3]

1.  var x = 1,  
2.      o = \{  
3.          x : 10,  
4.          test : () => this.x  
5.      \};  
6.    
7.  o.test(); // 1  
8.  o.test.call(o); // 依然是1

这样就可以明白各种情况下this绑定对象的区别了。

[javascript_this]: http://blog.csdn.net/mevicky/article/details/46659273
[Link 1]: http://blog.csdn.net/mevicky/article/details/46659273#comments
[Link 2]: http://blog.csdn.net/mevicky/article/details/46659273#report
[category_icon.jpg]: /images/20220607/ea2b381f98c84b7abc1ca7f3c724d8b4.png
[arrow_triangle_20_down.jpg]: /images/20220607/19f86774d6484f1dbe52deb9647de457.png
[Link 3]: http://blog.csdn.net/mevicky/article/details/46659273#

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript之深入理解this

定义 this是函数运行时自动生成的内部对象，即调用函数的那个对象。（不一定很准确的定义，但还算通俗易懂）在大多数情况下，this的值由函数调用方式决定，它不能在执行期

ゝ一世哀愁。/ 2023年01月10日 10:29/ 0 赞/ 153 阅读

相关深入理解this

目录 1. 执行上下文（1）执行上下文概念（2）创建执行上下文 2.

雨点打透心脏的1/2处/ 2022年10月31日 10:48/ 0 赞/ 166 阅读

相关深入理解JavaScript中的this关键字

在JavaScript中this变量是一个令人难以摸清的关键字，this可谓是非常强大，充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有

傷城~/ 2022年08月26日 00:45/ 0 赞/ 206 阅读

相关深入理解javascript关键字this

[1. 一般用处][1.] [2. this.x 与 apply()、call()][2. this.x _ apply_call] [3. 无意义（诡异）的

迷南。/ 2022年07月16日 02:48/ 0 赞/ 227 阅读

相关 js基础2-深入理解javascript之typeof和instanceof

感谢出处：http://blog.csdn.net/mevicky/article/details/50353881 [深入理解javascript之typ

Dear 丶/ 2022年06月06日 23:10/ 0 赞/ 226 阅读

相关 js基础1-深入理解javascript之this

感谢出处：http://blog.csdn.net/mevicky/article/details/46659273 备份下： [深入理解javas

旧城等待，/ 2022年06月06日 23:09/ 0 赞/ 211 阅读

相关【JavaScript】深入理解JavaScript中的this

1，为什么要用this？来看一个例子： function identify() { return this.name.toUpperCase();

清疚/ 2022年05月12日 07:06/ 0 赞/ 328 阅读

相关 JavaScript中this的深入理解

一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 var obj = { foo: fun

刺骨的言语ヽ痛彻心扉/ 2022年02月26日 13:36/ 0 赞/ 299 阅读

相关 Javascript 基础篇二：javascript 的this理解

在理解javascript的this之前，首先先了解一下作用域。作用域分为两种： 1、词法作用域：引擎在当前作用域或者嵌套的子作用域查找具有名称标识符的变量。（引擎如何查

我不是女神ヾ/ 2022年02月21日 10:05/ 0 赞/ 226 阅读

相关 JS中this指向的深入理解

简述 this 是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用 this 的指向在函数

落日映苍穹つ/ 2021年09月29日 05:10/ 0 赞/ 446 阅读