ECMAScript 2019 中的函数绑定：bind 方法与箭头函数的区别
在前端开发过程中，经常需要绑定函数的上下文环境。为了实现这个目的，ECMAScript 2019 引入了新的功能 - 函数绑定。本文将探讨函数绑定的两种方式：bind 方法和箭头函数，并重点讨论它们之间的区别。
bind 方法
bind 方法是在 ES5 中添加的，它返回一个新函数，该函数的 this 值被绑定到指定的对象。bind 方法的语法如下：
function.bind(thisArg[, arg1[, arg2[, ...]]])
其中，thisArg 表示需要绑定的 this 值，arg1、arg2、... 表示需要传入的参数。
下面是一个简单的示例代码，演示了如何使用 bind 方法来创建一个新的函数，并将其中的 this 值绑定到指定对象上：
-- -------------------- ---- -------
--- --- - -
-- --
----- ---------- -
------ -------
-
--
--- ---- - ---------
-------------------- -- ---------
--- --------- - ---------------
------------------------- -- -箭头函数
箭头函数是在 ES6 中引入的，它的诞生主要是为了解决 this 指向的问题。箭头函数的语法如下：
(param1, param2, …, paramN) => { statements };箭头函数的 this 值指向的是函数定义时所在的对象，而不是函数执行时所在的对象。
下面是一个简单的示例代码，演示了如何使用箭头函数来实现函数绑定：
-- -------------------- ---- -------
--- --- - -
-- --
----- ---------- -
------ -- -- -------
-
--
--- ---- - -----------
-------------------- -- -两者的区别
看到这里，你可能会有疑问：bind 和箭头函数的作用貌似相同，它们有什么区别呢？
首先，bind 方法是一个函数，而箭头函数仅仅是一种函数定义的方式。这就意味着使用 bind 方法返回的是一个新函数，而箭头函数本身就是一个函数。
其次，其绑定 this 值的方式也不同。bind 方法将 this 值绑定到指定的对象上，而箭头函数将 this 值绑定到定义时所在的对象上。这意味着，使用 bind 方法，我们可以将 this 值动态地绑定到不同的对象上，而箭头函数的 this 值不会发生变化。
最后，需要注意的是，使用 bind 方法和箭头函数绑定的函数，会优先使用函数自身的 this 值。也就是说，如果使用 bind 方法或箭头函数将 this 值绑定到一个对象上，但是该函数在执行时使用了 apply、call 或者 bind 方法改变了 this 值，那么使用 bind 方法或箭头函数绑定的 this 值将会被忽略。
综上所述，bind 方法和箭头函数虽然都可以实现函数绑定，但是它们在细节上还是存在一定区别的。在具体使用时，需要根据实际需要进行选择。
总结
- bind 方法和箭头函数都可以实现函数绑定。
- bind 方法返回一个新函数，箭头函数本身就是一个函数。
- 使用 bind 方法，可以动态地绑定 this 值到不同的对象上，而箭头函数的 this 值不会发生变化。
- 我们一般建议使用箭头函数来实现函数绑定，因为箭头函数代码相对简洁、语义清晰，而且避免了因为 this 值变化带来的混乱。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2c31948841e9894f3af46