浅谈JavaScript中的this

this在定义的时候是无法确认指的是哪个对象的，只有在执行的时候才能确认。
简单的理解：谁调用了this所在的函数，那么this指向就是那个对象。

var a = {
    name:"winne",
    fn1:function(){
        console.log(this);
    }
}
a.fn1(); // 这里的  this === a 对象
a.fn1.call({name:"xf"}); // 这里的 this === {name:"xf"}
var fn2 = a.fn1;
fn2(); // 这里的 this === window 对象

this的几种不同的使用场景

1、作为构造函数调用

this指向new创建的实例对象。

function Foo(name){
    this.name = name;
    this.fn1 = function(){
        console.log(111);
    }
    console.log(this);
    
}
var f = new Foo("winne");

2、作为对象属性调用

this指向这个对象。

var obj = {
    name:"winne",
    printThis:function(){
        console.log(this);
    }
}
obj.printThis();

3、作为普通函数调用

this指向window对象。

function fn1(){
    console.log(this);
}
fn1();

4、使用call()、apply()、bind()调用

this指向上述方法的规定指定的第一个参数。

function fn2(name,age){
    console.log(this);
}
// call函数中的第一个参数就是this规定指向的对象，随后的参数个数就是原本函数的参数。
fn2.call({x:100},'winne',20);
// apply函数中的第一个参数就是this规定指向的对象，随后的数组参数个数就是原本函数的参数。
fn2.apply({y:200},["winne",20]);

var fn3 = function(name,age){
    console.log(this);
}.bind({y:300}); // bind函数里面的参数就是指定了this的指向，使用bind函数必须是使用函数表达式的形式
fn3("winne",22);

call函数中的第一个参数就是this规定指向的对象，随后的参数个数就是原本函数的参数。
apply函数中的第一个参数就是this规定指向的对象，随后的数组参数个数就是原本函数的参数。
bind函数里面的参数就是指定了this的指向，使用bind函数必须是使用函数表达式的形式。

额外推荐阅读：
https://www.jianshu.com/p/e16aec12c96c