526互联

JavaScript|This指向

发布时间 2023-07-21 11:39:09作者: Weltㅤ

1 普通函数

普通函数中的this指向window

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 函数普通中 this指向window
      function foo() {
        console.log(this)
      }
      foo()
      // this的指向是在函数调用时确定的

      // 函数是由对象调用的, 函数中的this指向调用它的对象
      // 对于全局函数是由window对象调用的
      // window.foo()
    </script>
  </body>
</html>

2 构造函数

构造函数中的this指向实例对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function Person() {
        // 构造函数中this指向创建的实例对象
      }
      var p = new Person()
    </script>
  </body>
</html>

3 对象的方法

对象的方法中的this指向对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = {
        sayHi() {
          console.log(this)
        },
      }
      obj.sayHi()
    </script>
  </body>
</html>

4 事件回调

事件回调中的this指向触发事件的对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1111</div>
    <script>
      const div = document.querySelector('div')
      div.addEventListener('click', function () {
        // 事件的回调用, 由对应dom对象调用的
        console.log(this)
      })
    </script>
  </body>
</html>

5 定时器

定时器中的this指向window

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象
      window.setTimeout(function () {
        console.log(this)
      }, 1000)
    </script>
  </body>
</html>

6 箭头函数

箭头函数不绑定this, 和定义时作用域中的this一致

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const fn = () => {
        console.log(this)
      }
      fn()

      const obj = {
        name: 'xiaoming',
      }
      // call()调用函数, 同时改变this的指向
      function foo() {
        // 在foo作用域中, this指向obj的
        console.log(this)
        const bar = () => {
          console.log(this)
        }
        bar()
      }
      foo.call(obj)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const fn = () => {
        console.log(this)
      }
      fn()

      const obj = {
        name: 'xiaoming',
      }
      // call()调用函数, 同时改变this的指向
      function foo() {
        // 在foo作用域中, this指向obj的
        console.log(this)
        const bar = () => {
          console.log(this)
        }
        bar()
      }
      foo.call(obj)
    </script>
  </body>
</html>

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击</button>
    <script>
      document.querySelector('button').addEventListener('click', function () {
        // 在事件回调中, this指向button的dom对象
        console.log(this)
        setTimeout(() => {
          // 在定时的普通回调中, this指向window
          // 在定时的箭头回调中, this指向外部(定义时)的this, 也就是dom
          this.innerHTML = '点击了'
        }, 1000)
      })
      // 在回调函数定义时, 尽量使用箭头函数
    </script>
  </body>
</html>