javascript中实现继承的三种方式（一看就懂）

最新推荐文章于 2025-10-13 16:25:42 发布

原创最新推荐文章于 2025-10-13 16:25:42 发布 · 1.5w 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#实例 #对象 #继承 #函数 #javascript

js_studyShare 同时被 2 个专栏收录

36 篇文章

订阅专栏

js_基础篇

17 篇文章

订阅专栏

本文详细介绍了JavaScript中的三种继承方式：原型继承、类继承（通过构造函数实现）以及混合继承，并对比了它们各自的优缺点。

1、原型继承

 	//  父类 
        function Persion(name,age){ 
        	this.name = name; 
        	this.age = age; 
        }
        // 父类的原型对象属性 
        Persion.prototype.id = 10;
        // 子类 
        function Boy(sex){ 
        	this.sex = sex;
        }
        // 继承实现 
        Boy.prototype = new Persion('c5',27);
         var b = new Boy(); 
         alert(b.name)// c5 
         alert(b.id)//10

这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法。

2、类继承（借用构造函数的方式继承）

        //  父类 
        function Persion(name,age){ 
        	this.name = name; 
        	this.age = age; 
        }
        // 父类的原型对象属性 
        Persion.prototype.id = 10;
        // 子类 
        function Boy(name,age,sex){ 
        	//call apply 实现继承
        	Persion.call(this,name,age);
        	this.sex = sex;
        }
         var b = new Boy('c5',27,'男'); 
         alert(b.name)// c5 
         alert(b.id)//undinfind 父类的原型对象并没有继承

这种原型继承的特点：继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象

3、混合继承（原型继承和类继承）

 	//  父类 
        function Persion(name,age){ 
        	this.name = name; 
        	this.age = age; 
        }
        // 父类的原型对象属性 
        Persion.prototype.id = 10;
        // 子类 
        function Boy(name,age,sex){ 
        	//call apply 实现继承
        	Persion.call(this,name,age);
        	this.sex = sex;
        }
        // 原型继承实现  参数为空 代表 父类的实例和父类的原型对象的关系了
	 Boy.prototype = new Persion();
         var b = new Boy('c5',27,'男'); 
         alert(b.name)// c5 
         alert(b.id)//10

这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对象。优点方便了子类实例传参，缺点就是Boy.pertotype = new Persion() 函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能。