Javascript объект, инициализированный несколькими функциями: какой это синтаксис? - PullRequest
Новая
       2

Javascript объект, инициализированный несколькими функциями: какой это синтаксис?

0 голосов
/ 12 марта 2020

Я рассматриваю код Javascript и наткнулся на синтаксис, который я не знал. Это приложение React и Redux, хотя я думаю, что это просто Javascript.

Синтаксис, который меня интересует, это аргумент { f1(), f2(), ... } combineReducers().

This это синтаксис: 

combineReducers({
  Reducer1,
  Reducer2,
  ...
});

ReducerN является функцией, то есть: 

const Reducer1 = (state = INITIAL_STATE, action) => {
  // ...
};

Я получаю { f1(), ... } создает объект, где имя функции является ключом, а сама функция является значение, поэтому в консоли браузера я попробовал следующее: 

a = () => { console.log(1) }
b = () => { console.log(2) }
o = {a, b}

и если я напечатаю o: 

{a: ƒ, b: ƒ}
a: () => { console.log(1) }
b: () => { console.log(2) }
__proto__: Object

Но если я попытаюсь инициализировать o в одном операция: 

o = { () => return 1 }

или 

o = { function y() { return 1 }}

они оба дают синтаксическую ошибку.

Впервые вижу объект, созданный с таким синтаксисом: который? Где я могу найти его ссылку?

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

{ f1() } очень отличается от { f1 }.

Последний является сокращением { f1: f1 }, которое представляет собой объект с ключом 'f1' (строка), связанным со значением f1 (функция). Функция не выполнена.

В первом примере f1() - это вызов функции. Функция f1 выполняется и вместо нее используется возвращаемое значение. Но поскольку вы не указали ключ для сопоставления значения и поскольку f1() - это значение, которое не имеет имени (это выражение, которое необходимо оценить, чтобы получить его значение), JS не может создать из него объект.

{ f1 } может быть вычислено во время компиляции и превращено в { f1: f1 }.
{ f1() } не может быть оценено во время компиляции. Значение f1() доступно только во время выполнения.

Вот почему { f1() } является недопустимым кодом.

Если вам нужно вызвать f1 и использовать возвращаемое значение чтобы создать объект, вы можете сделать это следующим образом: 

const x = { f1: f1() }

Это то же самое, что и: 

const v = f1();
const x = { f1: v }
0 голосов
/ 12 марта 2020

Как было сказано ранее, 

combineReducers({
  Reducer1,
  Reducer2,
  ...
});

эквивалентно этому на простом ES5: 

combineReducers({
  Reducer1: Reducer1,
  Reducer2: Reducer2,
  ...
});

и combineReducers касается только значений передаваемого объекта в . Первая форма - это просто сокращение для определения свойств с тем же именем, что и значение. По этой причине вы не можете использовать анонимные функции в этой форме. Чтобы определить члены-функции в классах и объектах, вы можете использовать следующую форму: 

class Foo {
    foo() { console.log('foo'); }
    bar = () => console.log('bar')
}

const a = new Foo();
a.foo();
a.bar();

const b = {
    foo() { console.log('foo'); }
    bar: () => console.log('bar')
};

b.foo();
b.bar();

При переносе на обычный ES5 это сгенерирует следующее: 

"use strict";
var Foo = /** @class */ (function () {
    function Foo() {
        this.bar = function () { return console.log('bar'); };
    }
    Foo.prototype.foo = function () { console.log('foo'); };
    return Foo;
}());

var a = new Foo();
a.foo();
a.bar();

var b = {
    foo: function () { console.log('foo'); },
    bar: function () { return console.log('bar'); }
};

b.foo();
b.bar();
...