JS中的this指向问题

this指向问题

this应该是第一个让人对JavaScript困惑的问题了，但是实际上它的原理非常简单：函数的this在运行时绑定。

什么叫运行时绑定？就是函数的this和你写在哪里无关，而是和谁调用它有关。谁调用这个函数，this就指向谁。

你现在大概会在想：原来这么简单，我精通了！

那可就大错特错了，可千万别忘了光函数的调用方法就有两种：直接调和new一个，而能做这两个操作的地方可以说非常的多，所以还需要往下看。

注意：以下例子均为严格模式下运行，非严格模式这里不做考虑。

初级

function f1 () {
    console.log(this)
}

f1(); 问结果是什么？先问自己：谁调用的它？你应该一下看不出来，这明明就是直接调的啊！可能有的基础比较扎实的人会说是window，那真是非常的恭喜你了，但你要注意的是以上代码在严格模式下是undefined。

正解： window / undefined

const foo = {
    bar: 10,
    fn: function() {
       console.log(this)
       console.log(this.bar)
    }
}

let fn1 = foo.fn
fn1()

结果是什么？你可能一眼看到fn是定义在foo对象里，那this可不就是foo吗，刚刚说什么来着，先问自己：谁调用的它，来看最后一行再回答一遍。

正解：window / undefined

中级

const foo = {
    bar: 10,
    fn: function() {
       console.log(this)
       console.log(this.bar)
    }
}

foo.fn() 现在你应该已经有点感觉了，来，说出来，谁调用的它fn？

正解：foo

中级+

const person = {
    name: '橙子',
    brother: {
        name: '河浪',
        fn: function() {
            return this.name
        }
    }
}
console.log(person.brother.fn())

看能不能过关斩将，谁调用的fn？

正解：brother

call / bind / apply 此为3种干预this指向的操作，限于篇幅不展开讲。

箭头函数 箭头函数可以让你省很多事，因为它的this一般来说都是符合你的直觉的：它的this就是定义时候的this。