JS函数中的this的四种绑定方式

1. this的默认绑定window

凡是函数作为独立函数调用，没有指定调用对象, 无论位置在哪里，this默认绑定window对象

示例如下：

function test(){
    console.log(this == window);
}
test(); // 打印true

function outFun(){
    function inFun(){
        console.log(this == window);
    }
    inFun();
}
outFun(); // 打印true

2. this的隐式绑定

示例1：

var person = {
    age: 12,
    onTest: function(){
        console.log(this.age);
    }
}
person.onTest(); // 输出12

当函数被一个对象包含的时候，函数的this被隐式的绑定到这个对象, 这时可以通过this访问绑定对象的其他属性

示例2：

function onTest(){
    console.log(this.age);
}
var person1 = {
    age: 12,
    onTest: onTest
}
person1.onTest(); // 输出12
onTest(); // 输出 undefined

person1.onTest() 也可以取到age， 可以看出函数this的绑定并不会因为它被定义在j对象的内部和外部而有任何区别

示例3：

var person2 = {
    age: 12,
    onTest: function(){
        console.log(this.age);
    } 
}
function callTest(fn){
    fn()
}
callTest(person2.onTest); // 输出undefined

1. 函数this的隐式绑定是动态的
2. 由于函数的this与对象是动态绑定的， 在对象调佣函数之前函数的this和对象没有强制绑定，函数传递存在this绑定丢失问题

3. this的显示绑定（使用call 和 bind）

var person3 = {
    age: 12,
    onTest: function(){
        console.log(this.age);
    } 
}
function callTest(fn){
    fn.call(person3); // 硬绑定
}
callTest(person3.onTest); // 输出12

使用call() 方法，传递丢失的this绑定成功绑定到person3

var person3 = {
    age: 12,
    onTest: function(){
        console.log(this.age);
    } 
}
var fn = person3.onTest;
fn(); // 输出undefined
var onTest2 = fn.bind(person3);
onTest2(); // 输出12

使用bind() 方法，得到一个this和对象绑定的方法

call和bind的区别是：在绑定this到对象参数的同时

1.call将立即执行该函数

2.bind不执行函数，只返回一个可供执行的函数

4. new绑定

function fun(a){
    this.name = a;
}

var obj1 = new fun('aa');
var obj2 = new fun('bb');

console.log(obj1.name);
console.log(obj2.name);

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

5. 注意

箭头函数：不使用这四个this规则，根据词法作用域来决定this。