js this的理解 (包含箭头函数)

89 阅读1分钟

自己对this的理解

  1. 普通函数function 谁调用 this 指向谁 可以通过call apply bind 改变this指向
  2. 箭头函数this 始终指向是定义它所在的父级 不能通过call apply bind 改变this指向
  3. 自执行函数this 指向window

根据上面这几句话 来试试下面的题

    <script>
      var name = 'window'

      var person1 = {
        name: 'person1',
        foo1: function () {
          console.log(this.name)
        },
        foo2: () => console.log(this.name),
        foo3: function () {
          return function () {
            console.log(this.name)
          }
        },
        foo4: function () {
          return () => {
            console.log(this.name)
          }
        },
      }

      var person2 = { name: 'person2' }

      // 开始题目:
      person1.foo1()
      person1.foo1.call(person2)

      person1.foo2()
      person1.foo2.call(person2)

      person1.foo3()()
      person1.foo3.call(person2)()
      person1.foo3().call(person2)

      person1.foo4()()
      person1.foo4.call(person2)()
      person1.foo4().call(person2)
      
      答案依次为 :

        person1

        person2

        window

        window

        window

        window

        person2

        person1

        person2

        person1
    </script>

各位大佬 觉得有问题可指正 一起探讨