《理解 ES6》阅读整理:函数(Functions)(五)Name Property

名字属性(The name Property)

在JavaScript中识别函数是有挑战性的,因为你可以使用各种方式来定义一个函数。匿名函数表达式的流行使用导致函数调试困难,在栈信息中难以找出函数名。因为这些原因,ES6为所有函数都增加了名字属性。

选择合适的名字(Choosing Appropriate Names)

在ES6中所有的函数都有一个合适的名字属性。来看下面的例子:

function doSomething() {
    //...
}

var doAnotherThing = function() {
    //...
}

console.log(doSomething.name);  //  doSomething
console.log(doAnotherThing.name);  //  doAnotherThing

在上面的代码中,doSomething是一个函数声明,name的值为doSomething。而doAnotherThing被赋值为一个匿名函数,name为doAnotherThing。

特殊情况下的名字属性(Special Cases of the name Property)

函数声明和函数表达式的name属性是容易知道的,ES6确保所有的函数都有合适的名字。看下面的代码:

var doSomething = function doSomethingElse() {
    //...
};

var person = {
    get firstName() {
        return "Zakas"
    },
    sayName: function() {
        console.log(this.name);
    },
};

console.log(doSomething.name);  //  doSomethingElse
console.log(person.sayName.name);  //  sayName
console.log(person.firstName.name);  //  get firstName

上面的例子中,doSomething.name的值为doSomethingElse,因为函数表达式有name属性,并且函数表达式的name属性优先级高于变量的name属性。person.sayName.name的值为sayName,这个容易理解。然后person.firstName是一个getter函数,为了跟普通函数区分开,加了一个get前缀。如果是setter函数,那么要加上一个set前缀。还有几种其他特殊情况:

var doSomething = {
    //...
};

console.log(doSomething.bind().name);  //  bound doSomething
console.log((new Function()).name);  //  anonymous 

用bind创建的函数的名字属性以bound开头,而用Function构造函数创建的函数的名字属性为anonymous。

函数的名字属性主要用来调试的,不要试图用name属性去访问函数。

时间: 2024-10-09 23:45:37

《理解 ES6》阅读整理:函数(Functions)(五)Name Property的相关文章

《理解 ES6》阅读整理:函数(Functions)

对于任何语言来说,函数都是一个重要的组成部分.在ES6以前,从JavaScript被创建以来,函数一直没有大的改动,留下了一堆的问题和很微妙的行为,导致在JavaScript中使用函数时很容易出现错误并且可能需要多余的代码实现一些基本的函数行为.在ES6中,函数有一个质的飞跃的改进,它充分考虑到过去数年间JavaScript开发者的需求和抱怨.与ES5相比,在ES6中使用函数开发不容易出错,而且更加灵活. 带默认参数的函数(Functions with Default Parameter Val

《深入理解ES6》 PDF中英文+《ES6标准入门第3版》PDF分析

ES6是ECMAScript标准十余年来变动最大的一个版本,其中添加了许多新的语法特性,既有大家耳熟能详的Promise,也有闻所未闻的Proxy代理和Reflection反射:既有可以通过转译器(Transpiler)等方式在旧版本浏览器中实现兼容的let.const.不定参数.展开运算符等功能,亦有无论如何都无法实现向前兼容的尾调用优化.深入理解ES6的特性对于所有JavaScript开发者而言至关重要,在可预见的未来,ES6中引入的语言特性会成为JavaScript应用程序的主流特性,这也

理解ES6的模块(Understanding ES6 Modules)

理解ES6的Modules 原文出处: Understanding ES6 Modules. 基础(Basic) 在ES6中,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的, 除非你显示的使用export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个. ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export. 相似的, 如果想要使用来自另外一个模块中的变量,

ES6系列四 函数的扩展

一丶ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 二丶与解构赋值结合 function fetch(url, { body = '', method = 'GET', headers = {} }

ES6 入门系列 - 函数的扩展

1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的

asp.net MVC helper 和自定义函数@functions小结

asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们的开发效率,减少开发bug的出现. Razor 采用的是@ 尾巴符号,正是这个符号成就了Mvc开发效率的提升.下面了解一下和@相关的两个可以重用的helper.functions. 作为现代化的程序员,我们尽可能的遵守一个原则.不要重复你自己.所以能够重构的代码我们都会合并,但是这是对于后台代码C#

【Python笔记】如何理解python中的generator functions和yield表达式

本篇笔记记录自己对Python的generator functions和yield表达式的理解. 1. Generator Functions Python支持的generator functions语法允许我们定义一个行为与iterator类似的函数,它可以被用在需要循环调用的场合.与普通函数相比,generator functions只是在函数定义中多了1个yield表达式,除此之外,没有其它特别之处. 当generator函数被创建时,python解释器会自动为它实现iteration p

理解 ES6 Generator-next()方法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>generator-next</title> 6 </head> 7 <body> 8 9 <h3>理解 ES6 Generator-next() 方法</h3> 10 11 <scr

ES6基础整理(1)

刚开始用vue,很多时候我们都会把ES6这位大兄dei加入我们的技术栈中.但是ES6那么多那么多特性,我们真的需要全部都掌握吗?掌握好常用的.有用的这个可以让我们的开发快速起飞. 接下来我们就聊聊ES6基础常用的知识的总结. es6中的声明变量的方式: // let // 1. let声明变量不可以进行重复声明 // 2. let声明的变量有块级作用域 // const // 声明的叫做常量 // 1. const声明变量不可以进行重复声明 // 2. const声明页有块级作用域 // 3.