Js继承 (Es5和Es6的继承方式)
作者:互联网
前言: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