javascript关于函数名称【Function.name】

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

函数名称

当你定义一个函数之后，函数的名称会是什么？函数会有很多不同的场景。在ES5之前对了函数名称没有明确的要求。在ES6中有了明确的定义。今天我们来一起看看有几种不同的场景。对应的函数名称分别是什么？

Function的name属性是不可写、不可枚举、可配置的，在es5之前configurable也为false

匿名函数 name=''

匿名函数顾名思义就是没有名字的函数。单独运行会报错。需要在外层包裹括号。

(function(){ console.log('test')})
(function*(){ console.log('test')})

类相关的函数 name=类名

类的name为类名。类下面的方法的name为方法名。但是需要注意的一点是，拥有static name的类名字会被覆盖。

class Test { 
 constructor() {  } 
 demo() {   } 
} 
console.log(Test.name) // Test
console.log(new Test().constructor.name) // Test
console.log(new Test().demo.name) // demo

如下面例子所示，使用static name()方法Foo.name不再保存实际的类名称，而是引用name()函数对象。

class Foo {
  constructor() {}
  static name() {}
}

对象中的name

对象中的数据种类比较多。正常的函数、箭头函数、赋值函数。基本的几种返回都和预期一样。需要注意的是如果把一个有名字的函数赋值给一个键。则该键返回的name为函数的名字。obj.jjj.name='ggg'。

let obj = {
  aaa() {}, // aaa
  *bbb() {},// bbb
  ccc: () => {},// ccc
  ddd: function () {},// ddd
  ["e" + "ee"]: function () {},// eee
  [Symbol("fff")]: function () {},// ''
  jjj:function ggg(){},// ggg
};

Symbol作为函数的名称

如果[Symbol]被用于函数名称，并且这个 symbol 具有相应的描述符，那么方法的名字就是方括号中的描述符。

var sym1 = Symbol("foo");
var sym2 = Symbol();
var o = {
  [sym1]: function(){},// "[foo]"
  [sym2]: function(){}// ""
};

get和set

当通过 [get]和 [set]访问器来存取属性时，"get" 或 "set" 会出现在函数名称前。

var o = {
  get foo(){},
  set foo(x){}
};

var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
descriptor.get.name; // "get foo"
descriptor.set.name; // "set foo";

bind

使用bind方法返回的函数。其名字前面会被添加bound

var x = o.foo.bind(o); // bound foo
(function () {}.bind(o)); // bound

其他几种方式的name值

export default function () {} // default
var y = new Function(); // anonymous
var GeneratorFunction = function* () {}.__proto__.constructor; // GeneratorFunction
var z = new GeneratorFunction(); // name: anonymous