javascript 浏览器中函数的 this 指向

野性酷女 2022-12-18 11:52 164阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>调用方法</th> 
   <th>function函数</th> 
   <th><a href="https://blog.csdn.net/SJ1551/article/details/109293034" rel="nofollow">箭头函数</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>全局中调用</td> 
   <td><code>this</code> 指向 <code>window</code> 对象</td> 
   <td><code>this</code> 指向 <code>window</code> 对象</td> 
  </tr> 
  <tr> 
   <td>函数作为对象的方法，使用对象在全局中调用函数</td> 
   <td><code>this</code> 指向调用方法的对象</td> 
   <td><code>this</code> 指向 <code>window</code> 对象</td> 
  </tr> 
  <tr> 
   <td>构造函数</td> 
   <td><code>this</code> 指向 <a href="https://blog.csdn.net/SJ1551/article/details/109596067" rel="nofollow"><code>new</code> 创建出的对象</a></td> 
   <td><font>箭头函数不能作为构造函数</font></td> 
  </tr> 
  <tr> 
   <td>bind, apply, call</td> 
   <td><code>this</code> 指向新绑定的对象</td> 
   <td><code>this</code> 保持原先的指向 (<font>箭头函数的this指向是固定的</font>)</td> 
  </tr> 
 </tbody> 
</table>

> 1.  上边是比较笼统的说法，针对于最简单的function或箭头函数。
> 2.  当函数是比较复杂的嵌套使用时，应该根据以下的方法进行具体判断。  
>     (1) **对于function函数**，this 是一个动态的概念，当它所在的函数被调用的时候才能确定，此时的 this 是它被调用时所处的对象环境。  
>     (2) **对于箭头函数**，this 则是在定义时便确定，得看函数被定义时所在的具体作用域。
> 3.  补充：[with语法中的this指向][with_this]

x = 1;
    var app = { 
      x: 0,
      fn1: function () { 
        console.log(this.x)
      },  // 0
      fn2: function () { 
        return function () { 
          console.log(this.x)
        }
      },  // 1
      fn3: function () { 
        x = 2;
        function fn() { 
          console.log(this.x)
        }
        return fn()
      },  // 2
      fn4: function () { 
        return { 
          x: 3,
          fn: function () { 
            console.log(this.x)
          }
        }
      },  // 3
      fn5: function () { 
        setTimeout(function () { 
          console.log(this.x)
        }, 10)
      },  // 1
      fn6: function () { 
        setTimeout(() => { 
          console.log(this.x)
        }, 20)
      },  // 0
      fn7: function () { 
        setTimeout(function () { 
          console.log(this.x)
        }.bind(this), 30)
      },  // 0
      fn8: () => { 
        setTimeout(() => { 
          console.log(this.x)
        }, 40)
      }
    }   // 1

[with_this]: https://blog.csdn.net/SJ1551/article/details/110083591#2_1