JavaScript如何玩转继承

2023-12-04 11:28:42

代码分享：体现js灵活性的def.js

前言

JavaScript 作为一门灵活的脚本语言，在网页开发中发挥着至关重要的作用。它不仅可以实现页面的交互，还能进行复杂的数据处理和动画效果。今天，我们就来探讨一个 JavaScript 中非常有趣的概念——继承，并通过一个实际的例子来演示 JavaScript 是如何实现继承的。

什么是继承？

在面向对象编程中，继承是一种重要的概念。它允许一个类（子类）从另一个类（父类）继承属性和方法。这样，子类就可以复用父类中的代码，从而减少重复的开发工作，提高代码的可维护性。

JavaScript 中的继承

JavaScript 中的继承可以通过多种方式实现，其中最常见的一种是通过原型链来实现的。原型链是一种特殊的对象链接机制，它允许一个对象访问另一个对象中的属性和方法。

在 JavaScript 中，每个对象都具有一个原型对象，这个原型对象可以通过 [[Prototype]] 属性来访问。原型对象也是一个对象，它也具有自己的原型对象，如此递归下去，直到遇到一个原型对象为 null 为止。

一个实际的例子

为了更好地理解 JavaScript 中的继承，我们来看一个实际的例子。我们有一个 Person 类，它具有 name 和 age 属性，以及一个 greet 方法。我们还定义了一个 Ninja 类，它继承于 Person 类，并添加了一个新的属性 skill 和一个新的方法 fight。

下面是 def.js 的代码：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

Ninja.prototype = Object.create(Person.prototype);
Ninja.prototype.constructor = Ninja;

Ninja.prototype.fight = function() {
  console.log(`I am a ninja and my skill is ${this.skill}.`);
};

const person = new Person('John Doe', 30);
person.greet();

const ninja = new Ninja('Naruto Uzumaki', 16, 'Rasengan');
ninja.greet();
ninja.fight();