# this指向问题 this应该是第一个让人对JavaScript困惑的问题了，但是实际上它的原理非常简单：**函数的this在运行时绑定**。 什么叫运行时绑定？就是函数的this**和你写在哪里无关**，而是和**谁调用它有关**。谁调用这个函数，this就指向谁。 你现在大概会在想：原来这么简单，我精通了！ 那可就大错特错了，可千万别忘了光函数的调用方法就有两种：直接调和new一个，而能做这两个操作的地方可以说非常的多，所以还需要往下看。 注意：以下例子均为严格模式下运行，非严格模式这里不做考虑。 ## 初级 ```js function f1 () { console.log(this) } f1(); ``` 问结果是什么？先问自己：谁调用的它？你应该一下看不出来，这明明就是直接调的啊！可能有的基础比较扎实的人会说**是window**，那真是非常的恭喜你了，但你要注意的是以上代码在严格模式下是undefined。 正解： window / undefined ```js const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } let fn1 = foo.fn fn1() ``` 结果是什么？你可能一眼看到fn是定义在foo对象里，那this可不就是foo吗，刚刚说什么来着，先问自己：**谁调用的它**，来看最后一行再回答一遍。 正解：window / undefined ## 中级 ```js const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } foo.fn() ``` 现在你应该已经有点感觉了，来，说出来，谁调用的它fn？ 正解：foo ## 中级+ ```js 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。 > 本文作者： 不爱喝橙子汁