正文

揭秘JS：如何用面向对象和原型轻松实现继承

/0 浏览量
0322

JavaScript 是一种基于原型的编程语言，它没有传统面向对象语言中的类（class）概念。尽管如此，JavaScript 仍然可以通过原型链（prototype chain）实现面向对象的编程。在 JavaScript 中，继承是原型链的一个核心概念。本文将深入探讨如何使用面向对象和原型在 JavaScript 中轻松实现继承。

原型链简介

在 JavaScript 中，每个对象都有一个原型（prototype）属性，该属性指向其创建时使用的构造函数的原型对象。当尝试访问一个对象上不存在的属性或方法时，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或到达原型链的顶端（Object.prototype）。

传统方式实现继承

在传统的 JavaScript 中，我们可以通过以下几种方式实现继承：

1. 借用构造函数（Constructor Stealing）

function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function Child(name, age) {
  Parent.call(this, name); // 继承 Parent 的属性
  this.age = age;
}

var child1 = new Child("John", 18);
child1.colors.push("yellow"); // 修改 Child 的实例
console.log(child1.name); // "John"
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "yellow"]

var child2 = new Child("Jane", 20);
console.log(child2.colors); // ["red", "blue", "green"]

2. 原型链（Prototype Chain）

function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

Child.prototype = new Parent();

var child1 = new Child("John", 18);
child1.colors.push("yellow");
console.log(child1.name); // "John"
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "yellow"]

var child2 = new Child("Jane", 20);
console.log(child2.colors); // ["red", "blue", "green"]

3. 组合继承（Combination）

function Child(name, age) {
  Parent.call(this, name); // 继承 Parent 的属性
  this.age = age;
}

Child.prototype = new Parent(); // 继承 Parent 的方法

var child1 = new Child("John", 18);
child1.colors.push("yellow");
console.log(child1.name); // "John"
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "yellow"]

var child2 = new Child("Jane", 20);
console.log(child2.colors); // ["red", "blue", "green"]

ES6 中的继承

随着 ES6 的发布，JavaScript 引入了类（class）和继承（extends）的概念，使得面向对象编程更加简单直观。

class Parent {
  constructor(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
}

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

var child1 = new Child("John", 18);
child1.colors.push("yellow");
console.log(child1.name); // "John"
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "yellow"]

var child2 = new Child("Jane", 20);
console.log(child2.colors); // ["red", "blue", "green"]

总结

在 JavaScript 中，虽然没有传统面向对象语言的类（class）概念，但我们可以通过原型链和 ES6 中的类（class）实现面向对象的编程。通过以上方法，我们可以轻松地在 JavaScript 中实现继承。希望本文能帮助您更好地理解 JavaScript 中的继承机制。

-- 展开阅读全文 --