this指向问题

最新推荐文章于 2025-07-21 15:15:00 发布

weixin_33909059

最新推荐文章于 2025-07-21 15:15:00 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cad8e81e51d456e3a5f07d0

本文深入探讨了JavaScript中this关键字的指向规则，包括直接调用函数、作为对象属性调用、在构造函数中使用以及在setTimeout和setInterval中的特殊行为。文章还提供了多种解决this指向问题的方法，如变量保存、箭头函数和bind()绑定。

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

this指向谁？

this永远指向最终调用的函数所在的对象

① this指向的，永远只可能是对象！

② this指向谁，永远不取决于this写在哪！而是取决于函数在哪调用。

③ this指向的对象，我们称之为函数的上下文context，也叫函数的调用者。

1. 当直接调用函数时，this指向window

  function Obj () {
    console.log(this)
  }
  Obj() // window
复制代码

2. 函数为对象属性时，this指向该对象

  function Obj () {
    console.log(this)
  } 
  let obj = {
    name: 'hello',
    where: Obj
  }
  obj.where() // {name: "hello", where: ƒ}
复制代码

3. 构造函数中，this指向实例化对象

  function Obj () {
    console.log(this)
  }  
  let obj = new Obj() // Obj{}
复制代码

4. 在setTimeout和setInterval，this永远指向window

  function Obj () {
    setTimeout(function () {
  	  console.log(this)
    }, 100)
  } 
  let obj = {
    name: 'hello',
    where: Obj
  }
  obj.where() // window
复制代码

为何在setTimeout和setInterval中this永远指向window呢？下面专门了解一下

setTimeout和setInterval中this指向问题

由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined

  function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function() {
        console.log(this)
      },100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // Obj{}
  obj.checkThisLast() // window
复制代码

如何解决setTimeout和setInterval中this的指向问题呢？

变量保存this

  function Obj () {
    let self = this, // this绑定给一个变量
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function() {
        console.log(self)
      },100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // Obj{}
  obj.checkThisLast() // Obj{}
复制代码

箭头函数

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

指向定义时所在的作用域，而不是指向运行时所在的作用域。

  function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(() => {
        console.log(this)
      },100)
    }
  }
  let obj = new Obj() 
  obj.checkThis() // obj{}
  obj.checkThisLast() // obj{}
复制代码

bind()绑定

bind()用法是将函数绑定到对象上，会创建新的函数，函数体内的this值会被绑定到传入bind()的首个参数；f.bind(obj)相当于obj.f()，则f()的this指向obj

call(),apply()可以实现同样this绑定，但call()、apply()调用后立即执行，apply()需要接收数组参数

  function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function () {
        console.log(this)
      }.bind(this),100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // obj{}
  obj.checkThisLast() // obj{}
复制代码

转载于:https://juejin.im/post/5cad8e81e51d456e3a5f07d0