В чем разница в использовании этих двух синтаксисов ООП JavaScript?

Question

Итак, я создал объект двумя разными способами.

Первый путь :

const sprite = () => {
    let obj = {
        hp: 100,
        damage: () => {
            obj.hp -= 25;
        },
        heal: () => {
            obj.hp += 25;
        }
    }
    return obj;
}

let sprite1 = sprite();

Второй способ :

const sprite = () => {

    let obj = {};

    obj.hp = 100;

    obj.damage = () => {
        obj.hp -= 25;
    }

    obj.heal = () => {
        obj.hp += 25;
    }

    return obj;
}

let sprite1 = sprite();

Я протестировал оба этих синтаксиса, и они оба работают, но я вижу, что чаще используется только второй способ.

Итак, мой вопрос :

Можно ли использовать синтаксис первым способом? Есть ли причина, по которой синтаксис первого способа не получил широкого распространения? Это плохая практика, если так? Почему?

Я немного новичок в ООП в JS и ищу пояснения.

Спасибо!

Answer 1

Второй - семантически правильный в JavaScript, а не в TypeScript, некоторые Линтеры могут попросить вас указать интерфейс или что-то еще, но это не проблема с ошибкой, а проблема стиля. В конце они оба делают одно и то же.

Answer 2

Несколько различий между двумя стилями:

• Мутация : второй способ изменяет объект с течением времени. Так что, если вы каким-то образом получили доступ к объекту до того, как закончили его определение, он может выглядеть иначе. первый способ не создает объект до тех пор, пока он не будет полностью определен. Это дает вам хорошую гарантию на уровне синтаксиса, что вы не можете так много испортить, и это серьезная причина, по которой я предпочитаю этот метод. Я стараюсь избегать мутаций, когда могу.

• Область применения : во-первых, область определений немного отличается. во второй области видимости - это функция, в которой создается объект. В первой области видимости - это объект, который создается. См. Функция стрелки против объявления / выражения функции: являются ли они эквивалентными / заменяемыми?

• Краткость : второй путь немного длиннее первого.

• Итеративность и причудливые свойства : в некоторых случаях первый способ позволяет создавать специальные определения свойств, которые ведут себя немного иначе , чем obj.foo = bar. Вы можете использовать Object.defineProperty(), чтобы сделать то же самое.

Однако в вашем конкретном примере они идентичны (если вы не используете this или arguments ни в одной из его функций), и это просто вопрос предпочтений.