在 ECMAScript 2019 中引入了裸函数的概念，本文将介绍什么是裸函数以及如何在 JavaScript 代码中使用它们。裸函数是不与对象绑定的函数，它没有 this 绑定，也不具有 prototype。
何为裸函数？
裸函数简单来说就是普通的函数，只是它没有绑定到任何对象。由于 this 关键字的行为和作用域从绑定对象依赖于函数调用变得更加复杂，因此裸函数特别有用。
裸函数可以用箭头函数表示，其语法如下：
const func = () => {
// function body
};当您需要在函数中引用外部 this（白话：如果你想在函数内部访问外部作用域中的 this），这种形式尤其有用。常规函数通过 call() 或 apply() 函数绑定在对象上，然后采用该对象作为操作者执行。
例如：
var obj = {
prop: "I'm bound to this object!",
func: function() {
console.log(this.prop);
}
};
obj.func(); // outputs "I'm bound to this object!"此示例中，func() 方法在 obj 上调用，this.prop 引用 obj.prop。但是，在“裸”函数中，this 不再绑定于对象（因此称之为 “裸”） 。在没有其他选择时，它保持在函数所在作用域的原始值。
例如：
var value = "I'm being accessed in a naked function!";
const nakedFunc = () => {
console.log(this.value);
};
nakedFunc.call({value: "This shouldn't be logged!"}); //outputs "I'm being accessed in a naked function!"由于箭头函数没有自己的 this 绑定，因此外部值可被访问且不会被覆盖。
如何在 JavaScript 代码中使用裸函数？
现在我们来看一个关于如何使用箭头函数实现“Delegation”的示例。假设您想使用第三方库来处理 DOM 元素事件，并根据点击的元素类型完成相应操作。
// javascriptcn.com 代码示例
import $ from 'jquery';
$(document).on('click', '.myButton,.myLink', event => {
if ($(event.target).hasClass('myButton')) {
// do button stuff
} else if ($(event.target).hasClass('myLink')) {
// do link stuff
}
});上述代码演示了在 jQuery 中使用裸函数的方式。注意，jQuery 仅是其中一种方法。您可以在旧版给未使用 jQuery 或任何现代框架的网站提供的支持。
另外，在 Node.js 中，您可以使用EventEmitter实现类似的操作：
// javascriptcn.com 代码示例
const EventEmitter = require('events');
class MyClass extends EventEmitter {
myFunc() {
console.log('myFunc');
this.emit('done', 'my event!');
}
}
const myInstance = new MyClass();
myInstance.on('done', eventData => {
console.log(`Event received with data: ${eventData}`);
});
myInstance.myFunc();在上面的示例中，当 MyClass 的 myFunc() 被调用时，它将触发 done 事件。此事件随后在 myInstance.on('done') 中被侦听，并附带准备发送的数据。
总结
我们现在知道裸函数是 JavaScript 中的一个新概念，它们是不与对象绑定的函数，可以用箭头函数表示。通过理解裸函数，您可以更好地了解 JavaScript 中函数相关的概念。使用裸函数的情况包括但不限于访问外部 this，处理DOM元素事件以及使用`Event
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652922cc7d4982a6ebbaf7ce