JavaScript之this的五种绑定

一、JavaScript中this的绑定规则有五种：

1. 默认绑定
2. 饮食绑定
3. 显示绑定
4. new绑定
5. 箭头函数绑定

要明确的一点是调用位置是函数在代码中被调用的位置，而不是声明的位置。

二、绑定规则

2.1 默认绑定

• 当一个函数没有明确的调用对象的时候，也就是单纯作为独立函数调用的时候，将对函数的this使用默认绑定：绑定到全局的window对象。

​
 function demo() {
    console.log(this === window)
 }
 demo() // true

​

function demo() {
   function demoInner() {
      console.log(this === window)
   }
   demoInner()
}
demo()  //true

2.2 this的隐式绑定

• 当函数被一个对象“包含”的时候，我们称函数的this被隐式绑定到这个对象里面了，这时候，通过this可以直接访问所绑定的对象里面的其他属性。

var obj = {
  name: 'jak',
  sayName: function () {
    console.log(this.name)
  }

}
obj.sayName() //jak            

2.3 this的显式绑定（call(),bind())

         call使用方法：fn.call(obj)     

               fn是你调用的函数，obj参数是你希望函数的this所绑定的对象。

          fn.call(obj)作用：

                即刻调用这个函数fn

                调用这个函数的时候函数的this指向obj对象。

var obj = {
  name: 'jak',
  sayName: function () {
    console.log(this.name);
  }

}
var name = 'rose';
var sayGrobal = obj.sayName;
sayGrobal();  //rose 
sayGrobal.call(obj); //jak

• 在绑定this到对象参数的同时，call将立即执行该函数
• bind不执行函数，只返回一个可供执行的函数

2.4 new 绑定

执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向创建的新对象

function foo (a) {
  this.a = a;
}
var a1 = new foo (1);
var a2 = new foo (2);
var a3 = new foo (3);
var a4 = new foo (4);
console.log(a1.a); // 输出1
console.log(a2.a); // 输出2
console.log(a3.a); // 输出3
console.log(a4.a); // 输出4

2.5 箭头函数

ES6新增一种特殊的函数类型：箭头函数，箭头函数是根据外层（函数或者全局）作用域来决定this。

function foo() {
    // 返回一个箭头函数
    return (a) => {
        // this继承自foo()
        console.log( this.a );
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
}

var bar = foo.call( obj1 );
bar.call( obj2 ); // 2，不是3！