JavaScript 继承的两种核心实现:原型链与构造函数调用
本文深入解析 JavaScript 中两种主要的继承机制:原型继承与调用父类构造函数。通过 Animal、Monkey 和 Human 类的具体代码示例,演示如何利用 prototype 属性构建原型链,以及如何通过 call 方法复用父类成员。文章对比了两种模式在原型链结构、属性可见性及实例化方式上的差异,帮助开发者理解 JavaScript 面向对象编程的核心原理。
JavaScript 继承概述
本文通过具体实例详细解析 JavaScript 中继承的定义与使用方法,旨在为读者提供清晰的参考指南。
JavaScript 继承是前端开发中经典且基础的话题。尽管日常工作中直接编写继承逻辑的场景不多,但为了夯实基础,通过动手实践来深化对这一概念的理解是非常必要的。
首先定义一个基类,作为后续继承演示的基础。
// base class
function Animal(t)
{
if(typeof t==='string')
this.type=t;
else
{
if(t)
this.type=t.toString();
else
this.type='Animal'
}
this.speak=function(str)
{
if(str)
console.log(this.type+' said '+str);
else
throw "please specify what you want to say!";
}
}
原型继承机制
第一种实现方式是原型继承,这也是 JavaScript 内置类库的核心机制。
对于 String、Number 和 Boolean 这三种原始包装类型,可以直接通过 prototype 属性观察到它们继承自 Object。
Date、RegExp 和 Array 这三类对象则是间接继承自 Object,它们的 prototype 属性具有特殊性。
Date.prototype =Invalid Date
RegExp.prototype=/(?:)/
Array.prototype=[]
以下是原型继承的代码实现,通过观察 Monkey 类的原型链,可以清晰看到其指向 Animal 和 Object 的路径。
// Monkey : Animal
function Monkey(name,age)
{
this.name=name;
this.age=age;
}
Monkey.prototype=new Animal('Monkey');
// Example 01
var m=new Monkey('codeMonkey',10);
/*
Monkey:
age: 10
name: "codeMonkey"
__proto__: Animal
speak: function (str)
type: "Monkey"
__proto__: Animal
constructor: function Animal(t)
__proto__: Object
*/
console.log(m.type); // Monkey
console.log(m.name); // codeMonkey
console.log(m.age); // 10
m.speak('hello world') // Monkey said hello world
调用父类构造函数
第二种方式是调用父类构造函数。这种方式通过传递子类的 this 指针,将父类的公开成员直接添加到子类实例中。需要注意的是,这种模式下子类的原型链上无法直接体现继承关系。
// Human:Animal
function Human(id,name)
{
// call base class's constuctor function
Animal.call(this,'Human');
this.id=id;
this.name=name;
}
var h=new Human(1,'leon');
/*
id: 1
name: "leon"
speak: function (str)
type: "Human"
__proto__: Human
constructor: function Human(id,name)
__proto__: Object
*/
h.speak('hello world'); // Human said hello world
console.log(h.type); // Human
如果您对 JavaScript 的其他高级特性感兴趣,建议进一步阅读本站的《javascript 面向对象入门教程》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》以及《JavaScript 数学运算用法总结》等专题文章。
希望上述关于 JavaScript 继承机制的解析与代码示例,能对您的程序设计工作有所帮助。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
