this的五种绑定方式

this的五种绑定方式

• this的五种绑定规则共有五种

  • 默认绑定（严格/非严格模式）
  • 隐式绑定
  • 显式绑定
  • new绑定
  • 箭头函数绑定

• 默认绑定（严格/非严格模式）

  • 独立函数调用，可以把默认绑定看作是无法应用其他规则的默认规则，this指向全局对象

  • 严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined。只有函数运行在非严格模式下，默认绑定才能绑定到全局对象，在严格模式下调用函数则不影响默认绑定

  • function(){
    	//运行在严格模式下，this会绑定到undefined
    	"use strict";
    	console.log(this.a);
    }
    var a= 2;
    foo();
    
    function foo(){
    	console.log(this.a);
    }
    var a=2;
    
    (function(){
    	//严格模式下调用函数则不影响默认绑定
    	"use  strict";
    	foo();//2
    })()
    

  • 隐式绑定

    • 当函数引用由上下文对象时，隐式绑定规则会把函数中的this绑定到这个上下文对象。对象属性引用链上只有一层或者说最后一层在调用中起作用。

    • function foo(){
      	console.log(this.a);
      }
      var obj = {
      	a:2,
      	foo:foo
      };
      obj.foo();//2
      

    • 隐式丢失:被隐式绑定的函数特定情况下会丢失绑定对象，应用默认绑定，把this绑定到全局对象或者undefined上。

    • 虽然bar时obj.foo的一个引用，但是实际上，它引用的是foo函数本身。bar()是一个不带任何修饰的函数调用，应用默认绑定。

    • function foo(){
      	console.log(this.a);
      }
      var obj = {
      	a:2,
      	foo:foo
      };
      var bar = obj.foo;//函数别名
      var a = 'oops,global';//a是全局对象的属性 
      bar(); //'oops,global'
      

    • 参数传递就是一种隐式赋值，传入函数时也会被隐式赋值。回调函数丢失this绑定是非常常见的

    • function foo(){
      	console.log(this.a);
      }
      function doFoo(fn){
      	//fn其实引用的是foo 
      	fn();  //调用位置
      }
      var obj ={
      	a:2,
      	foo:foo
      };
      var a = 'oops,global';//a是全局对象的属性
      doFoo(obj.foo); //'oops,global'
      

  • 显式绑定

    • 通过call(…)或者apply(…)方法。第一个参数是一个对象，在调用函数时将这个对象绑定到this,因为直接指定this的绑定对象，称之为显式绑定

    • function foo(){
      	console.log(this.a);
      }
      var obj ={
      	a:2
      }
      foo.call(obj);//2  调用foo时强制把foo的this绑定到obj上
      

    • 硬绑定 Function.prototype.binf

  • new绑定

    • 创建/构造一个新对象

    • 这个新对象会被执行[[Prototype]]连接

    • 这个新对象会绑定到函数调用的this

    • 如果函数没有返回其他对象，那么new表达式中的函数会自动返回这个新对象

    • function create(){
      	//创建一个空的对象
      	let obj = new Object()
      	//获得构造函数
      	let Con = [].shift.call(arguments)
      	//链接到原型
      	obj.__ proto __ = Con.prototype  //绑定this，执行构造函数
      	let result = Con.apply(obj,arguments) //确保new出来的是个对象
      	return  typeof result === 'object'?result :obj
      }