胖箭头功能的阴暗面

免责声明:本文针对对JavaScript有中级理解的JavaScript开发人员
我假设你们知道以下术语:
粗箭头功能,上下文(“ this”)和原型

自从ES6推出以来,粗箭头功能一直是JS_Town中的新人。 我的意思是它的超酷语法和漂亮的语法

就像简单地看一下用“ function”关键字定义的以下函数与“()=>”粗箭头语法定义的函数一样

太神奇了! 🙂

同样,我什至不必关心我的上下文(“ this”)变体,因为它会将 this”绑定到自身,这意味着绑定,调用和应用对它不起作用。
但这没关系,因为我不必担心我的环境会发生变化。

现在,进入黑暗面之前,让我们看一下JS的OOP


如上所述,我已经创建了一个函数类,该函数类用作具有某些属性和方法的构造函数,可以很好地工作。 但是,当我创建“ MathClass”的实例时,该实例内部也会得到“ getSum”功能。 如下所示,这是多余的 ,可以通过原型轻松避免。

凉! 内存已保存! 这种方法是将函数存储在原型中的相当标准的方法。

这行得通,因为“这”行得通:Rohan Salunke

这取决于上下文,因为“ this”是指调用函数的实例。

现在到“胖箭的阴暗面”

上面的示例可能使您想到,由于默认情况下“ this”绑定到胖箭头功能,因此我们无法在Prototype中使用它。 让我们尝试一下:

Me! 不起作用
因此,为了使用它,我们必须将胖箭头函数保留在函数构造函数中, 即对于类的每个新实例,将创建一个新的绑定函数,该函数会影响性能以及内存使用率。

胖箭头使对象变胖— Rohan Salunke😛

SmartGuy先生:但是,如果我不再使用功能构造函数了怎么办?

好吧,您不能在普通ES6类中使用粗箭头功能,但可以在React.js类中使用。

让我多花点时间,向您展示ES6类中发生的情况:

好的。 默认情况下,ES6足够聪明,可以将函数放入原型中。 React组件也是如此。 这些功能与原型中的类保持一致。

如果我将Fat Arrow Function放进React组件怎么办?

通常建议将绑定的函数放在React Components中。
在这种情况下,每次创建组件实例时,都会创建一个新的绑定函数。 这反过来会减慢React渲染速度! 因此,避免!

感谢您的阅读,编码愉快!