关于this的总结

• 示例

  function foo () {
    console.log(this)
  }
  foo() //  => 全局对象
  foo.call(123) // => 123

  const obj1 = {
    foo: function () {
      console.log(this)
    }
  }

  obj1.foo() // => obj1
  const fn = boj1.foo
  fn()  // => 全局对象

  const obj2 = {
    foo: function () {
        console.log(this) // obj2
      function bar () {
        console.log(this)  // window
      }
      bar()
    } 
  }

  obj2.foo  // =>  window

this 指向 取决于调用，而非定义
调用指的是所在函数的调用

关于this的总结:

1. 沿着作用域向上找最近的一个 function (不是箭头函数)，看这个function 最终是怎么样执行的；

2. this 的指向取决于所属 function 的调用方式，而不是定义；

3. function 的调用一般分为以下几种情况：

   1. 作为函数调用，即： foo()

   2. 指向全局对象(globalThis)，注意严格模式问题（严格模式下是undefined）

   3. 作为方法调用，即：foo.bar() / foo.bar.baz() / foo[baz]

      1. 指向最终调用这个方法的对象

   4. 作为构造函数调用，即：new Foo()

      1. 指向一个新对象 Foo {}

   5. 特殊调用，即：foo.call() / foo.apply() / foo.bind()

      1. 参数指定成员

4. 找不到所属的的 function ,就是全局对象

面对对象和面对过程的区别

1. 面向过程代码简单粗暴，没有一些结构、设计在里面
2. 面对对象有很多类型、对象在里面

• 练习下

  var length = 10
  function fn () {
    console.log(this.length)
  }

  const obj = {
    length: 5,
    method (fn) {
      fn()
      arguments[0]()
    }
  }

  obj.method(fn, 1, 2)  // => 10 , 3

  答：10， 3
  原因：
    1. method中第一个形参是fn，调用方式是作为函数调用，this指向的全局，全局总有定义的length = 10，输出10
    2. arguments[0]() 指的是参数中第一个 也就是fn，arguments[0]() === fn，此时参照第二种方式，作为方法调用，指向的是调用这个方法的对象，即指向arguments，此时arguments的长度是3，所以输出3