全面解析JavaScript中this的指向问题

工作中经常使用this，但是好像一直没有仔细去思考this的问题，知道代码中出现问题后。。。。

1、默认绑定 - this指向全局变量

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

this最终指向的是调用它的对象。这里的函数a 在全局环境被调用，this指向全局变量window。

2、隐式绑定

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o。

 

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

function baz(){
    console.log('a',this.a);
};
var a = 2;
var obj = {
    a: 3,
    baz: baz
};

var obj2 = {
    a: 4,
    baz: obj.baz
}
obj2.baz();//4

3、显式绑定（call、apply、bind）

call，apply功能差不多，它们的作用是我们可以显式的改变函数的上下文this。主要在传参的方式上有些差异。

使用的方法call(obj,param1,param2,...)和apply(obj,[param1,param2,...])。

直接上例子：

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
b.call(a);

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
b.apply(a);

注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

bind方法和call、apply方法有些不同，实际上bind方法返回的是一个修改过后的函数。

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
var c = b.bind(a);
c();

4、new绑定

在js中，我们经常使用new来对函数进行构造调用，如下：

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。