这两种JavaScript OOP语法的用法有什么不同？

所以我用两种不同的方法创建了一个对象

第一条路：

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();

第二种方式：

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();

我测试了这两种语法，它们都能工作，但我发现只有第二种方法被更频繁地使用

所以我的问题是：

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中的OOP有点陌生，希望得到一些澄清

---

谢谢

这两种风格之间有一些区别：

• 突变：第二种方法随时间改变对象。因此，如果您在完成定义对象之前以某种方式访问了该对象，它可能看起来会有所不同。第一种方法在完全定义对象之前不会创建对象。这在语法级别上为您提供了一个很好的保证，您不会弄乱太多，这也是我喜欢该方法的一个重要原因。我倾向于尽量避免变异

• 范围：首先，定义的范围略有不同。在第二种情况下，作用域是在其中创建对象的函数。在第一种情况下，作用域是正在创建的对象。看

• 简洁：第二种方式比第一种方式略长

• 易读性和奇特属性：在某些情况下，第一种方法允许您创建比

  obj.foo=bar

  更特殊的属性定义。不过你也可以用它来做同样的事情

---

但是，在您的特定示例中，它们是相同的（只要您不在其任何函数中使用

this

或

参数），只是偏好问题。
这两种样式之间的一些差异：


突变：第二种方法随时间改变对象。因此，如果您在完成定义对象之前以某种方式访问了该对象，它可能看起来会有所不同。第一种方法在完全定义对象之前不会创建对象。这在语法级别上为您提供了一个很好的保证，您不会弄乱太多，这也是我喜欢该方法的一个重要原因。我倾向于尽量避免变异

范围：首先，定义的范围略有不同。在第二种情况下，作用域是在其中创建对象的函数。在第一种情况下，作用域是正在创建的对象。看

简洁：第二种方式比第一种方式略长

易读性和奇特属性：在某些情况下，第一种方法允许您创建比
obj.foo=bar
更特殊的属性定义。不过你也可以用它来做同样的事情


但是，在您的特定示例中，它们是相同的（只要您不在它的任何函数中使用
this
或
参数），并且只是一个偏好问题。
第二个在JavaScript中语义正确，而不是在TypeScript中，一些Linter可能会要求您提供接口或其他东西，但这不是一个错误问题，而是一个风格问题。最后，它们都做了相同的事情。
第二个在JavaScript中是语义正确的。它不是在TypeScript中，一些Linter可能会要求您提供接口或其他东西，但这不是错误问题，而是样式问题。最后，它们都做了相同的事情。
。首先：创建一个深度对象，其次：创建一个对象，然后向其中添加属性/值。否则就没有区别了。我相当肯定这两个对象是相同的。我认为更面向对象的方法应该是使用
class
。首先：创建一个深度对象，其次：创建一个对象，然后向其添加属性/值。否则就没有区别了。我相当肯定这两个对象是相同的。我认为更面向对象的方法应该是使用
class
.Hm。在那些箭头函数中，
这个
是什么？@Andy，对吗？是的，我不太清楚（非常确定它是对象，但我想确保我没有记错，范围实际上是创建函数）。更令人困惑的是，
参数
指的是什么？@Andy当直接在浏览器控制台中运行时，
这个
在箭头函数中是
窗口
对象。我知道答案：）我正在检查michael是否知道。这是我第一次在这个问题下发表评论时的链接。对不起！我复制错了，你们是对的，当TS被翻译时，这是指实际的上下文，在这个例子中是窗口。我会把它修好的。在那些箭头函数中，
这个
是什么？@Andy，对吗？是的，我不太清楚（非常确定它是对象，但我想确保我没有记错，范围实际上是创建函数）。更令人困惑的是，
参数
指的是什么？@Andy当直接在浏览器控制台中运行时，
这个
在箭头函数中是
窗口
对象。我知道答案：）我正在检查michael是否知道。这是我第一次在这个问题下发表评论时的链接。对不起！我复制错了，你们是对的，当TS被翻译时，这是指实际的上下文，在这个例子中是窗口。安迪，我会修好的