js的继承

1.原型和原型链的继承:
优点:实例是子类的实例,也是父类的实例。父类新增的属性和方法子类都可以访问。
缺点:原型的属性是共享的修改一个属性所有的属性都改变了。创建子类没法向父传参。

//原型和原型链继承
function Par(){
    this.a = true;
    this.info={
        name:"xiaoming",
        age:20
    }
}
Par.prototype.getInfo=function(){
    console.log("父"+ this.info,this.a);
}

function Chi(){}
//父的实例赋值给子类的原型
Chi.prototype = new Par();
let one = new Chi();
console.log(one.info.name); //xiaoming
one.getInfo();

2.构造函数继承:子类构造函数内部调用父类构造函数。使用call/apply将父类的构造函数绑定在子对象上。
优点:子类实例共享引用属性的问题。子类可向父类传参。
缺点:每个子类对象都有自己的执行函数,如果对象多了,内存消耗大。

//构造函数继承
function Parent(msg){
    this.info={
        name:"aa",
        age:10,
        msg:msg
    }
}
function Child(msg){
    this.test="child" //子类属性
    Parent.call(this,msg);//继承的体现
}
let a = new Child("参数");
console.log(a.info.name); //aa

3.组合式继承:
原型链继承和构造函数式继承组合
优点:不存在引用属性共享的问题。子类可向父类传递参数。
缺点:子类原型上多余了一份父类的实例。

//组合式继承
function Parent(msg){
    this.info={
        name:"zhaomi",
        age:18,
        msg:msg
    }
}
Parent.prototype.getInfo=function(){
    console.log("原型值"+this.info.name); //zhaomi
    console.log(this.info);
}
function Child(msg){
    //构造函数继承
    Parent.call(this,msg);
}
Child.prototype = new Parent();
let a = new Child("组合式");
console.log(a.getInfo());

4.原型式继承:有一个封装继承过程的函数,用来增强对象的。
优点:不需要单独创建构造函数
缺点:属性会在对象中共享,子类实例不能向父类传参。

//原型式继承
//在构造函数a内部创造一个临时的构造函数B
//a的参数是一个对象,将a的参数绑定在b的原型上,返回一个b的实例。
function creObj(obj){
    //1.创建一个临时的构造函数
    function Fun(){}
    //2.obj绑定到Fun的原型上
    Fun.prototype = obj
    //3.返回Fun的一个实例
    return new Fun()  
}
let person = {
    name:"zhangmi",
    age:20,
    like:['骑行','探险'],
    showInfo(){
        console.log(1,this.name);
    }
}
//测试:
let one = new creObj(person);
one.name = "lili";
console.log(2,one); //lili
one.like.push('游泳');
console.log(3,one.like);//['骑行','探险','游泳']

5.寄生式继承:创建对象的方法,封装创建过程的函数,实际的对象
优点:不需要单独创建构造函数
缺点:代码复用性比较差,编写起来比较复杂。

//寄生式继承
//创建对象
function objCopy(obj){
    function Fun(){}
    Fun.prototype = obj;
    return new Fun();
}
//封装过程的函数
function creAno(obj){
    //原型式继承
    let clone = objCopy(obj);
    clone.showName = function(){
        console.log(this.name);
    }
    return clone;
}
let person = {
    name:"周周",
    age:19,
    like:["爱好","爱好1"]
}
let one = creAno(person);
one.like.push("爱好2"); //['爱好', '爱好1', '爱好2']
console.log(one.like);

6.es6中的继承:extends实现继承的

//es6继承
class Parent{
    constructor(name){
        this.name = name;
        this.arr=[1,2,3];
    }
}

class Child extends Parent{
    constructor(){
        super("父级");
        this.name ="小小";
    }
}
let ar1 = new Child();
let ar2 = new Child();
console.log(ar1,ar2);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容