原来 JS 是这样的 - 关于 this (3)

然而,对于上述的这类应用场景,一旦函数中使用了 this ,他们显然还是会使用默认绑定,并可能因此造成难以排查的 bug ,于是更好的做方法则是传入一个空对象而不是 null ,这样如果发生了绑定,那么也会绑定到我们所传入的空对象上,而不是意外的绑定到全局对象上了。简单的做法是使用 {} ,当然也可以使用 Object.create(null),后者相比前者而言并不会创建 [[Prototype]],故实际后者更加 halal 一些。

尽管在这篇文章的讨论范围内并不打算涵盖太多 ES6 的相关内容,但 ES6 新增的 (=> 胖箭头)还是值得一提的。箭头函数中的 this 并不使用上述的四种规则,而是使用更符合正常人脑回路的策略,即使用外层(函数或全局)作用域来决定 this 所绑的对象。

尽管不知道你是否使用过这种做法,我肯定是用过...

function foo() { var self = this; // 存储 this 以供使用 setTimeout(function(){ console.log(self.a); }, 100); } var obj = { a:61 }; foo.call(obj); // 61

而如果使用箭头函数,则可以把 foo() 写成这样了:

function foo() { setTimeout(() => { console.log(this.a); }, 100); }

于是如果你写习惯了 var self = this 又怕被上面讲到的规则搞得头大,箭头函数则是个不错的方案。

最后

上面就是对 JavaScript 中 this 行为的简单讨论了。和上篇一样,如果你对这些内容仍然感兴趣,不妨去读一读《You don’t know JS - this & object prototypes》一书(这篇只覆盖了该书中 this 相关的章节的内容)。这是一本开源书,你可以在这里在线阅读这本书,或者购买这本书的电子版或实体版。这本书的中文译本涵盖在《你所不知道的 JavaScript 上卷》中,你也可以考虑看中文版。

尽管 JavaScript 由于历史包袱或语言设计的原因造成了很多和常规思想不一致的行为,因而导致被很多人诟病,但在逐渐熟悉 JavaScript 的过程中我们依然可以从中发现一些有用或者有趣的思想。无论是否选择使用 JavaScript ,能在了解的过程中学得任何东西也都是一种收获了,不是吗?

最后,尽管我会尽可能仔细的检查文章内容是否有问题,但也不保证这篇文章中一定不会有错误,如果您发现文章哪里有问题,请在下面留言指正,或通过任何你找得到的方式联系我指正。感激不尽~

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpsjwj.html