js中this的四大绑定规则

四大绑定规则

1. new绑定：

   var a = 1;
   function Person(a){
   	this.a = a;
   	console.log(this.a);
   }
   const p = new Person(2); // 2
   console.log(p.a); // 2
   

2. 显式绑定：call，apply，bind

   var a = 'window';
   var obj1 = {
   	a:1,
   	test:function(){
   		console.log(this.a);
   	}
   };
   var obj2 = {
   	a:2,
   };
   obj1.test(); // 1
   obj1.test.call(obj2); // 2
   

3. 隐式绑定：

   var a = 'window';
   var obj = {
   	a:1,
   	test:function(){
   		console.log(this.a);
   	}
   };
   obj.test(); // 1
   

   注意：定时器和延时器的this指向window；

   var a = 'window';
   setTimeout(function() {
   	console.log(this.a);
   }, 2000)
   

   2秒后打印window，setTimeout的执行其实是省略了window.setTimeout；但是回调函数是箭头函数那么this指向就是setTimeout执行所在的作用域，如下：

   const obj1 = {
   	a: 1,
   	test(){
   		setTimeout(function () { console.log(this.a); }, 1000)
   	}
   }
   obj1.test(); // undefined
   const obj2 = {
     a: 2,
     test() {
       setTimeout(() => { console.log(this.a); }, 1000);
     },
   };
   obj2.test(); // 2
   

4. 默认绑定：

   // 在非严格模式下
   var a = 'window';
   function test() {
   	console.log(this.a);
   }
   test(); // window
   // 在严格模式下
   var b = 'window';
   function testNext() {
   	console.log(this.b);
   }
   testNext(); // undefined
   

   非严格模式下this指向window，严格模式下this指向一个空对象({})；

总结： 四个规则优先级为：new => 显式 => 隐式 => 默认，函数this的确定是函数谁调用this就指向谁；注意一点，箭头函数是独立于这四个规则之外的；