第一篇技术博客:不要滥用this绑定
发布于 8 年前 作者 zhanzhenzhen 4318 次浏览 来自 分享

我的博客在: https://zhanzhenzhen.github.io/2016_08_14 您可以在我的网站内评论,这样如果我回复了您,您将收到Email通知。

不要滥用this绑定

——讨厌的jQuery风格

这是我的第一篇技术博客。

很久以前就用过jQuery的程序员一定不会对.map这个方法陌生,它的用法是这样的:

$(":checkbox")
.map(function() {
    return this.id;
})

因为我是从C#转到JavaScript的,觉得在JS中可以让this来担任参数的角色,会把概念搞乱,所以我一开始就很不喜欢这种做法。而且,现在有了ES2015的箭头函数,局限性更大了,因为它将导致无法使用箭头函数:

$(":checkbox")
.map(() => this.id)

上述代码是错误的,因为箭头函数中的this是不可自定义的,它始终绑定为外层的this

而如果改成参数风格的话,就可以使用箭头函数了:

$(":checkbox")
.map(m => m.id)

遗憾的是jQuery不支持这种风格。

总之,我觉得让this的含义可变是JavaScript的错误设计,因为它会导致滥用,但好在我们可以避免,办法就是:让它只出现在“类的方法”或“对象的方法”的内部,不要在其他任何地方使用this,也尽量不要使用jQuery这样的库。

10 回复

后台管理系统的页面,正在逐渐使用vue来代替jq<br><br>来自<a href=“https://1340641314.github.io/react-cnode/” target="_blank">react-cnode手机版</a>

你还能找出比jQuery更好的库么?

知道是怎么回事就好、拒绝并不是一个好办法。 From Noder

该用还是得用,在jq的时候特殊处理一下就行,总比程序到处都是self,_this好

夢卜白菜,各有所爱 From Noder

参数顺序不同而已 $(":checkbox").map((i, m) => m.id)

this的隐式指向时不时就有坑,能不依赖它确定变量就尽量不用。类似本文中的例子,我觉得用参数的形式挺好的。

本公司的node代码充斥着this,美名其曰面向对象,蛋疼

JS应该逐步走向正规化,以前的语法思路充斥着奇技淫巧的意味。 正如你们所说的,很容易隐藏很多坑,甚至都不好调试。 现在以后,尽量避免滥用,关爱填坑人,由你我做起。

函数里的this就是调用这个函数的家伙,明白了这点就可以了

回到顶部