js 继承 三种常用方法 原型链-借用构造函数-组合式继承
2017-08-23 15:26
567 查看
1、经典原型链方法
function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function subType() { this.property = false; } //继承了SuperType的属性和方法 SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.property; } var instance = new SubType(); console.log(instance.getSuperValue());//true
有一处弊端:如果有两个以上的实例,第一个实例向原型中添加了元素,第二个实例(不想要那个)
也会获取到添加的元素,也就是继承后,所有实例共享相同的属性。另外就是不能向构造函数传参!
SuperType和SubType区别在于是后者继承了前者!继承是通过创建前者的实例并赋给后者的prototype来实现的。
原来存在于前者的属性和方法,现在也存在于后者中。
2、借用构造函数法
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //使用call() 的方法来继承SuperType SuperType.call(this); } var p1 = new SubType(); p1.colors.push("black"); alert(p.colors); //"red,blue,green,black"
var p2 = new SubType();
alert(p2.colors); //"red,blue,green;
此方法可以去掉第一种方法中实例共享属性的缺陷!也就是第二个实例不会受到第一个实例的影响,
各自继承各自的。在call(this,"jack",15,"clerk")时可在括号里传参!3、组合继承法(避免了前两种方法的缺陷,融合了优点,推荐使用)
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;//通过constructor改变this指针,现在指向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
优点:保证实现函数复用的同时,又能够使每个实例拥有各自的属性!其中call()已经将属性和方法全部继承了下来,又使用new来继承原型上的方法,覆盖了之前继承下来的方法,即重复继承了。
相关文章推荐
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
- Js面向对象漫谈(2) 继承--原型链,借用构造函数,组合式,寄生式, 寄生组合式
- 浅谈JS继承_借用构造函数 & 组合式继承
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- js面向对象小结(工厂模式,构造函数,原型方法,继承)
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- JS面向对象的继承三种方法:原型继承,原型冒充继承,复制继承
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
- JS原型链、继承的问题与解决:组合继承、借用构造函数(未完)
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- 浅谈JS继承_借用构造函数 & 组合式继承
- JS中的phototype JS的三种方法(类方法、对象方法、原型方法)
- 一切皆对象之两个方法概括js,无函数签名(无多态),原型,闭包,封装,引用类型,继承……
- js数组去重的三种常用方法总结
- js中的构造函数,原型,原型链,继承
- js数组去重的三种常用方法总结
- js使用原型实现继承与new一个新对象的方法
- 三种常用的js数组去重方法
- JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
- 借用构造函数继承非原型