完美清晰掌握ES5构造函数实现类的继承

ES5中的类

  1. es5中的类

    function Person() {
        this.name = '张三';
        this.age = 12;
    }
    
    var p = new Person();
    
    console.log(p.name)
    
  2. 构造函数和原型链里面增加方法

    function Person() {
        this.name = '李四';
        this.age = 23;
        this.run = function() {
            console.log(`${this.name}运动了~`)
            // console.log(this)
        }
    }
    
    // 在原型链上扩展属性和方法(原型链上的属性会被多个实例共享,构造函数不会)
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    var p = new Person();
    
    p.run();
    p.work()
    
  3. 类的静态方法

    function Person() {}
    
    Person.love = function() {
        console.log('我是类的静态方法,通过实例访问的是类的实例方法,通过类名直接访问的是类的静态方法。');
    }
    
    Person.love();
    
  4. 类的继承 原型链和对象冒充,用的最多的是两者组合继承模式

    (对象冒充) 
    function Person() {
        this.name = '李四';
        this.age = 23;
        this.run = function() {
            console.log(`${this.name}运动了~`)
        }
    }
    
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    function Animal() {
        Person.call(this); // 对象冒充实现继承
    }
    
    let a = new Animal();
    
    a.run(); // 对象冒充可以继承构造函数里面的属性和方法
    a.work(); // error报错; 对象冒充可以继承构造函数里面的属性和方法,但是没法继承原型链上的属性和方法
    
  5. 类的继承(原型链)

    function Person() {
        this.name = '李四';
        this.age = 23;
        this.run = function() {
            console.log(`${this.name}运动了~`)
        }
    }
    
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    function Animal() {}
    
    Animal.prototype = new Person(); // 原型链继承 可以继承构造函数里面的属性和方法,也可以继承原型链上的属性和方法
    
    let a = new Animal();
    
    a.run();
    a.work();
    
  6. 原型链继承的问题

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.run = function() {
            console.log(`${this.name}运动了~`)
        }
    }
    
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    
    var p = new Person('李四', 29);
    
    p.run();
    
    function Animal(name, age) {
    
    }
    
    // 使用原型链继承
    Animal.prototype = new Person();
    
    var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参
    
    a.run(); // undefined运动了~
    
  7. 原型链和对象冒充组合继承

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.run = function() {
            console.log(`${this.name}运动了~`)
        }
    }
    
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    
    var p = new Person('李四', 29);
    
    p.run();
    
    function Animal(name, age) {
        Person.call(this, name , age); // 对象冒充继承,实例化子类可以给父类传参
    }
    
    // 使用原型链继承
    Animal.prototype = new Person();
    
    var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参,但是同时也使用了对象冒充的方式就可以给父类传参
    
    a.run(); // 赵武运动了~
    a.work();
    
  8. 对象冒充+原型链组合继承的另一种写法

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.run = function() {
            console.log(`${this.name}运动了~`)
        }
    }
    
    Person.prototype.sex = '男';
    Person.prototype.work = function() {
        console.log(`性别:${this.sex}`)
    }
    
    
    var p = new Person('李四', 29);
    
    p.run();
    
    function Animal(name, age) {
        Person.call(this, name , age); // 对象冒充继承,可以继承父类构造函数中的属性和方法,且实例化子类可以给父类传参
    }
    
    // 使用原型链继承
    // Animal.prototype = new Person();
    Animal.prototype = Person.prototype; // 因为对象冒充继承了构造函数中的属性和方法且可以传参,所以通过原型链的方式继承原型上的属性和方法即可。
    
    var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参,但是同时也使用了对象冒充的方式就可以给父类传参
    
    a.run(); // 赵武运动了~
    a.work();
    
  9. 总结

  • function Animal(name, age) {Person.call(this, name , age);} 对象冒充的方式实现继承可以继承父类构造函数中的属性和方法,但是不能继承原型链上的属性和方法。且这种式可以给父类传参。
  • Animal.prototype = new Person();原型链的方式实现继承实例可以访问父类构造函数中的属性和方法,也可以访问原型链中的属性和方法,但是不能给父类传参。
  • 所以两者组合使用,就可以实现既能访问构造函数中的属性和方法,也能继承原型链上的属性和方法,同时也能给父类传参。
发布了231 篇原创文章 · 获赞 406 · 访问量 23万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览