当前位置 博文首页 > 纸飞机博客:继承知识点

    纸飞机博客:继承知识点

    作者:[db:作者] 时间:2021-09-07 10:10

    1、原型链继承

    将子类(构造函数)的原型 指向父类(构造函数)的实例。

    function Father() {
        this.name = 'Fname';
        this.likes = ['read', 'travel'];
    }
    Father.prototype.getName = function() {
        return this.name
    }
    function Son(age) {
        this.age = age
    }
    //重写子类原型使其指向父类的实例
    Son.prototype = new Father();
    //需之后添加原型方法,否则会被重写覆盖
    Son.prototype.getAge = function(){
        return this.age
    }
    var son1 = new Son(20)
    //顺着原型链可访问父类属性及原型方法
    console.log(son1.name) // Fname
    console.log(son1.getName()) //Fname

    缺点:

    ⑴ 原型中的所有属性被所有实例共享 ,如有更改 ,引用类型会互相影响 ,基本类型会在实例中新创建,对原型无影响。

    var son2 = new Son(16)
    son1.name = 'Sname';
    son1.likes.push('eat');
    son2.name //Fname
    son2.likes //["read","travel", "eat"]
    son1.name //Sname
    son1.likes //["read","travel", "eat"]

    ⑵创建子类实例时,无法向父类构造函数传参,使不同的子类实例拥有不同的父类属性值, 例如让每个子类实例拥有各自的name值和likes值。虽然在创建父类的实例时可以传一次参, 但得到的是共享的属性值。

    原型链继承

    2、借用构造函数继承

    使用call或apply 在子类构造函数中调用父类构造函数。

    //解决引用类型共享问题,每个子类实例拥有自己的属性
    function Father() {
        this.arr = [1,2,3]
    }
    function Son() {
        Father.call(this)
    }
    var son1 = new Son()
    var son2 = new Son()
    son2.arr.push(4)
    console.log(son2.arr) //[1,2,3,4]
    console.log(son1.arr) //[1,2,3]
    //解决传参问题:每个子类实例继承了父类属性且拥有各自的值
    function Father(name) {
        this.name = name
    }
    function Son(name) {
        Father.call(this, name)
    }
    var son1 = new Son("aa")
    console.log(son1.name) //aa
    var son2 = new Son("bb")
    console.log(son2.name) //bb

    缺点:

    如果方法都在构造函数中定义,没有了 函数复用性。每个实例都创建了一份函数副 本,占资源。

    3、组合继承(常用)?

    原型链+借用构造函数。共享的方法和属性通过原型链继承, 实例各自的属性通过借用构造函数继承。

    function Father(name) {
        this.name = name
        this.arr = [1,2,3]
    }
    Father.prototype.getName = function() {
        console.log(this.name)
    }
    function Son(name, age) {
        Father.call(this, name)
        this.age = age
    }
    Son.prototype = new Father()
    Son.prototype.constructor = Son
    Son.prototype.getAge = function() {
        console.log(this.age)
    }
    var son1 = new Son("xiao",20)
    son1.arr.push(4)
    console.log(son1.arr) //[1,2,3,4]
    son1.getName() //xiao
    son1.getAge() //20
    var son2 = new Son("lulu", 16)
    console.log(son2.arr) //[1,2,3]
    son2.getName() //lulu
    son2.getAge() //16

    组合继承


    ?除此还有原型式继承寄生式继承寄生组合式继承

    cs
    下一篇:没有了