继承

继承

本周,逆战班学习的主题是继承。

继承是什么?爸爸有的,儿子也有;爸爸很有钱,所以儿子也很有钱。

js中面向对象的三大特点:封装,继承,多态,

这里的继承说的其实是指,让一个构造函数去继承另一个构造函数的属性和方法,发生在两个构造函数之间的。

继承发生的条件:1两个构造函数之间;2子级继承父级;3继承的是父级的属性和方法。

继承又有很多种方法,ES5中有原型继承,构造函数继承,组合继承,ES6中有class继承,接下去我们来一一学习认识他们到底是怎么继承的。

1、原型继承

//原型继承1-原型对象继承:

//只能继承原型身上的方法和属性,不能继承构造函数内的方法和属性

function Parent(){

   this.name="parent";

}

Parent.prototype.show=function(){

   console.log("我是父");

}

function Child(){

}

//1.浅拷贝,一旦给child重新赋值,则会覆盖父级原型的属性和方法

// Child.prototype=Parent.prototype;

// Child.prototype.abc=function(){

// console.log("我是子");

// }

//----------------------------

//2.深拷贝:不会影响父级原型身上的属性和方法

// for(var i in Parent.prototype){

  // Child.prototype[i]=Parent.prototype[i];

// }

// Child.prototype.show=function(){

  // console.log("我是子");

// }

var p=new Parent();

p.show();

console.log(p.name);

var c=new Child();

c.show();

// c.abc();

console.log(c.name);

============================================================

// 原型继承2 - 原型链继承:

// 1.不仅可以继承原型身上的方法和属性,而且还可以继承构造函数中的方法和属性

// 2.但是,不方便传参

function Parent(n){

this.name=n;

}

Parent.prototype.show=function(){

console.log(this.name);

}


function Child(n){

}

// Child的实例c ---> __proto__ ---> Child.prototype ---> Parent的实例 ---> __proto__ ---> Parent.prototype

Child.prototype=new Parent("child");

Child.prototype.show=function(){

console.log("hhhh");

}

var p=new Parent("parent");

console.log(p.name);

p.show();

var c=new Child();

console.log(c.name);

c.show();

2、借用构造函数继承

//构造函数继承(改变this的指向)

//方便传参

//可以实现多继承

//但是,只能继承构造函数内的属性和方法,不能继承原型身上的属性和方法

function Parent(a){

this.skill=a;

}

Parent.prototype.show=function(){

console.log(this.skill);

}

function Child(b){

Parent.call(this,b);

}

var p=new Parent("父");

console.log(p.skill);

p.show();

var c=new Child("子");

console.log(c.skill);

c.show();

=============================================================

//多继承

function Mp3(){

this.music="听音乐";

}

function Camera(){

this.phone="拍照";

}

function Tel(){

this.call="打电话";

}

function Computer(){

this.net="上网";

}

function MobilePhone(n){

Mp3.call(this);

Camera.call(this);

Tel.call(this);

Computer.call(this);

this.name=n;

this.game="打游戏";

}

var mp=new MobilePhone("huawei");

console.log(mp);

3、组合继承

// 组合继承:构造函数继承+ 原型继承

        // 1.既可以继承构造函数,又可以继承原型

        // 2.方便传参

        // 3.可以多继承构造函数

        // 4.注意:原型链继承时,依然有参数隐患

function Parent(p){

this.skill=p;

// 测试原型链继承的参数隐患

        // this.skill.split();

}

Parent.prototype.show=function(){

console.log(this.skill);

}

function Child(c){

Parent.call(this,c);

}

// Child.prototype = new Parent();

for(var i in Parent.prototype){

Child.prototype[i]=Parent.prototype[i];

}

var p=new Parent("父");

console.log(p.skill);

p.show();

var c=new Child("子");

console.log(c.skill);

c.show();


4、ES6 class继承

// ES6的class继承,原理就是:构造函数方式继承 + 原型链继承

class Parent{

constructor(a){

this.skill=a;

}

show(){

console.log(this.skill);

}

}

class Child extends Parent{

constructor(a){

super(a);

}

}

var p = new Parent("父");

    p.show();

    console.log(p);


    var c = new Child("子");

    c.show();

    console.log(c);


总结:继承最大的特点就是代码重用,让代码变得简洁。相同的功能方法不用重复的写,减少了工作量,类与类之间的关系更加明了,功能分配也更加清楚明白。

继承的学习让原本学习的代码进一步的进行了优化。

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

相关阅读更多精彩内容

  • 原文链接:zhuanlan.zhihu.com (一) 原型链继承: function Parent(name) ...
    越努力越幸运_952c阅读 359评论 0 2
  • 继承 Javascript中继承都基于两种方式:1.通过原型链继承,通过修改子类原型的指向,使得子类实例通过原型链...
    LeoCong阅读 432评论 0 0
  • 这是我见到的几种js继承方法,如果有文章中没有提及的,希望可以分享共同学习 (一)原型链继承 function P...
    年轻小子阅读 250评论 0 1
  • 继承的概念:子类可以使用父类共享的属性和方法,避免重复代码提高代码复用性。 原型链:子类可以共享父类的实例对象和实...
    浅秋_6672阅读 495评论 0 0
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 3,306评论 1 2

友情链接更多精彩内容