JS基础 - this 的应用场景和取值

1. 作为普通函数

function fn1() {
       console.log(this);
   }
   fn1(); // window

2. 使用call、bind、apply 调用

function fn1() {
       console.log(this);
   }
   fn1.call({ name: 'zhangsan' }); // {name: 'zhangsan'}
   const fn2 = fn1.bind({ name: 'lisi' });
   fn2(); // {name: 'lisi'

> 函数的bind是返回一个新的函数

3. 作为对象方法调用

const fn1 = {
       name: 'gonwe',
       sayName() {
           console.log(this); // {name: 'gonwe'}
       },
       wait() {
           setTimeout(function () {
               console.log(this); // window
           });
       }
   }

4. 在箭头函数调用

const fn2 = {
       name: 'gonwe',
       sayName() {
           console.log(this); // {name: 'gonwe'}
       },
       wait() {
           setTimeout(() => {
               console.log(this); //{name: 'gonwe'}
           });
       }
   }

> 箭头函数的this永远是取它上一级作用域的this

5. 在class方法中调用

class Person {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this);
    }
   }
   const Person1 = new Person('gonwe');
   Person1.sayName(); // {name: 'gonwe'}

> this取值是在函数执行的时候，不是在函数定义的时候
>
> this取值是在函数执行的时候，不是在函数定义的时候
>
> this取值是在函数执行的时候，不是在函数定义的时候