一: this指向的实例分析?

  1. // 下面的函数中this指向哪里 ?
  2. // 实例一: 
  3. function foo() {
  4.   console.log(this);
  5. }
  6. // 1: 作为函数调用
  7. foo(); // 指向全局变量: globalThis;
  9. // 2: 作为对象的方法调用
  10. const bar = { foo: foo };
  11. bar.foo(); // 指向调用这个方法的对象: bar
  13. // 3: 作为构造方法调用
  14. const f1 = new foo(); // 指向foo {}这个实例对象
  16. // 实例二: 
  17. const obj2 = {
  18.   foo: function() {
  19.     function bar() {
  20.       console.log(this)
  21.     }
  22.     bar()
  23.   }
  24. }
  25. obj2.foo(); // 指向全局变量: globalThis
  27. // 实例三: 
  28. const obj3 = {
  29.   foo: () => {
  30.     console.log(this)
  31.   }
  32. }
  33. obj3.foo(); // 指向全局变量: globalThis

二: this指向总结

先一句话总结: 看this的最近一个函数(不是箭头函数)是怎么调用的

1: 沿着作用域向上找最近的一个function(不是箭头函数), 看这个function最终是怎么执行的.
2: this的指向取决于所属function的调用方式,而不是定义.

function调用分为以下5种方式:

  1. 作为函数调用, eg: foo(), 指向全局(globalThis).
  2. 作为方法调用, eg: bar.foo(), 指向最终调用这个方法的对象.
  3. 作为构造函数调用, eg: new Person(), 指向一个新的对象 Person { }.
  4. 特殊调用, foo.call(), foo.apply(), foo.bind().
  5. 如果找不到所属的function, this就指向全局对象.