js属性方法里面的函数this指向

Question

<div style="width: 100px; height: 100px; background:#ccc;" onclick="obj.a()"></div>
  <div style="width: 100px; height: 100px; background:#ccc;" onclick="a()"></div>

<script>
  let obj = {
    a(){
      alert(this)
      function b(){
        alert(this)
      }
      b()
    },
  }

  function a(){
    alert(this)
    function b(){
      alert(this)
    }
    b()
  }
</script>

为什么调用属性方法的时候 a里面的b函数this指向了window，而调用函数的时候a和b都指向window

Answer 1

函数体内的this。由是谁调用的来决定~

---

let obj = {
    a(){
      alert(this)
      function b(){
        alert(this)
      }
      b()
    },
}

• 执行obj.a()时,a由obj调用，所以obj.a里面的this为obj
• 而b 里面的this，当执行obj.a()执行时，函数体提升，执行b()，相当于window.b()，所以b中this为window。另：由于函数b中无闭包，执行完即释放。
• 若b 函数为 箭头函数，则会继承外层函数a的this, 此时b中this会为a

---

function a(){
    alert(this)
    function b(){
        alert(this)
    }
    b()
}

• 若执行上述函数方法a() 相当于window.a()，同理。
• 可以把函数复制在浏览器console控制台，然后输入window.a测验

Answer 2

指向哪里，看调用的时候，如果是 o.b()，一般指向 o，如果是 b()（没有 . 调用），指向全局对象（strict 模式下是 undefined）

来来，这篇文章看一下：JavaScript 的 this 指向问题深度解析

Answer 3

a()的this是a()，b的this是b()。

如果要在b()里使用外层a()的this，应该这样：

let obj = {
    a(){
    let that = this  <---- 这里
      alert(this)
      function b(){
        alert(that) <!---- 这里
      }
      b()
    },
  }

Answer 4

可以简单理解 this 为调用函数的对象

Answer 5

this变量取值取决于函数被调用的方式。还是先扫盲吧