超越ES5：拥抱JavaScript构造函数和原型的力量

2023-12-06 16:23:16

在JavaScript王国中，构造函数和原型是构建对象、实现继承以及赋予对象独特行为和属性的基石。让我们踏上一次探索之旅，深入了解这些概念在ES5和ES6中的演变，并揭示它们如何提升您的JavaScript编程能力。

构造函数：对象的蓝图

构造函数在JavaScript中扮演着至关重要的角色，它是一个用于创建对象的蓝图或模板。它接受参数，根据这些参数创建并初始化一个新对象。构造函数名称通常以大写字母开头，以区别于普通函数。

在ES5中，我们使用new来调用构造函数并创建对象：

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

let person = new Person("John", 30);

在ES6中，class关键字引入了对类的支持，它本质上是一种语法糖，简化了构造函数的创建和使用：

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

let person = new Person("John", 30);

原型：对象的骨干

原型是JavaScript中一个强大的机制，它允许对象继承来自其他对象的属性和方法。每个构造函数都有一个原型属性，指向一个对象，该对象包含所有由该构造函数创建的对象共享的属性和方法。

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

以上代码片段添加了一个greet方法到Person构造函数的原型中。这意味着所有由Person构造函数创建的对象都可以访问greet方法：

person.greet(); // 输出: Hello, my name is John!

继承：对象家族的纽带

继承是面向对象编程中一项关键特性，它允许子类继承父类的属性和方法。在JavaScript中，通过原型链实现继承。

function Employee(name, age, salary) {
  Person.call(this, name, age); // 调用父类构造函数
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype); // 继承父类原型
Employee.prototype.constructor = Employee; // 重置构造函数指针