Разница между анонимной функцией и именованной функцией как значением для ключа объекта

Question

Я скомпилировал JSX для JavaScript с помощью Babel-компилятора. Вот фрагмент кода, в котором я заинтригован.

getInitialState: function getInitialState() { 
//List out different states that ListComponent could possibly have 
return { 
    showList: true, 
    listType: this.props.type 

После компиляции JSX к JS, getInitialState является метод назван getInitialState(). Я не мог понять, почему это не анонимный метод.

Оригинальный код:

getInitialState: function() { 
//List out different states that ListComponent could possibly have 
return { 
    showList: true, 
    listType: this.props.type 

Есть ли какие-либо преимущества производительности писать, как это?

Answer 1

Невозможно достичь производительности, за исключением, может быть, времени загрузки из-за размера файла.

Именование других анонимных функций помогает устранить проблемы, поскольку эти имена отображаются в трассировке стека ошибок в большинстве браузеров.

This видео отлично справляется с объяснением того, что происходит, когда вы задаете имена анонимным функциям.

Также это поведение было включено в спецификацию языка ECMA262 ES6. Вы можете проверить это here.

Answer 2

Спецификация ES6 определяет множество мест, где явно задано имя анонимной функции на основе контекста функции, даже если имя функции явно не определено. Вот несколько примеров.

12.2.6.9:

var o = {foo: function(){}}; 
o.foo.name === 'foo'; 

12.14.4:

var foo; 
foo = function(){}; 
foo.name === 'foo'; 

12.14.5.2:

var {foo = function(){}} = {}; 
foo.name === 'foo'; 

var [foo = function(){}] = []; 
foo.name === 'foo'; 

12.14.5.3:

var foo; 
([foo = function(){}] = []); 
foo.name === 'foo' 

12.15.5.4:

var foo; 
({foo = function(){}} = {}); 
foo.name === 'foo' 

13.3.1.4:

let foo = function(){}; 
foo.name === 'foo' 

13.3.2.4:

var foo = function(){}; 
foo.name === 'foo' 

13.3.3.6:

function fn([foo = function(){}]){ 
    foo.name === 'foo'; 
} 
fn([]); 

function fn2({foo = function(){}}){ 
    foo.name === 'foo'; 
} 
fn2({}); 

14.1.19:

export default function(){}; 

import foo from './self'; // Made-up circular ref. 
foo.name === 'default'; 

14.3.9:

var o = {foo(){}}; 
o.foo.name === 'foo'; 
class cls {foo(){}}; 
cls.prototype.foo.name === 'foo';