JavaScript Prototype 继承机制详解与改进方案

作者:拾光时间:2026-10-23 00:33:25浏览:218

本文详细解析JavaScript中基于原型链的继承机制,通过实例说明其工作原理。重点探讨原型继承在构造函数执行时机、成员变量共享及参数传递方面的局限性,并给出一种通过扩展Function原型来优化继承关系的代码方案,帮助开发者规避常见陷阱。

JavaScript原型继承基础用法

首先介绍最基础的用法:将ClassA的一个实例赋值给ClassB,


此时ClassB便继承了ClassA的所有属性。


具体实现代码如下:



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


原型继承的工作原理与特性

从原型继承的理论角度来看,


JavaScript的原型继承机制是引用原型对象,而非复制原型对象,


因此,对原型对象的修改会反映在所有ClassB的实例中。


相关代码如下:



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


然而,子类对象的写操作仅访问子类对象自身的成员,


这意味着子类之间的写操作互不影响,因此,


读取属性时,若子类中不存在该成员,则会去原型中查找(如果子类中没有的话)。



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


每个子类对象都持有同一个原型对象的引用,


所以子类对象中的原型成员实际上是共享的同一个对象。



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


在构造子类时,原型的构造函数并不会被执行。



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


接下来讨论一个关键问题:在子类对象中访问原型的成员对象:



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


原型继承的优缺点分析

因此,在使用prototype继承时,原型类中不能包含成员对象!所有成员必须是值类型数据(string也可以)。


使用prototype继承具有执行效率高、不浪费内存、为父类动态添置方法后子类中马上可见等优点。



prototype继承是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。



prototype继承也有四个比较明显的缺点:


缺点一:父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。


缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。


缺点三:如果父类的构造函数需要参数,我们就没有办法了。


缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。



原型继承的改进方案与局限

可以针对prototype的缺点进行改造


比如把它写成Function对象的一个方法,这样用的时候方便。



Function.prototype.Extends = function (parentClass)


{

var Bs = new Function();


Bs.prototype = parentClass.prototype;


this.prototype = new Bs();


this.prototype.Super = parentClass;


this.prototype.constructor = this;


}

希望各位 js 高手能把更好的方式介绍给大家


针对第3,6个

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


针对继承,


Array.prototype 就不能继承 ClassA,ClassB



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


带参数的继承问题


<div id="a">aaa</div>  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

作者最新文章