js中this的指向问题

js 方法中的 this 是指向调用它的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 10;
var foo = {
a: 20,
bar: function() {
var a = 30;
return this.a;
},
};
foo.bar(); //20
(foo.bar1 = foo.bar)(); //10
(foo.bar1, foo.bar)(); //10
foo.bar1(); //20
(foo.bar)(); //20

解答

第一个很好理解,调用 bar()是 foo 对象,所以是 foo;

第二个需要了解赋值的副作用赋值表达式会返回等号右边的值!
所以在执行这表达式时,读取了 foo.bar 的值并返回了,返的是 bar 函数的一个引用,然后再进行了执行; 这时执行时是处于 window 的上下文,所以它的 this 指向 window。

第三个是逗号的副作用返回最后一个表达式的值;所以上下文和第二个一样,都指向了 window。

第四个没什么好说的,调用的就是 foo 对象,指向当然也是它。

第五个的结果和第一个一样,并且编辑器也会格式化成第一个的形式,说明这种形式是相等的。
也许你会想,这个不是一个表达式吗?
既然是表达式,为什么 2 和 3 的上下文都丢失了,为什么 5 的不丢失?
第一,因为括号没有副作用。
第二,点号运算符的作用就是在当前对象上调用方法,必须直接使用 a.b()a["b"]() 的形式才能在当前对象上调用方法,其他形式仅仅是调用方法/函数。(这里不考虑 bind、call、apply 这些)

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/09/js%E4%B8%ADthis%E7%9A%84%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏