首页 > > 网页制作 > Javascript >

js中常见继承方式

2019-04-30 23:41:08来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.原型模式

function Father(){
this.property = true;

}
Father.prototype.getValue = function(){

return this.property;
}
function Son(){
this.Sonproperty = false;
}
//继承Father
Son.prototype = new Father();//原型重写，contructor被改写
Son.prototype.construtor = Son;//重新指向Son
Son.prototype.getSonValue = function(){
return this.property;
}
var instance = new Son();
console.log(instance.getValue());
/*缺点：
1.引用原型值会被所有实例共享
2.子类无法向父类传参
*/
2.借用函数继承（经典继承）
 
//基本思想：在子类型构造函数中调用超类型的构造函数
function Father(){
this.colors = ["red","blue","green"];
name = "haha";
}

function Son(){
Father.call(this);//继承Father，并向父类型传参

}
Son.prototype = new Father;
var instance1 = new Son();
instance1.colors.push("black");
console.log(instance1.colors);

instance2 = new Son();
instance2.colors.push("pink");
console.log(instance2.colors);
/*
解决了原型链所存在的两个问题
但是依然存在构造函数方法无法复用的问题
*/

3.组合继承（伪经典继承)---经常使用
 
// //集合原型和构造两者之长
// //基本思想： 使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承.
function Father(name){
this.name = name;
this.colors = ["red","pink","green"];
}

Father.prototype.sayname = function(){
console.log(this.name);
}

function Son(name,age){
Father.call(this,name);//使用构造函数进行实例属性的继承
this.age = age;
}

Son.prototype = new Father();//使用原型链继承超类型方法
Son.prototype.constructor = Son;//重新指向Son
Son.prototype.sayage = function(){
console.log(this.age);
}

var instance1 = new Son("lisi",12);
instance1.colors.push("brown");
console.log(instance1.colors);
instance1.sayname();
instance1.sayage();

var instance2 = new Son("hah",22);
instance2.colors.push("black");
console.log(instance2.colors);
instance2.sayname();
instance2.sayage();

4.原型式继承（浅拷贝）

//原型式继承
/*基本思想：在object()函数内部, 先创建一个临时性的构造函数,
然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型
的一个新实例.*/
var person = {
name : "van",
friends : ["hah","yisi"]
};
var anotherPerson = Object.create(person);
anotherPerson.friends.push("yixiu");
console.log(person.friends);
/*
和原型模式相同的是所有新对象依然共享含有引用类型值的属性
*/
5.寄生式继承
 
/*寄生式继承的思路与(寄生)构造函数和工厂模式类似,
即创建一个仅用于封装继承过程的函数,该函数在内部以
某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象.*/
function createAnother(original){
var clone = Object.create(original);//先进行浅复制后增强对象
clone.sayhi = function(){//进行增强
console.log(1);
}
return clone;
}
var person = {
friends : ["hah","yisi"]
};
//缺点：无法进行函数复用，只能使用父类中的方法
// person.prototype.say = function(){
// console.log(2);
// }
var anotherPerson = createAnother(person);
anotherPerson.friends.push("yixiu");
console.log(person.friends);
anotherPerson.sayhi();
// anotherPerson.say();
6.寄生组合式继承(结合前面的所有优点)
 
//寄生组合式继承就是为了降低调用父类构造函数的开销而出现的
//基本思路是: 不必为了指定子类型的原型而调用超类型的构造函数
function extend(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
//subClass.prototype =superClass.prtotype相当于原型共享而非继承
subClass.prototype = new F();//继承superClass的原型
subClass.prototype.constructor = subClass;//原型重写，手动绑定

subClass.superclass = superClass.prototype;//将superClass.prototype缓存起来，方便后续访问
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor = superClass;
}
}
function Father(name){
this.name = name;
this.colors = ["red","pink","green"];
}

Father.prototype.sayname = function(){
console.log(this.name);
}

function Son(name,age){
Father.call(this,name);//使用构造函数进行实例属性的继承，调用第一次
this.age = age;
}

extend(Son,Father);//
Son.prototype.constructor = Son;//重新指向Son
Son.prototype.sayage = function(){
console.log(this.age);
}

var instance1 = new Son("lisi",12);
instance1.colors.push("brown");
console.log(instance1.colors);
instance1.sayname();
instance1.sayage();

var instance2 = new Son("hah",22);
instance2.colors.push("black");
console.log(instance2.colors);
instance2.sayname();
instance2.sayage();



原文链接:https://www.cnblogs.com/angle-xiu/p/10793388.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：JS 01 变量_数据类型_分支循环_数组

下一篇：Vue基本使用---对象提供的属性功能

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签