原型链与继承(一):六种常见继承模式
2018-11-28 12:09
190 查看
一、原型链继承:
function SuperType(){ this.colors = ["red", "blue", "green"]; } SuperType.prototype.Fun = function(){ }; function SubType(){ } //继承了SuperType SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black"
优点:能通过instanceOf和isPrototypeOf的检测
注意:给原型添加方法的语句一定要放在原型替换SubType.prototype = new SuperType();之后
缺点:(1)SuperType中的属性(不是方法)也变成了SubType的prototype中的公用属性,如上面例子中的color属性,可以同时被instance1和instance2修改
(2)创建子类型的时候,不能像父类型的构造函数中传递参数。
二、借用构造函数(常用方法)
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //继承了SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green" function SuperType(name){ this.name = name; } function SubType(){ //继承了SuperType,同时还传递了参数 SuperType.call(this, "Nicholas"); //实例属性 this.age = 29; } var instance = new SubType(); alert(instance.name); //"Nicholas"; alert(instance.age); //29
原理:在子类型构造函数的内部调用超类型构造函数
优点:解决了superType中的私有属性变公有的问题,可以传递参数
缺点:方法在函数中定义,无法得到复用
三、组合继承:
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name);//借用构造函数继承属性,二次调用 this.age = age; } SubType.prototype = new SuperType();//借用原型链继承方法,一次调用 SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27
优点:继承前两者的优点,能通过instanceOf和isPrototypeOf的检测
缺点:两次调用父构造器函数,浪费内存。
四、原型式继承:
function object(o){ function F(){} F.prototype = o; return new F(); }
使用场合:没必要构建构造函数,仅仅是想模拟一个对象的时候
五、寄生继承:
function createAnother(original){ var clone = object(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("hi"); }; return clone; //返回这个对象 } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi"
缺点:方法在函数中定义,无法得到复用
六:寄生组合继承(最理想):
function inheritPrototype(subType, superType){ var prototype = object(superType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 } function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType);//实现继承 SubType.prototype.sayAge = function(){ alert(this.age); };
转载出处: https://blog.csdn.net/zhuanyemanong/article/details/80325387
相关文章推荐
- js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
- JS函数的原型模式 – 继承 核心:prototype
- js 组合继承(使用原型模式和构造函数模式)和原型式继承
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- javascript中创建自定义类型的最常见的方式_组合使用构造函数模型和原型模式,动态原型模式
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- js面向对象小结(工厂模式,构造函数,原型方法,继承)
- 六种常见的数据加载模式设计
- 基于原型继承的链模式
- Javascript:原型模式类继承
- 六种常见的数据加载模式设计
- 原型模式和基于原型继承的JavaScript对象系统
- 常见设计模式解析和实现(C++)Prototype模式(原型模式)
- JavaScript六种比较常见的原型创建对象的方法
- Javascript继承机制的设计思想(原型链模式)
- 浅谈js函数继承模式之三:共享原型模式
- 《JS高程(3)》原型链继承模式 -第6章笔记(04)
- JavaScript构造函数+原型创建对象,原型链+借用构造函数模式继承父类练习
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
- Javascript | 深入扩展原型链模式常用的六种继承方式(18)