在前端开发中，函数是一个不可或缺的部分。在 ES6 之前，定义函数时往往使用匿名函数，这种方式很方便，但同时也存在一些问题。ES6 开始引入了箭头函数的概念，但箭头函数也不能很好地解决命名问题。ES12 中新增了 name 属性，可以很好地解决这个问题。
问题描述
在 ES6 之前，我们常常使用以下方式定义函数：
var foo = function() {
// function body
}当我们想要在函数体外调用这个函数的名称时，我们需要另外定义一个变量：
var foo = function() {
// function body
}
var fooName = 'foo';这种方式存在一些问题：
- 如果函数体发生了变化，我们也需要同时修改
fooName的值。 - 在调试代码时，我们可能需要查找
foo的调用位置，但在 JS 引擎中函数是使用“函数对象”（Function Object）保存的，该对象的name属性会显示函数名，但如果是匿名函数，那么name属性会是空字符串，无法帮助调试。
在 ES6 中，我们可以使用箭头函数定义函数。箭头函数不需要使用 function 关键字，可以更简洁地表达函数体：
var foo = () => {
// function body
}但使用箭头函数也存在问题。箭头函数不能使用 arguments 对象，也不能绑定 this，这在某些场景下会造成一些困扰。而且，箭头函数同样不能帮助我们解决命名问题。
ES12 中的解决方案
在 ES12 中，我们可以使用 Function.prototype.name 属性来获取函数名。该属性返回函数本身的名称，如果函数没有名字，则返回空字符串。在定义函数时，我们可以直接给函数赋一个名字：
var foo = function bar() {
// function body
}这里，我们使用函数表达式定义了一个名为 bar 的函数，并使用 foo 变量保存了该函数的引用。此时，foo.name 将返回字符串 'bar'。
console.log(foo.name); // 输出 'bar'
另外，我们也可以在函数表达式中直接使用箭头函数，并给该函数命名：
var foo = () => {
// function body
}
Object.defineProperty(foo, 'name', { value: 'bar' });
console.log(foo.name); // 输出 'bar'这里，我们使用 Object.defineProperty 方法给函数 foo 的 name 属性赋值。
总结
ES12 中新增的 name 属性很好地解决了函数命名的问题。在定义函数时，我们只需直接给函数赋一个名字，就可以很方便地使用该函数的名称。除此之外，我们还可以使用 Object.defineProperty 方法修改函数的 name 属性值。
由此可见，name 属性不仅可以提供帮助我们在调试代码时更方便地定位函数，也可以更好地维护代码。在实际的开发中，我们应该尽量使用命名函数，避免使用匿名函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d7fd0968c7c53b0849a0c