this

不同环境下的全局this指向

1. 在浏览器环境下,this指向了window
2. 在node的环境下,this指向了global({})

因为不同环境this的指向不一致,所以在ES11的时候新增了一个属性:GlobalThis,根据不同环境动态指向对应的全局this

函数this的指向

1. 在执行函数执行栈(FEC)时,会创建VO,scope chain和this
   这时的this是动态绑定的,不是创建时绑this定而是在函数使用时绑定,跟函数定义在哪没有关系

this的绑定规则

1. 默认绑定
   定义: 默认情况下,如果一个函数独立调用,那么该函数的this指向全局

   function foo(){}
   // 独立函数调用,此时的this指向全局(window/global )
   foo()

2. 隐式绑定
   定义: 将函数称为某个对象的方法,通过调用该对象进行this绑定,那么这个this指向的就是这个对象,这个方法是被哪个对象调用的,那么那个对象就是该函数的this

   function foo(){}
   const obj = {
     foo: foo
   }
   // 此时函数的this指向了obj这个对象
   obj.foo() 

3. 显示绑定
   (1) call(),apply(),bind()

   function foo(){ console.log(this.name) }
   const obj = {
     name:'roily',
     foo
   }
   const thisObj = { name:'nano' }
   
   /* 此时的this指向了thisObj这个对象 */
   foo.call(thisObj)  -->  'nano'
   obj.foo.apply(thisObj)  -->  'nano'
   obj.foo.bind(thisObj)  -->  'nano'

   (2) call,apply,bind区别
   i. call,apply 传递的参数不同,call是单个参数单个参数传递的,apply是传递一个数组
   ii.call再执行后就会立即销毁,而bind是返回一个函数,该函数的this永久指向bind绑定的this对象

4. new绑定
   (1) 定义: 构造函数的new绑定
   (2) new的用途:
   i. 创建一个空对象
   ii.将构造函数的显示原型赋给该对象的原型对象
   iii.将构造函数的this指向这个空对象
   V. 执行构造函数的代码
   IV. 返回该对象

绑定规则优先级

1. new > 显示绑定 > 隐式绑定 > 默认绑定

额外补充

1. 忽略显示绑定
   当call,apply,bind传递的this对象为null或undefined时,那么此时的this指向全局

2. 箭头函数的this
   箭头函数的this是不受所有的this绑定规则影响的,永远指向声明箭头函数的那个作用域