首页 > 科技 > js 基础:2 种错误的 this 引用误区

js 基础:2 种错误的 this 引用误区



前言

近期在复习前端相关知识点,接触到很多平时业务涉及不到的东西(你可以理解是些偏语言本身方向的)。

以前一直错误的以为我是个“经验丰富”的前端开发,其实从纵向发展的深度上看,我依旧语言能力不过关,借这个机会继续沉淀自己,让自己未来能走的更远。

同时希望在读的各位多少能有些收获。

如下示例均摘自《你不知道的 javascript 》

两种错误的 this 引用误区

指向自身

包括我在内,相信很多人接触 this 关键词时,会把它通过字面意思理解成:当前对象的引用,就像 this 这个英文单词的意思一样。但肯定是错误的。


虽然调用的是 foo 方法,并且 foo 上面也挂载了 count 属性,但最后的 console 输出是 0 。

如果你答对了,那么恭喜你!你没有这样错误的思维误区。

但也不排除你平时都是这样写的,某种意义上根本没有遇到这样的误区:

利用 词法作用域 来规避了这个误区的发生。

当编译器解析代码时,会进行 LHS 查询,判断 data.count 是否在作用域中,如果没有,则将 data 存到作用域中,js 引擎执行到 foo 方法中的 data.count 会通过 RHS 方式在作用域中查找之前赋值的 data.count 值,再做相关操作。

我只希望在读的各位真正的能理解其中的原因,而不是通过某些写法规避了对 js 语言上本质的思考。

指向当前作用域

同样看个平时的例子:


如果你简单认为 this.a 是谁来执行就是谁的作用域,那也错了, a 的值并不是 2 。

怎么判断 this 引用

以下归纳 4种关于 this 引用的绑定判断方式:

默认绑定

我们知道浏览器中的 全局对象 概念,如果像如下代码,最终就会取到全局对象:


这是作为一种后备默认绑定方式,同时也是我们平时经常 get 到的经验教训。

隐式绑定


注意,此例子不同于上面的“指向自身”那个引用示范。

当调用 obj.foo() 时,会找到 obj 对象上的 foo 属性,其值引用了 function foo 的方法,该函数确定了 执行上下文 关系。

所以 this 引用是指向 obj 对象的(而非全局对象)。

因为是隐藏的这么一个关系,我们平时一些不注意的操作就会“破坏”这样的绑定:


wrongRef 变量来保存 obj.foo 的引用,当调用 wrongRef 时,运行了 function foo 方法,其 this 指向了全局对象范围。

是不是又踩到坑了?丢失 this 引用关系是非常常见的。

显示绑定

在我们看 js 继承时肯定见过这样的实现:


一样作用的还有 apply ,这两个是 js 为我们提供转化执行上下文的工具方法,让在调用 foo 时,却把引用迁移到了 obj 上。

由于这样“强势”的绑定机制,在 ES5 中提供了 bind 方法,也让这种引用的绑定更好的理解。



new 绑定

我们之前已经通过 实现一个 new 操作符 理解过了 new 的内部原理。

虽然 new 不是其他面向对象语言中新创建一个 Class 类,但我们可以通过这样“对象创建”的方式来“控制” this 引用。


总结

以上就是 4种关于 this 引用的绑定方式,相信平时的开发中我们多少都有所涉及,但是却没有正儿八经的落地总结归纳过。

同时文章开头也通过两个错误的思维误区,加深了对 this 引用的正确理解。

希望对各位有所帮助,后续还会涉及更多内容,敬请期待吧。

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.sosokankan.com/article/1927067.html

setTimeout(function () { fetch('http://www.sosokankan.com/stat/article.html?articleId=' + MIP.getData('articleId')) .then(function () { }) }, 3 * 1000)