javascript中This的几种赋值情况

首先注意一点： this取什么值是再函数执行的时候被确定的，不是再定义的时候被确定的【非常重要】

 

下面是5种赋值情况，大家可以再自己电脑上写一写打印出来看看

 

1.作为普通函数被调用

function fn(){

 console.log(this)   // window

}

 fn()   // window

 

2.使用call apply bind 被调用

fn1.call({x:100}) // this是{x:100} 调用的对象

const fn2 = fn1.bind( {x:200})

fn2() // this 是 {x:200} 调用的对象

 

3.作为对象方法被调用

const zhangsan = {

  name:'张三',

  sayHi(){

    console.log(this) // this是zhangsan这个对象，因为是zhangsan.sayHi()被执行

  },

  wait(){

    setTimeout(function(){

      console.log(window) //this===window 因为setTimeOut之后当这个方法被执行时候，就是再window下面执行的

    })

  },

  waitAgain(){

    setTimeOut(()=>{

      console.log(this) // zhangsan 箭头函数的this指向上级作用域的this

    })

   }

}

 

4.再class方法中被调用

class People{

  constructor(){

    this.name = name; // this 创建的实例

    this.age = 20;

  }

  sayHi(){ console.log(this) } // this就是zhangsan这个实例

}

const zhangsan = new People('zhangsan')

zhangsan.sayHi() // zhangsan对象

 

5.箭头函数

箭头函数的this指向上级作用域的this