JS中this到底该指向谁

---

theme: vue-pro highlight: androidstudio

结论

this的指向，根据调用函数时的执行上下文动态确定

具体分析

简单调用函数

在执行函数时，this被上一级对象调用，this就指向该对象，否则就是全局对象

function fn() {
    console.log(this);
}
fn()

const obj = {
    age: 10,
    fn() {
        console.log(this);
        console.log(this.age);
    }
 }
obj.fn() 
const f1 = obj.fn;
f1(); // 此时调用为：windows.f1()

上下文对象this

1. 一般情况

   const obj = {
     name: "li",
     fn() {
       return this;
     }
   }
   console.log(obj.fn() === obj); // true

2. 嵌套关系

this指向最后调用它的那个对象

const father = {
   name: "John",
   son: {
       name: "zs",
       fn() {
         return this.name;
       }
     }
   }
console.log(father.son.fn())

3. 对象之间相互使用

 const obj1 = {
     val: '一号对象',
     fn() {
       return this.val;
     }
   }
   const obj2 = {
     val: '二号对象',
     fn() {
       return obj1.fn();
     }
   }
   const obj3 = {
     val: '三号对象',
     fn() {
       let fn = obj1.fn;
       return fn();
     }
   }
   // "一号对象"：直接寻找
   console.log(obj1.fn());
  // "一号对象"：找到obj2中的fn执行--->返回obj1.fn()--->找到obj1中的fn，返回this时，此时执行的上下文对象为obj1
   console.log(obj2.fn());
   // undefined: 找到obj3中fn执行--->让fn引用obj1.fn--->调用时fn()实际为windows.fn()，执行上下文对象为window，所以为undefined
   console.log(obj3.fn());

bind/call/apply

绑定到哪里，this就指向哪里

构造函数

this指向声明的实例对象

function Person() {
    this.name = 'ls';
}
const p1 = new Person();
/*
* new的过程中发生了什么
* 1. 创建空对象
* 2. this指向空对象
* 3. this.propName = xxx; 添加方法和属性
* 4. 隐式返回这个对象
*/

箭头函数

最特殊的一个，根据定义时外层的上下文来确定

// 计时器(宏任务)this的指向
const obj = {
    fn() {
    setTimeout(function() {
        console.log(this); 
    })
}
foo.fn() // window
const obj = {
    fn() {
    setTimeout(()=>{
        console.log(this); 
    })
}
foo.fn() // {fn: f}