javascript 高级编程系列 - 继承
1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数)
// 定义父类构造函数 function SuperClass(father, mother){ this.father = father; this.mother = mother; this.brothers = ['jack', 'mike']; } // 给父类中添加方法 SuperClass.prototype.getFather = function(){ return this.father; } // 定义子类构造函数 function SubClass(name, age){ this.name = name; this.age = age; } // 继承父类 SubClass.prototype = new SuperClass('perter','nancy'); // 添加新方法 SubClass.prototype.getName = function(){ return this.name; }; // 重写父类中的方法 SubClass.prototype.getFather = function(){ return null; } // 实例化子类 var obj = new SubClass('leon', 30);
2. 借用构造函数继承(优点:子类继承的数据不会共享,可以在实例化子类时对父类进行传参;缺点:方法需要在构造函数中定义,以及重写)
// 定义父类构造函数 function SuperClass(father, mother){ this.father = father; this.mother = mother; this.brothers = ['jack', 'mike']; this.getFather = function(){ // 需要子类继承的方法一定得在构造函数中定义 return this.father; } } // 定义子类构造函数, 并调用父构造函数实现继承 function SubClass(name, age,father, mother){ SuperClass.call(this, father, mother); this.name = name; this.age = age;
this.getFather = function(){ // 只能在构造函数中重写父类中的方法
return null;
}
}
// 添加新方法 SubClass.prototype.getName = function(){ return this.name; };
// 实例化子类
var obj = new SubClass('leon', 30, 'peter', 'nancy');
3. 组合继承 (融合原型链继承与借用构造函数继承)
// 定义父类构造函数 function SuperClass(father, mother){ this.father = father; this.mother = mother; this.brothers = ['jack', 'mike']; } // 添加父类方法 SuperClass.prototype.getFather = function(){ return this.father; }; // 定义子类构造函数, 并调用父构造函数实现属性继承 function SubClass(name, age,father, mother){ SuperClass.call(this, father, mother); this.name = name; this.age = age; } // 通过实例化父类作为子类原型对象,实现方法继承 SubClass.prototype = new SuperClass(); SubClass.prototype.constructor = SubClass; // 添加新方法 SubClass.prototype.getName = function(){ return this.name; };
// 重写父类中的方法 SubClass.prototype.getFather = function(){ return null; }; // 实例化子类 var obj = new SubClass('leon', 30, 'peter', 'nancy');
4. 原型式继承 (基于一个给定的对象,创建一个相似的对象, 相当于es5中的Object.create() 方法)
// 实现继承的函数 function object(o){ function F(){} F.prototype = o; return new F(); } // 定义基础对象 var baseObj = { name: 'john', age: 20, getName: function(){ return this.name; } } // 创建新对象 var newObj = object( baseObj); newObj.name = 'leon'; newObj.getName();
5. 寄生式继承 (封装原型式继承,并为新创建对象添加新的属性和方法,缺点:新添加的方法无法共享)
// 实现继承的函数 function object(o){ function F(){} F.prototype = o; return new F(); } // 封装继承过程的函数 function createObj(obj){ var newObj = object(obj); newObj.getAge = function(){ return this.age; } return newObj; } // 定义基础对象 var baseObj = { name: 'john', age: 20, getName: function(){ return this.name; } } // 创建新对象 var obj = createObj( baseObj); obj.name = 'leon'; obj.getName(); obj.getAge();
6. 寄生组合式继承 (改进组合式继承,将原型方法的继承改为利用寄生式继承的方法进行继承,避免了在prototype上产生不必想的属性值,以及多次调用父类构造函数的情况)
// 定义父类构造函数 function SuperClass(father, mother){ this.father = father; this.mother = mother; this.brothers = ['jack', 'mike']; } // 添加父类方法 SuperClass.prototype.getFather = function(){ return this.father; }; // 定义子类构造函数, 并调用父构造函数实现属性继承 function SubClass(name, age,father, mother){ SuperClass.call(this, father, mother); this.name = name; this.age = age; } // 继承原型的函数 function inheritPrototype(SubClass, SuperClass){ var prototype = object(SuperClass.prototype); prototype.constructor = SubClass; SubClass.prototype = prototype; } // 通过调用原型继承函数,实现方法继承 inheritPrototype(SubClass, SuperClass); // 添加新方法 SubClass.prototype.getName = function(){ return this.name; }; // 重写父类中的方法 SubClass.prototype.getFather = function(){ return null; }; // 实例化子类 var obj = new SubClass('leon', 30, 'peter', 'nancy');
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战