object 和 object 在 Z686155AF75A60A0F6E9D80C1F7EDD3 中有什么区别？

Question

我在工作和学校学习 JavaScript 和 Java。 据我所知，在 Java 中，您总是有一个 class 并且您可以从该 class 中创建对象。 在 JavaScript 中同样有效，但是：在 JavaScript 中，可以创建没有类的对象。

所以我的问题是：JavaScript 中这两种对象有什么区别？

class Test {
    say() {
        console.log("I'm a test.");
    }
}

let TestFromClass = new Test();

let TestFromObject = {
    say() {
        console.log("I'm also a test.");
    }
};


TestFromClass.say();    // Output: I'm a test.
TestFromObject.say();   // Output: I'm also a test.

现在我想知道它们是否有区别，或者我们是否真的需要 JavaScript 中的类。

Answer 1

当您使用new时，您构造了一个新的 object，其内部原型是类的原型。 例如：

 class Test { say() { console.log("I'm a test."); } } let TestFromClass = new Test(); console.log(Object.getPrototypeOf(TestFromClass) === Test.prototype);

当您需要创建多个对象时，这很有用。 Usually, such objects are created because they'll have some sort of state associated with each individual object, usually in the form of properties on the object (eg, a person object might have a name and an age property).

但是，如果您没有与实例关联的任何数据（在您的示例中为TestFromClass对象），那么拥有一个实例根本没有多大意义。

如果您只想将命名函数收集到数据结构中，那么您的TestFromObject比 class 更有意义。

也就是说，您可能想要一个 class 有一些与之关联的功能（比如say ），这些功能与其数据的实例没有任何关系，同时仍然能够创建一个实例，也许还有其他方法原型。 这并不少见，可以通过创建与实例无关的函数static ：

 class Person { static canEat() { return ['apples', 'bananas', 'carrots']; } constructor(name, age) { this.name = name; this.age = age; } } const p = new Person('Bob', 99); console.log(p.name); console.log(Person.canEat());

Answer 2

object 和 object 在 Z686155AF75A60A0F6E9D80C1F7EDD3 中有什么区别？

在一般意义上，实际上没有。 不过，有些事情可能看起来有点像差异：

• 当您使用文字语法创建 object 时，除非您使用特殊的__proto__属性（仅限官方浏览器），否则其原型将始终为Object.prototype 。 当您使用new X创建它时，假设X是一个使用class语法创建的构造函数 function ，结果将具有原型X.prototype 。
• 在 object 文字中定义的方法直接放在 object 上。 class X go 中的方法在X.prototype （非static的）上继承了 ZA8CFDE633111BD59EB2AC96F。

Answer 3

对象有两种 forms：声明性（文字）形式和构造形式。

object 的文字语法如下所示：

var myObj = {
    key: value
    // ...
};

构造的表单如下所示：

var myObj = new Object();
myObj.key = value;

构造形式和字面形式的结果完全相同，即 object。 唯一的区别是您可以在文字声明中添加一个或多个键/值对，而对于构造形式的对象，您必须一个接一个地添加属性。

注意：使用“构造形式”来创建刚刚显示的对象是非常罕见的。 您几乎总是希望使用文字语法形式。 大多数内置对象也是如此。

PS要详细阅读 go 到https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/this-object-prototypes/ch3.md

Answer 4

首先，class（几乎）只是原型的语法糖：

// The class way
class Test {
  say() {
    console.log("I'm a test.");
  }
}


// The old fashioned way
function Test() {

}

Test.prototype.say = function () {
  console.log("I'm a test.");
};

这两种情况与直接创建 object 的区别在于方法属于原型，而不是直接属于 object。

当您使用TestFromClass.say()时，它会通过原型链找到say方法，而 TestFromObject 直接拥有该方法。

除此之外，没有任何区别。

Answer 5

因此，您创建了一个名为Test的 class，它是基础 class。 您添加了一个名为say() {}的方法。

class Test {
    say() {
        console.log("I'm a test.");
    }
}

然后，您在下面创建了Test class 的实例：

let TestFromClass = new Test();

在下面，您创建了一个名为TestFromObject ：

let TestFromObject = {
    say() {
        console.log("I'm also a test.");
    }
};

是的，他们都会打印出 output 您必须使用他们的方法：

TestFromClass.say();    // Output: I'm a test.
TestFromObject.say();   // Output: I'm also a test.

在您充分利用您创建的 class 的全部功能之前，差异不会开始，例如，使用cconstructor() function，如下所示：

class Test {
    constructor() {

    }
    say() {
        console.log("I'm a test.");
    }
}

现在，当我们为 class 名称使用new关键字时，会自动为我们调用构造函数 function。 使用构造函数 function 您知道也可以像这样访问this ：

class Test {
    constructor() {
      this.type = 'test';
    }
    say() {
        console.log("I'm a test.");
    }
}

它允许您这样做：

TestFromClass.say();    // Output: I'm a test.
TestFromObject.say();   // Output: I'm also a test.
TestFromClass.type;     // Output: test

传统上，构造函数用于在 class 或 class 的特定实例中进行一些初始设置。

在创建 class 的新实例时，构造函数通常通过使用一些 arguments 来使用。 也许您想指定您创建的 Test 的 class 有 50 个问题。 您可以将 object 传递给新的测试实例，如下所示：

let TestFromClass = new Test({ questions: 50 });

您可以随意调用此 object，我们只需调用 object examination ，您可以设置此examination的题数 object。

所以现在你将 object 传递给构造函数 function 并调用 object， examination如下：

class Test {
    constructor(examination) {
      this.questions = examination.questions;
      this.type = 'test';
    }
    say() {
        console.log("I'm a test.");
    }
}

let TestFromClass = new Test({ questions: 50 });

TestFromClass.say();    // Output: I'm a test.
TestFromClass.type;     // Output: test
TestFromClass.questions; // 50

您可以使用 class object 做的另一件事是创建一个子类，该子类将扩展您的基础 class 的功能，然后您还可以向其添加一些自定义功能。

class Test {
    constructor(examination) {
      this.questions = examination.questions;
      this.type = 'test';
    }
    say() {
        console.log("I'm a test.");
    }
}

class Quiz extends Test {

}

因此，现在您的测验正在继承测试 class 中的所有方法、函数、属性等，并在其中定义其他方法。

class Test {
    constructor(examination) {
      this.questions = examination.questions;
      this.type = 'test';
    }
    say() {
        console.log("I'm a test.");
    }
}

class Quiz extends Test {
    constructor(examination) {
    this.topic = examination.topic;
  }
}

因此，现在要确保也调用来自父 class 的构造函数 function，我可以在构造函数中使用super()关键字：

class Test {
    constructor(examination) {
      this.questions = examination.questions;
      this.type = 'test';
    }
    say() {
        console.log("I'm a test.");
    }
}

class Quiz extends Test {
    constructor(examination) {
    super(examination)
    this.topic = examination.topic;
  }
}

然后你可以像这样实例化那个子类：

const javascript = new Quiz({topic: 'javascript', questions: 50 });

最后打印出来：

javascript.questions; // Output: 50