首页

prototype、proto与JavaScript继承机制

myzbx 2025-08-02 20:16 38 浏览

JavaScript没有传统面向对象语言的类继承机制，而是基于原型链继承实现的，其本质是使用函数模拟类的特征。我们可以通过"prototype"将属性写到原型链上，调用new操作符创建对象(实例化)时，对象实例会把类原型链上的属性关联到自身的"__proto__"属性上；而子类继承父类时，是将子类的"prototype"属性指向父类的"prototype"属性，并在子类"prototype"属性添加自己的方法和属性实现对父类的扩展。

1. 类与实例

1.1 类定义

在JavaScript中我们会像下面这样模拟一个类：

该类包含两个属性和一个方法。

1.2 实例化

类定义后，就可以通过new关键创建类实例：

JavaScript中实例化不同与传统面向对象语言(如：Java、C++等)，其实例化基于对象原型。

"__proto__"是一个对象内部属性，继承自"
Object.prototype.__proto__"。当类被实例化时，对象的(类实例)的"__proto__"属性会指向类的原型，即：类的"prototype"属性。

这就是基于原型的类的实现方式，也就是原型链的实现方式。实例化后当调用对象的属性或方法时，会有如下过程：

查找对象是否有该属性或方法，如果则在则返回或调用
如果不存在，则通过"__proto__"属性，在原型链上查找有没有属性或方法

2. 类的继承

继承、封装、多态是面向对象语言三大特征，JavaScript基于原型同样可以模拟出这三个特性。单就继承来说又分为单继承和多继承，但JavaScript只能实现单继承。

我可以像下面这样模拟一类继承：

在这个继承过程中，我们做了以下几件事：

在子类的构造函数中调用父类的构造函数
将父类的原型属性"prototype"复制到子类的原型"prototype"中
将子类的构造器"constructor"指向子类的构造函数

JavaScript中继承的本质是原型链的复制，创建子类的实例后，其"__proto__"属性会指定子类的"prototype"，但它同时是一个父类的实例：

仍然可以通过"__proto__.__proto__"访问父类中的方法：

除上述的自定义object方法外，还可以使用"Object.create()"实现类原型的复制。无论使用哪种方式，这只对面向对象继承的一种模拟，其与传统的类的实例化与继承相比有以下几个特点：

在传统的类中，“类名”同进是一个构造函数，而JavaScript使用函数模拟了构造函数
在传统的类中有可以被继承到子类中的属性和方法，而而JavaScript使用"prototype"实现了继承
传统的类通过"new"关键字来实例化一个类，而JavaScript的实例化过程是对"prototype"属性的复制

注意：在ECMAScript 2015(ES6)中新增了class类定义的方式，但其本质仍然是基于函数的类模拟。

以上笔者对JavaScript继承机制的一些分析和见解，如果你有什么不同意见请“评论”或加以下群讨论：

来自：http://itbilu.com

交流群：564850876

JS 2015 (ES6)

上一篇：Chrome 52将支持ES7:Canary通道已上线
下一篇：Node.js 6.0正式发布:提供2年长期支持、覆盖93% ES6特性

prototype、proto与JavaScript继承机制

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿