【JavaScript笔记 · 基础篇(十三)】面向对象编程之三：继承机制

最新推荐文章于 2025-08-13 18:00:37 发布

原创最新推荐文章于 2025-08-13 18:00:37 发布 · 944 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #js

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript中的对象体系和继承机制，包括通过构造函数和原型对象实现单继承的两种方法。首先，定义了一个父构造函数Animal及其原型对象，并展示了如何通过call()方法或者创建父类实例来实现子类继承。接着，讲解了如何使用Object.create()方法进行原型链继承，以及如何通过new Animal()方式实现继承，并确保不直接修改父类原型。最后，通过实例展示了instanceof运算符的用法，以及如何在子类中添加新方法。文章还预告了将探讨多重继承的内容。

深入理解过JavaScript中的对象体系（基于构造函数（constructor）和原型对象（prototype））过后，再来学习JS中的继承机制就很简单啦~

文章目录

一. 原型链单继承

前两篇博客里详细介绍了构造函数（constructor）和原型对象（prototype），多多少少都已经讲过继承的知识了，这里就再系统罗列一下。

讲这一部分之前，我们先来定义一个父构造函数Animal()及其原型对象Animal.prototype——

// 父构造函数
function Animal (name,age){
    this.name = name;
    this.age = age;
};

// 父构造函数原型对象
Animal.prototype = {
    constructor:Animal,
    color:"white",
    sayName:function(){
        console.log("my name is",this.name);
    },
    sayAge:function(){
        console.log("my age is",this.age);
    }
};

这里介绍三种单继承的子构造函数的写法，略有不同，按需而定：

1.1 第一步 —— 子类继承父类的实例

具体分为两个步骤：

1.1.1 调用父构造函数

通过call()方法把子类实例对象的this绑定到父构造函数来调用，这样子类实例也会具有父类实例的属性：

// 子构造函数
function Dog(name,age,gender){
    Animal.call(this,name,age);  // 借用构造函数
    this.gender = gender;
};

1.1.2 设置base属性

// 子构造函数
function Dog(name,age,gender){
    this.base = Animal;
    this.base(name,age);
    this.gender = gender;
};

1.2 第二步 —— 子类继承父类的原型

1.2.1 父类原型对象的克隆对象

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 健全关系

这里切记是让Dog.prototype等于父类原型对象的克隆对象（通过Object.create()方法生成），而不是直接等于Animal.prototype。否则之后对Dog.prototype的操作，也会连父类的原型Animal.prototype一起修改掉。

声明一个Dog的实例对象wangcai，可以看到他可以正常访问其祖先级构造函数Animal中的属性和方法：

var wangcai = new Dog("wangcai",2,"male");
console.log(wangcai.name);
console.log(wangcai.color);
wangcai.sayName();


——————OUTPUT——————
wangcai
white
my name is wangcai

instanceof运算符用来判断当前对象是否为某个构造函数的实例，返回一个布尔值。wangcai对Dog和Animal都返回了true。

console.log(wangcai instanceof Dog);
console.log(wangcai instanceof Animal);


——————OUTPUT——————
true
true

1.2.2 父类的一个实例

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;  
// 健全关系

1.3

两种方法：原型链继承和借用构造函数。

// 子构造函数
function Dog(name,age,gender){
    Animal.call(this,name,age);  // 借用构造函数
    this.gender = gender;
};

Dog.prototype = new Animal();  // 原型链继承
Dog.prototype.constructor = Dog;  // 健全关系
Dog.prototype.sayGender= function (){
    console.log("my gender is",this.gender);
};

// 创建实例对象
var dog = new Dog("zevin",21,"male");
console.log(dog.constructor);
dog.sayGender();
dog.sayName();


——————OUTPUT——————
[Function: Dog]
my gender is male
my name is zevin