在面向对象 JavaScript 中创建对象的 3 种方法

1. 使用对象字面量

2. 使用对象构造函数

3. 使用原型继承

总结

（本文最初发表于我的博客，链接 在此 ）。

JavaScript 是一种功能强大的编程语言，支持面向对象编程 (OOP)。

事实上，在 JavaScript 中，对象占据主导地位——从字符串和数组等核心功能到使用该语言构建的浏览器 API。

居住在美国的网页开发人员Bautista热衷于教人们编程，他强调“要将你的 JavaScript 技能提升到一个新的水平，你需要了解这门语言的面向对象特性”。

以下是面向对象 JavaScript (OOJS) 编程中创建对象的三种方法：

1. 使用对象字面量

在面向对象编程中，对象字面量指的是用花括号括起来的以逗号分隔的名称-值对列表。

名称是字符串，值是 JavaScript 中可用的任何原始数据类型，例如数组、字符串、数字、函数等等。

通常，对象字面量用于封装代码并将其有序地打包。这样可以避免与全局作用域中的变量和对象发生冲突。

使用对象字面量，您可以将属性和方法集中在一起，使您的代码简洁明了。

以下是一个例子：

var liveedu = {
  //declaring properties
student: "james",
  //declaring methods
watch: function() {
    console.log("learn new tech skills");
  },
};
//accessing methods and properties
liveedu.watch();
//output is learn new tech skills

JavaScript 对象字面量是单例，它们允许你方便灵活地创建对象。

它们可以帮你避免编写过多的代码行。

例如，您可以将对象直接放置在工作区中的任何位置，而无需进行任何预先设置，它仍然可以正常工作——这非常有用！

虽然对象字面量很重要，但它们不支持实例化或继承。

如果你想使用这些功能，你需要使用其他方法来创建对象。

2. 使用对象构造函数

构造函数是创建JavaScript 对象最常用的技术，它依赖于原型继承来利用彼此的功能。

这些函数的一个关键特点是它们可以被实例化和继承。

让我们来看一个如何在面向对象 JavaScript 中使用构造函数的例子。

function Liveedu(student) {

      // properties

    this.student = student;

    // methods

    this.watch = function() {

      console.log(this.student + "learns new tech skills");

    }
}

// instantiating the object

var liveedu = new Liveedu("James ");

// accessing methods and properties

liveedu.watch(); //output is James learns new tech skills

console.log(Object.getPrototypeOf(liveedu)); // output is object

以下是上述代码的运行情况：

• 构造函数的创建方式与普通函数类似。不同之处在于，构造函数使用关键字`this`来声明属性和方法。在本例中， `this`表示当前处于`Liveedu`函数作用域内的对象。

• 使用`new`运算符创建一个名为`liveedu` 的新对象。通常，`new`会将新创建的对象绑定到被调用构造函数中的`this`运算符。因此，这种绑定使得`liveedu`对象能够获取构造函数的属性和方法。

• liveedu对象有一个名为prototype 的属性，所有继承的成员都定义在这里。因此，当调用像watch()这样的函数时，浏览器会沿着对象链向上查找，并检查它们各自的 prototype 属性，直到找到所需的值。

3. 使用原型继承

JavaScript 对象也可以使用原型继承的概念来创建。

大多数现代浏览器使用名为proto 的特殊属性来实现原型，其发音为dunder proto（双下划线 prototype 的缩写）。

让我们用以下示例来说明如何在原型继承中使用proto 。

var liveedu = { 

    student: "james",

    watch: function() {

        return this.student + " is learning new skills";
    }
}

var livecoding = { 

    student: "felix",

    watch: function() {

        return this.student + " is learning new skills";
    }
}

如上文代码所示，这两个对象都有类似的方法，这使得代码看起来冗余。

因此，为了使对象共享同一个watch方法，我们可以使用proto原型属性。

换句话说，我们可以使用原型来扩展对象的属性。

以下是上述代码的重写版本：

var WatchProto = {

    watch: function() {

        return this.student + " is learning new skills";
    }

}

var liveedu = { 

    student: "james",

    __proto__: WatchProto

}

var livecoding = { 

    student: "felix",

    __proto__: WatchProto

}

console.log(liveedu.watch()); //james is learning new skills

console.log(livecoding.watch()); //felix is learning new skills

如上代码所示，这两个对象共享WatchProto中定义的同一个方法。liveedu和livecoding对象可以直接访问该方法，从而使代码更简洁高效。

需要注意的是，proto是 JavaScript ES6 的一种新语法，旧版浏览器可能不支持该语法。

或者，您可以使用Object.create()方法创建原型。

以下是一个例子：

var WatchProto = {

    watch: function() {

        return this.student + " is learning new skills";
    }

}

var liveedu = Object.create(WatchProto);

liveedu.student = "james";

总结

理解 JavaScript 对象是深入了解这门无处不在的语言的关键。

您在实现 JavaScript 的面向对象编程特性方面有哪些经验？

请在下方分享您的评论和问题。