原文: http://zetcode.com/javascript/createobject/

JavaScript 创建对象教程展示了如何在 JavaScript 中创建对象。 可以使用对象字面值,函数构造器或类定义来创建对象。 通常使用创建性生成器和工厂设计模式来创建对象。

在本教程中,我们使用 Node.js 执行示例。

对象字面值

在对象字面值表示法中,我们将用逗号分隔的对象属性放在大括号{}中。

属性名称和值用冒号分隔。

object_literal.js

  1. const person = {
  2. firstName: 'John',
  3. lastName: 'Doe',
  4. email: 'jdoe@example.com',
  5. info: function() {
  6. return `${this.firstName} ${this.lastName}, ${this.email}`
  7. }
  8. };
  9. console.log(person.info());

该示例使用字面值表示法创建一个对象。

  1. $ node object_literal.js
  2. John Doe, jdoe@example.com

这是输出。

对象构造器

可以使用new Object()构造器创建对象。 然后使用点运算符动态添加属性。

object_constructor.js

  1. let person = new Object();
  2. person.firstName = "John";
  3. person.lastName = "Doe";
  4. person.email = 'jdoe@example.com';
  5. person.info = function(){
  6. return `${this.firstName} ${this.lastName}, ${this.email}`;
  7. };
  8. console.log(person.info());

该示例使用Object构造器创建一个对象。

函数构造器

使用function关键字创建函数构造器。 它以值作为参数。 使用this关键字设置属性。 使用thisfunction关键字创建方法。 使用new关键字创建新对象。

function_constructor.js

  1. function Person(firstName, lastName, email) {
  2. this.firstName = firstName;
  3. this.lastName = lastName;
  4. this.email = email;
  5. this.info = function() {
  6. return `${this.firstName} ${this.lastName}, ${this.email}`;
  7. }
  8. }
  9. let person = new Person('John', 'Doe', 'jdoe@example.com');
  10. console.log(person.info());

该示例使用函数构造器创建一个对象。

类定义

对象用class关键字定义,并用new关键字生成。 这是创建从诸如 C# 或 Java 之类的语言已知的对象的经典方法。 JavaScript 使用constructor关键字定义对象构造器。 使用this关键字设置属性。

class_definition.js

  1. class Person {
  2. constructor(firstName, lastName, email) {
  3. this.firstName = firstName;
  4. this.lastName = lastName;
  5. this.email = email;
  6. }
  7. info() {
  8. return `${this.firstName} ${this.lastName}, ${this.email}`;
  9. }
  10. }
  11. let person = new Person('John', 'Doe', 'jdoe@example.com');
  12. console.log(person.info());

该示例使用类定义创建对象。

构建器模式

构建器模式是一种用于创建对象的创新性设计模式。 它通过提供逐步的方法,使用简单的对象来构建复杂的对象。 构建器模式使用流利的 API 创建对象。

builder_pattern.js

  1. let Person = function (firstName, lastName, email) {
  2. this.firstName = firstName;
  3. this.lastName = lastName;
  4. this.email = email;
  5. }
  6. let PersonBuilder = function () {
  7. let firstName;
  8. let lastName;
  9. let email;
  10. return {
  11. setFirstName: function (firstName) {
  12. this.firstName = firstName;
  13. return this;
  14. },
  15. setLastName: function (lastName) {
  16. this.lastName = lastName;
  17. return this;
  18. },
  19. setEmail: function (email) {
  20. this.email = email;
  21. return this;
  22. },
  23. info: function () {
  24. return `${this.firstName} ${this.lastName}, ${this.email}`;
  25. },
  26. build: function () {
  27. return new Person(firstName, lastName, email);
  28. }
  29. };
  30. };
  31. var person = new PersonBuilder().setFirstName('John').setLastName('Doe')
  32. .setEmail('jdoe@example.com');
  33. console.log(person.info());

该示例使用构建器设计模式创建一个对象。

工厂模式

使用工厂模式,我们可以在不将创建逻辑暴露给客户端的情况下创建对象。

factory_pattern.js

  1. const personFactory = (firstName, lastName, email) => {
  2. return {
  3. firstName: firstName,
  4. lastName: lastName,
  5. email: email,
  6. info() {
  7. return `${this.firstName} ${this.lastName}, ${this.email}`;
  8. }
  9. };
  10. };
  11. let person = personFactory('John', 'Doe', 'jdoe@example.com');
  12. console.log(person.info());

该示例使用工厂模式创建一个对象。

在本教程中,我们使用不同的语法创建了 JavaScript 对象。 我们还介绍了两种创新的设计模式,即构建器模式和工厂模式。

您可能也对以下相关教程感兴趣: JavaScript 构建器模式教程,或列出所有 JavaScript 教程