ES6函数name属性详解:行为变更与实例分析

作者:闭包旅人

时间:2026-10-23

浏览:96

本文深入解析ES6中函数name属性的功能与用法。重点对比ES5与ES6在匿名函数赋值给变量时的行为差异,阐述Function构造函数及bind方法返回函数的name属性特征,帮助开发者准确掌握该标准属性的实际应用。

文章目录

ES6函数name属性概述

本文通过具体实例介绍ES6中函数name属性的功能及其使用方式,供读者参考学习。

函数的name属性用于获取该函数的名称。


function foo () {}
foo.name // foo

ES5与ES6的行为差异

尽管该属性早已得到浏览器的广泛支持,但直到ES6标准制定时,才被正式纳入规范。

需要注意的是,ES6对该属性的行为进行了调整。在ES5中,若将匿名函数赋值给变量,其name属性返回空字符串;而在ES6中,该属性会返回变量名作为函数名。


var f = function() {}
// es5 
f.name // ""
// es6 
f.name // "f"

上述代码示例中,变量f被赋值为一个匿名函数,ES5和ES6环境下name属性返回的结果存在差异。

若将具名函数赋值给变量,无论是ES5还是ES6,name属性均返回该函数原本定义的名称。


const bar = function baz() {}
// es5
bar.name = 'baz'

// es6
bar.name = 'baz'

特殊函数的name属性表现

通过Function构造函数创建的函数实例,其name属性值为anonymous。


(new Function).name // 'anonymous'

由bind方法返回的函数,其name属性值会带有bound前缀。


function foo() {}
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

感兴趣的用户可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章