javascript在对象中命名函数

Question

Which one should I use between these two, is there one that has an advantage over the other?

// 1st
{ ["test"]() { return 1; } }

// 2nd
{ "test": function () { return 1; } }

Answer 1

"test": function () { return 1; } "test": function () { return 1; } is the old way and "test"() { return 1; } "test"() { return 1; } the new way with the function keyword being ommited.

Also note the [] here allow you to use a variable as identifier

 let name = "test1" let a = { "test2": function () { return "you called test2" }, "test3"() { return "you called test3" }, [name]() { return "you called test1" }, [name + "1"]() { return "you called " + name + "1" } } // written differently works the same console.log( a.test2() ) // "you called test2" <-- the old way declared one console.log( a.test3() ) // "you called test3" <-- new way declared one // same call console.log( a[name]() ) // "you called test1" <-- declared using console.log( a.test1() ) // "you called test1" <-- [name]() {...} // the [...] notation allow the build of identifier freely console.log( a.test11() ) // "you called test11" <-- declared using console.log( a[name + "1"]() ) // "you called test11" <-- [name + "1"]() {...} 

since Javascript like many other language tend to avoid deprecation for old program to continue working, you get to a point where one thing can be done many way

Answer 2

It allows to use variable property names:

 let propName = "test" console.log({ [propName]() { return 1 } }.test()); 

Answer 3

Advantages:

• Functions are declared normally and therefore have names. (Whereas with the {name: function() { ... }} format, all of your functions are anonymous, even though the properties referencing them have names.) Names help tools help you, from showing call stacks in a debugger, to telling you what function threw an exception. (2015 Update: The latest JavaScript specification, ECMAScript 6th edition, defines a large number of ways the JavaScript engine must infer a function's name. One of those is when the function is assigned to a property as in our {name: function() { ... }} example. So as engines implement ES6, this reason will go away.)

• Gives you the freedom of having private functions only used by your module (such as my internalSomething above). No other code on the page can call those functions; they're truly private. Only the ones you export at the end, in the return statement, are visible
  outside the scoping function.

• Makes it easy to return different functions depending on environment, if the implementation just changes completely (such as IE-vs-W3C stuff, or SVG vs. Canvas, etc.).