原生继承的三种方式

1.原型链继承:

functionBook (name,author){

this.name=name;

this.author=author;

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){}

JavaScript.prototype=newBook("JavaScript","Nicholas");

varjs1=newJavaScript();

varjs2=newJavaScript();

js1.tell();

js2.tell();

可以发现,原型链继承有一个问题,那就是父类中的私有属性,会因为父类作为子类原型构建原型链,使得子类所有实例所共享。当我们通过一个实例修改共享属性时,其他实例也将受到影响:

functionBook (name,author){

this.name=name;

this.author=[author];

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){}

JavaScript.prototype=newBook("JavaScript","Nicholas");

varjs1=newJavaScript();

varjs2=newJavaScript();

js1.author.push("C.Zakas");

js2.tell();

但是当你直接为实例中属性赋值时,是在实例中重新定义了一个对应属性,而不是在修改原型中属性:

functionBook (name,author){

this.name=name;

this.author=author;

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){}

JavaScript.prototype=newBook("JavaScript","Nicholas");

varjs1=newJavaScript();

varjs2=newJavaScript();

js1.author="C.Zakas";

//并不是js1没有影响js2,而是在js1中创建了新author属性

console.log(js1.hasOwnProperty("author"));//true

console.log(js2.hasOwnProperty("author"));//false

js1.tell();//Book:JavaScript Author:C.Zakas

js2.tell()

2.构造函数继承:

functionBook (name,author){

this.name=name;

this.author=author;

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){

Book.apply(this,arguments);

}

varjs1=newJavaScript("JavaScript","Nicholas");

varjs2=newJavaScript("JavaScriopt","C.Zakas");

console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas

js1.tell();//Uncaught TypeError: js1.tell is not a function

js2.tell();//Uncaught TypeError: js2.tell is not a function

构造函数继承,可以使每个子类实例有一份自己的属性,但是无法找到父类原型中的函数。

3.组合继承:

functionBook (name,author){

this.name=name;

this.author=author;

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){

Book.apply(this,arguments);

}

JavaScript.prototype=newBook();

varjs1=newJavaScript("JavaScript","Nicholas");

varjs2=newJavaScript("JavaScriopt","C.Zakas");

console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas

js1.tell();//Book:JavaScript Author:Nicholas

js2.tell();

组合继承使得每个子类实例,既可以保存一份自己的属性,又可以共享同一个函数。

4.寄生组合继承:

functionBook (name,author){

this.name=name;

this.author=author;

}

Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};

functionJavaScript(){

Book.apply(this,arguments);

}

JavaScript.prototype=Object.create(Book.prototype);

JavaScript.prototype.constructor=JavaScript;

varjs1=newJavaScript("JavaScript","Nicholas");

varjs2=newJavaScript("JavaScriopt","C.Zakas");

console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas

js1.tell();

js2.tell();

console.log(js1.tell===js2.tell);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,423评论 1 10
  • (a fork of Airbnb's Javascript Style Guide) Strikingly ES...
    飘零_zyw阅读 4,894评论 1 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,799评论 19 139
  • 今天我要给大家介绍一款退烧药。 这个糖浆是桔色的,有桔子...
    5502史家颖阅读 6,205评论 3 0
  • 不要哭了吗 该哭的人是我吧 你都坦白爱上了他 我有什么办法 我也同意啦 既然你提出想法 我们不要拖拖拉拉 就从明天...
    简书华阅读 1,209评论 0 0