主页 > 前端 > javascript >
来源:未知 时间:2022-05-05 10:17 作者:xxadmin 阅读:次
[导读] 在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: functionPerson(uName){this.skills=[php,javascript];this.userName=uName;}Person.prototype.showUserName=functio...
|
在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){
this.skills = [ 'php', 'javascript' ];
this.userName = uName;
}
Person.prototype.showUserName = function(){
return this.userName;
}
function Teacher ( uName ){
Person.call( this, uName );
}
Teacher.prototype = new Person();
var oT1 = new Teacher( 'ghostwu' );
oT1.skills.push( 'linux' );
var oT2 = new Teacher( 'ghostwu' );
console.log( oT2.skills ); //php,javascript
console.log( oT2.showUserName() ); //ghostwu组合继承有个缺点,父类的构造函数会被调用两次. 第11行,设置子类原型对象(prototype),调用了第一次 第9行,实例化对象的时候,又调用一次 构造函数的目的是为了复制属性,第9行肯定是不能少的,第11行的目的是为了获取到父类原型对象(prototype)上的方法,基于这个目的,有没有别的方法 可以做到 在不需要实例化父类构造函数的情况下,也能得到父类原型对象上的方法呢? 当然可以,我们可以采用寄生式继承来得到父类原型对象上的方法 function Person( uName ){
this.skills = [ 'php', 'javascript' ];
this.userName = uName;
}
Person.prototype.showUserName = function(){
return this.userName;
}
function Teacher ( uName ){
Person.call( this, uName );
}
function object( o ){
var G = function(){};
G.prototype = o;
return new G();
}
function inheritPrototype( subObj, superObj ){
var proObj = object( superObj.prototype ); //复制父类superObj的原型对象
proObj.constructor = subObj; //constructor指向子类构造函数,避免重写而失去constructor
//为了解决组合式继承中构造函数被执行两次的问题,
//我们将指向父类实例改为指向父类原型, 减去一次构造函数的执行
subObj.prototype = proObj; //再把这个对象给子类的原型对象
}
inheritPrototype( Teacher, Person );
var oT1 = new Teacher( 'ghostwu' );
oT1.skills.push( 'linux' );
var oT2 = new Teacher( 'ghostwu' );
console.log( oT2.skills ); //php,javascript
console.log( oT2.showUserName() ); //ghostwu其实,说白了寄生组合式继承就是一个借用构造函数 + 相当于浅拷贝父类的原型对象 其他方案: 寄生组合式继承, 即通过借用构造函数来继承属性, 在原型上添加共用的方法, 通过寄生式实现继承 //寄生组合式继承, 即通过借用构造函数来继承属性, 在原型上添加共用的方法, 通过寄生式实现继承.
// 上边的例子高效的体现了只调用了一次 SuperType 构造函数,并且因此也避免了在 SubType.prototype 上面创建不必要的 多余的属性.与此同时,原型链还能保持不变
// function inheritPrototype(subType, superType) {
// var prototype = Object.create(superType.prototype); // 创建对象,创建父类原型的一个副本
// prototype.constructor = subType; // 增强对象,弥补因重写原型而失去的默认的constructor 属性
// subType.prototype = prototype; // 指定对象,将新创建的对象赋值给子类的原型
// }
// 父类初始化实例属性和原型的属性和方法
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
this.sheet = function(sheet) {
console.log(this.name + '正在sheet!' + sheet);
}
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
// 借用构造函数继承构造函数的实例的属性(解决引用类型共享的问题)
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
(function(SubType, SuperType) {
var prototype = Object.create(SuperType.prototype) //创建父类原型的一个副本
prototype.constructor = prototype // 增强对象,弥补因重写原型而失去的默认的constructor 属性
SubType.prototype = prototype //指定对象,讲新创建的对象赋值给子类的原型
}(SubType, SuperType))
// 将子类型的原型重写替换成父类的原型
// inheritPrototype(SubType, SuperType);
// 对子类添加自己的方法
SubType.prototype.sayAge = function() {
console.log(this.age);
};
var instance1 = new SubType("heyushuo", 12);
var instance2 = new SubType("kebi");
console.log('instance1', instance1)
console.log('instance2', instance2)
instance1.sayName(); //heyushuo
instance1.sayAge(); //12
instance2.sayName(); //kebi
instance1.colors.push("yellow"); // ["red", "blue", "green", "yellow"]
instance1.colors.push("black"); // ["red", "blue", "green", "black"]以上这篇[js高手之路]寄生组合式继承的优势详解就是小编分享给大家的全部内容了 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com