多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 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。 > 本文作者: 不爱喝橙子汁