Js继承（Es5和Es6的继承方式）

2021-09-23 21:02:43 阅读：177 来源： 互联网

标签：Es6 Es5 Woman name People 继承 new 父类构造函数

前言：js是面向过程，不是面向对象

面向对象：

我们可以通过 new Object()和字面量创建，但是这两种方法不能判断对象归属问题以及不能批量产出对象，所以有了工厂模式，工厂模式是在函数中new一个对象，给对象赋值，然后return 对象，工厂模式解决了批量的问题，但是还是没有解决对象归属问题。所以又有了构造函数模式，构造函数解决了对象的归属问题，但是构造函数创建的对象的方法不能共享，每个对象都会创建方法，造成内存开销特别大，所以产生了原型的解决方法。我们一般情况下会采用构造函数和原型混合的模式来创建对象，利用构造函数创建实例对象，利用原型创建方法和共享属性。可以看出，混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性。最大限度的节省了内存

那么下面我们来说一下Es5的继承方式

第一种：原型链继承

把父类的实例赋值给子类原型

父类的实例作为子类的原型
function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();

优点:

简单易于实现，父类的新增的实例与属性子类都能访问

缺点：

可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面
无法实现多继承
创建子类实例时，不能向父类构造函数中传参数

第二种：借用构造函数继承

复制父类的实例属性给子类

function Woman(name){
 //继承了People
  People.call(this); //People.call(this，'tom); 
  this.name = name || 'kitty'
}
let womanObj = new Woman();

优点：

解决了子类构造函数向父类构造函数中传递参数
可以实现多继承（call或者apply多个父类）

缺点：

方法都在构造函数中定义，无法复用
不能继承原型属性/方法，只能继承父类的实例属性和方法

第三种：实例继承

function Wonman(name){
  let instance = new People();
  instance.name = name || 'wangxiaoxia';
  return instance;
}
let wonmanObj = new Wonman();

优点：

不限制调用方式
简单，易实现

缺点：

不能多次继承

第四种：组合继承

调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

function People(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}

function Woman(name,age){
  People.call(this,name,age)
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
let wonmanObj = new Woman(ren,27);
wonmanObj.eat();

后续更新！！！

标签：Es6,Es5,Woman,name,People,继承,new,父类,构造函数
来源： https://blog.csdn.net/ProGrammerXu/article/details/120443123

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Js继承 （Es5和Es6的继承方式）

Js继承（Es5和Es6的继承方式）