JavaScript 中的对象、原型和类

这篇文章最初发表在attacomsian.com/blog上。

JavaScript 基于简单的面向对象编程模型，对象是该语言的基本组成部分。JavaScript 中几乎所有内容都是对象。与 Java 等其他面向对象编程语言不同，JavaScript 对象非常灵活。

对象

对象是键值对的集合，这些键值对被称为属性。属性的键是字符串或符号（也称为属性名），值可以是任何值。在 JavaScript 中有多种创建对象的方法。最简单、最流行的方法是使用对象字面量语法：

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29 
};

对象也可以使用new 运算符来创建。该new关键字可以与内置Object构造函数或用户定义的构造函数一起使用：

// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;

// user-defined constructor function
function User(fisrtName, lastName, age) {
    this.fisrtName = fisrtName;
    this.lastName = lastName;
    this.age = age;
};

const user = new User('John', 'Doe', 29);

属性的值也可以是函数。这样的属性被称为方法：

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29,
    fullName: function () {
        return `${this.fisrtName} ${this.lastName}`;
    }
};

可以使用点 ( .) 符号和方括号 ( []) 符号访问属性值：

// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29

// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John

您可以通过分配值来向现有对象添加新属性：

user.country = 'United States';

// method can also be added
user.ageRange = function() {
    return `${this.age - 5}-${this.age + 5}`;
}

要从对象中删除属性，请使用delete运算符：

delete user.age;

要遍历对象的所有键，我们可以使用for...in循环：

for (const key in user) {
    console.log(user[key]);
}

对象字面量语法只能用于创建单个对象。要创建同一类型的多个对象，必须使用对象构造函数：

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');

我们不能直接给对象构造函数赋值来添加新的属性和方法。必须在对象构造函数内部添加新属性：

Animal.color = 'Red'; // wrong way

// correct way
function Animal(name, icon, color) {
    // ...
    this.color = color;
};

原型

JavaScript 中的所有对象都从另一个名为原型的对象继承属性和方法。prototype原型允许我们向现有对象的构造函数添加新的属性和方法。新属性将在指定类型的所有实例之间共享，而不仅仅是对象的一个实例。

Animal让我们通过原型向所有类型的对象添加新属性：

// add property
Animal.prototype.color = 'White';

// add method
Animal.prototype.meow = function() {
    if(this.name === 'Cat') {
        return `${this.name} can meow!`;
    } else {
        return `${this.name} cannot meow!`;
    }
}

现在上面的cat和rabbit对象具有属性color和方法meow()，因为prototype的Animal具有它们：

console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!

如果您想prototype通过特定类型的实例访问共享属性，可以__proto__使用一个属性。通过此属性，您可以修改现有的原型属性，甚至添加新属性。由于该prototype属性在所有实例之间共享，因此对一个实例的prototype属性或方法所做的更改将反映在所有实例中：

cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;

console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true

与对象类似，prototype可以使用delete运算符删除属性或方法：

delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;

console.log(rabbit.eatMeat); // undefined

如上所示，prototype属性是 JavaScript 对象基础的核心部分。对此属性的任何更改都会影响该特定对象类型的所有实例。

课程

JavaScript 中的 ES6（ECMA2015）引入了类的概念。在面向对象编程范式中，类是创建具有属性和方法的对象的一种蓝图，它封装了用户的实现细节。然而，JavaScript 中并不存在真正的类的概念。

JavaScript 类只不过是现有基于原型的继承和构造函数的语法糖。让我们看一个例子：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `👋 ${this.name}!`;
    }
}

现在如果我们想要创建一个新的类实例Person，我们必须使用new运算符：

const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!

当我们创建一个Person类的对象时，类构造函数执行以下操作：

创建一个名为的新函数Person，并将构造函数内声明的所有属性复制到其中（name和age）。
将类的所有方法（例如sayHi()）添加到Person.prototype属性。

之后，当我们调用对象的任何方法时，它都会从prototype属性中获取。

概括

对象是 JavaScript 语言的重要组成部分。JavaScript 中几乎所有的东西都是对象。

对象是键值对属性的集合。对象可以通过对象字面量语法或对象构造函数语法创建。
每当在 JavaScript 中创建一个新函数时，JavaScript 引擎都会自动prototype为其附加一个属性。对该属性的更改将在特定对象类型的所有实例之间共享。这是一种向现有对象构造函数添加新属性的好方法。
ES6 为 JavaScript 带来了类，这只不过是一种利用原型功能编写构造函数的新方法。

如果您想了解有关对象的更多信息，这里有一个深入的MDN 指南，解释了如何使用对象、属性和方法。

✌️ 我撰写有关现代 JavaScript、Node.js、Spring Boot以及所有Web 开发方面的文章。订阅我的新闻通讯，每周获取 Web 开发教程和专业技巧。

喜欢这篇文章吗？ 请在 Twitter 上关注 @attacomsian。你也可以在LinkedIn和DEV上关注我。

鏂囩珷鏉ユ簮锛�https://dev.to/attacomsian/objects-prototypes-and-classes-in-javascript-3i9b