前端小白别烦恼，来一起认识原型、继承与类

2023-09-12 19:12:10

踏进原型神秘世界

在JavaScript中，每个对象都有一个特殊的内置属性，叫做原型。你可以将其视为一个容器，它包含了对象的共享属性和方法。如同一个个房间，原型就像是所有对象共有的一间屋子，存放着公共的家具和物品，以便不同房间的住户取用。就像不同对象的属性和方法都存放在同一个屋子里，可以根据需要轻松调用。让我们以一个例子来说明。

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

// 原型上添加一个sayHello()方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建一个新的Person对象
const person = new Person("John");

// 访问原型方法sayHello()
person.sayHello(); // 输出: Hello, my name is John

如同上述例子，在Person这个蓝图里，对象的姓名被存放在name属性中，而sayHello()方法则被存放在prototype中，所有由Person创建的对象都可以直接使用sayHello()方法，无需在每个对象中单独定义。这就像是从屋子里取家具，方便快捷。

理解继承的本质

继承是JavaScript中的一种机制，它允许你创建一个新对象，该新对象继承了另一个对象的属性和方法。这就像是复制粘贴，把原对象的属性和方法都复制到新对象中，就像遗传一样。

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

// 继承Person原型上的sayHello()方法
Employee.prototype = Object.create(Person.prototype);

// 在Employee原型上添加一个work()方法
Employee.prototype.work = function() {
  console.log(`${this.name} is working in ${this.department}`);
};

// 创建一个新的Employee对象
const employee = new Employee("Jane", "Sales");

// 访问继承的sayHello()和work()方法
employee.sayHello(); // 输出: Hello, my name is Jane
employee.work(); // 输出: Jane is working in Sales

在上面的例子中，Employee继承了Person的属性和方法。这意味着Employee对象具有name属性和sayHello()方法，还增加了department属性和work()方法。所以，Employee对象既可以像Person对象一样打招呼，又可以表明自己在哪个部门工作。

揭秘class的诞生

在ES6中，引入了class语法，它是一种更简洁的方式来定义对象和继承。它使用了class，就像一个模具，可以用来创建相同类型的对象。

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Employee extends Person {
  constructor(name, department) {
    super(name); // 调用父类Person的构造函数
    this.department = department;
  }

  work() {
    console.log(`${this.name} is working in ${this.department}`);
  }
}

// 创建一个新的Employee对象
const employee = new Employee("Jane", "Sales");

// 访问继承的sayHello()和work()方法
employee.sayHello(); // 输出: Hello, my name is Jane
employee.work(); // 输出: Jane is working in Sales