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测验