理解js中this的指向

首先，this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定，它最终指向于调用它的那个对象。
（网上大多都是这样说的，在大多情况下是没有问题的，但是是不准确的，所以有时候会感到很疑惑）

例1

function a () {
    var num = 1
    console.log(this.num)    //undefined
    console.log(this)        //window
}
a()
复制代码

按照我们所说的，this最终指向于调用它的对象，所以这里的函数a是被window对象所调用的，下面我们将证明这一点

function a () {
    var num = 1
    console.log(this.num)    //undefined
    console.log(this)        //window
}
window.a()
复制代码

所以，我们认为执行 a() 与 window.a()返回的结果应当是一样的，因为this都指向于window对象，但是下面就出现问题了

例2

var obj = {
    num: 1,
    fun: function () {
        console.log(this.num)
    }
}
obj.fun()         //1
window.obj.fun()  //1
复制代码

首先，我们要记得，函数中this的指向只有在调用的时候才能确定，指向调用它的那个对象

那按照我们的说法，是window对象调用了obj.fun()函数，但是，这就有疑问了，为什么不是返回undefined呢？window对象中没有定义num变量啊？

看下面的例子
例3

var obj = {
    num: 1,
    child:{
        num: 2,
        fun: function () {
            console.log(this.num)   //2
        }
    }
}
obj.child.fun()
复制代码

这个也很奇怪，明明是obj调用的child.fun()，为什么this没有指向它呢？你会觉得开头的那句话是错误的，其实不然，只是它描述的不够准确，下面我们将把它补充完整

情况1 函数内的this，如果这个函数没有被上一层的对象调用，那么这个this指向于window。严格模式下除外（this指向undefined）。

情况2 函数内的this，如果这个函数被上一层的对象调用，那么这个this就指向于上一层的对象。

情况3 函数内的this，如果这个函数所在的对象内部有多个属性，即便它被最外层的对象调用了，它也是指向它上一层的对象，例子3就说明了这一点
我们再试着证明下这个结论

例4

var obj = {
    num: 1,
    child:{
        fun: function () {
            console.log(this.num)   //undefined
        }
    }
}
obj.child.fun()
复制代码

尽管对象child中没有num，this仍然指向了child，因为它只指向它的上一层对象，不管这个对象中有没有它想要的东西。

例5

var obj = {
    num: 1,
    child:{
        num: 2,
        fun: function () {
            console.log(this.num)   //undefined
            console.log(this)       //window
        }
    }
}
var other = obj.child.fun
other()
复制代码

what？这怎么又指向了window呢？怎么回事呢？其实是因为这句话，this永远指向的是最后调用它的对象
，这句话同样重要，也就是说看这个函数执行的时候是谁调用的它，函数要执行，肯定是有对象调用才能执行，例4中是obj调用的child.fun()直接执行了它，例5中是把这个函数赋值给了变量other，并没有调用它，最后调用other函数的是window，所以指向了它。

例6 当this存在于构造函数中

function Fun () {
    this.num = 1
}
var a = new Fun()
console.log(a.num)    // 1
复制代码

关键字new 实例化了一个构造函数Fun的对象，把它赋值给了变量a，所以它改变了this的指向，把this指向了对象a。
也可以理解为，new创建了一个空对象，然后自动调用了apply方法，改变了this的指向，把this指向这个空对象，这个空对象又赋值给了变量a，所以this就指向了a。

我们都知道，函数应该有返回值，如果函数没有返回值的时候，我们默认返回的是 undefined，如下

function Fun () {
    this.num = 1
    return {}
}
var a = new Fun()
console.log(a.num)    // undefined
复制代码

function Fun () {
    this.num = 1
    return function() {}
}
var a = new Fun()
console.log(a.num)    // undefined
复制代码

function Fun () {
    this.num = 1
    return 10
}
var a = new Fun()
console.log(a.num)    // 1
复制代码

function Fun () {
    this.num = 1
    return undefined
}
var a = new Fun()
console.log(a.num)    // 1
复制代码

如何理解呢，如果一个函数的返回值是一个对象，那么this就指向这个返回值，否则，this还是指向函数的实例。还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function Fun () {
    this.num = 1
    return null
}
var a = new Fun()
console.log(a.num)    // 1
复制代码