js之面向对象五

于 2018-01-30 21:08:36 发布
阅读量131 收藏
点赞数
分类专栏： 前端

1、回顾：继承的3种方式

借用构造函数继承
原型链继承
混合继承

测试1：原型链继承

   //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        syaHello: function () {
            alert("hello!");
        }
    }

    //子类
    function Boy(sex) {
        this.sex = sex;
    }

    //原型链继承
    Boy.prototype = new Person('z3', 20);

    //创建子类对象
    var boy = new Boy();

    alert(boy.name);
    alert(boy.age);
    boy.syaHello();

结果：输出z3、20、hello!
调用了父类的构造函数和原型对象

测试2：借用构造函数继承

    //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        syaHello: function () {
            alert("hello!");
        }
    }

    //子类
    function Boy(name,age,sex) {
        //借用构造函数继承
        Person.call(this,name,age);
        this.sex = sex;
    }

    //创建子类对象
    var boy = new Boy('z3',18,'男');

    alert(boy.name);
    alert(boy.age);
    boy.syaHello();

结果:输出z3、18、Uncaught TypeError: boy.syaHello is not a function
子类只继承了父类的构造函数，原型对象不继承

测试3：混合继承

     //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        syaHello: function () {
            alert("hello!");
        }
    }

    //子类
    function Boy(name,age,sex) {
        //借用构造函数继承
        Person.call(this,name,age);
        this.sex = sex;
    }

    //原型链继承
    Boy.prototype = new Person();

    //创建子类对象
    var boy = new Boy('z3',18,'男');

    alert(boy.name);
    alert(boy.age);
    boy.syaHello();

结果：输出z3、18、hello!

混合继承的缺点：
调用了2次父类构造函数(借用构造函数1次、通过原型链继承1次)、1次原型对象(通过原型链继承1次)，如果创建很多的子类，那么效率、性能必定会受到影响，接下来就看看extjs底层继承机制的实现是怎么实现的，如何避免出现这种情况。

2、经典继承方法实现（模拟extjs底层继承机制）
测试1：

     //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        syaHello: function () {
            alert("hello!");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Person.call(this, name, age);
        this.sex = sex;
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.syaHello();
    alert(boy.constructor);


    //子类继承父类原型对象实现函数
    function  extend(sub,sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承
    }

结果：输出z3、18、hello!、function Object(){}
此时的实例对象boy的构造函数变成了Object，如何改进呢！

测试2：

 //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        syaHello: function () {
            alert("hello!");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Person.call(this, name, age);
        this.sex = sex;
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.syaHello();
    alert(boy.constructor);


    //子类继承父类原型对象实现函数
    function  extend(sub,sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承

        sub.prototype.constructor = sub ; // 4还原子类的构造器
    }

结果：输出z3、18、hello!、function Boy(){}
此时的实例对象boy的构造函数就是子类构造函数

测试3：

  //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        sayHello: function () {
            alert("hello sup");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Person.call(this, name, age);
        this.sex = sex;
    }

    //子类原型对象
    Boy.prototype = {
        sayHello: function () {
            alert("hello sub");
        }
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.sayHello();


    //子类继承父类原型对象实现函数
    function extend(sub, sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承

        sub.prototype.constructor = sub; // 4还原子类的构造器

    }

结果：输出z3、18、hello sup
子类、父类都通过原型对象添加了一个sayHello方法，子类实例对象调用sayHello方法，打印的是父类的，如果想调用子类的sayHello方法呢？

测试4:

      //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        sayHello: function () {
            alert("hello sup");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Boy.superClass.constructor.call(this, name, age);
        this.sex = sex;
    }

    //子类原型对象
    Boy.prototype = {
        sayHello: function () {
            alert("hello sub");
        }
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.sayHello();
    alert(boy.constructor);


    //子类继承父类原型对象实现函数
    function extend(sub, sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承

        sub.prototype.constructor = sub; // 4还原子类的构造器

        //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
        sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象

    }

结果：输出undefined、undefined、hello sup、function Boy(){}
此时子类通过借用构造函数调用父类构造函数模板，但是name、age却输出了undefined，因为父类原型对象添加了sayHello方法的方式导致了父类原型对象的构造函数发生了变化，变成了Object。

测试5:

    //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        constructor:Person,
        sayHello: function () {
            alert("hello sup");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Boy.superClass.constructor.call(this, name, age);
        this.sex = sex;
    }

    //子类原型对象
    Boy.prototype = {
        sayHello: function () {
            alert("hello sub");
        }
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.sayHello();
    alert(boy.constructor);



    //子类继承父类原型对象实现函数
    function extend(sub, sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承

        sub.prototype.constructor = sub; // 4还原子类的构造器

        //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
        sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象

    }

结果：输出z3、18、hello sup、function Boy(){}
此时通过在父类原型对象指定构造函数，然后子类通过借用构造函数即可以正常使用。

测试6:

     //父类
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    //父类原型对象
    Person.prototype = {
        // constructor:Person,
        sayHello: function () {
            alert("hello sup");
        }
    }

    //子类
    function Boy(name, age, sex) {
        //借用构造函数继承
        Boy.superClass.constructor.call(this, name, age);
        this.sex = sex;
    }

    //子类原型对象
    Boy.prototype = {
        sayHello: function () {
            alert("hello sub");
        }
    }

    // 只继承一遍父类的原型对象
    extend(Boy, Person);

    //创建子类对象
    var boy = new Boy('z3', 18, '男');

    alert(boy.name);
    alert(boy.age);
    boy.sayHello();
    alert(boy.constructor);



    //子类继承父类原型对象实现函数
    function extend(sub, sup) {
        // 目的： 实现只继承父类的原型对象
        var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
        F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
        sub.prototype = new F();// 3 原型继承

        sub.prototype.constructor = sub; // 4还原子类的构造器

        //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
        sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象


        //判断父类的原型对象的构造器 (加保险)
        if(sup.prototype.constructor == Object.prototype.constructor){
            sup.prototype.constructor = sup ; //手动判断父类原型对象的构造器
        }

    }

结果：输出z3、18、hello sup、function Boy(){}
或者直接在extend函数中手动设置父类构造函数

测试7:完整

    function extend(sub ,sup){
         // 目的： 实现只继承父类的原型对象
         var F = new Function();    // 1 创建一个空函数    目的：空函数进行中转
         F.prototype = sup.prototype; // 2 实现空函数的原型对象和超类的原型对象转换
         sub.prototype = new F();   // 3 原型继承 
         sub.prototype.constructor = sub ; // 4还原子类的构造器
         //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
         sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象
         //判断父类的原型对象的构造器 (加保险)
         if(sup.prototype.constructor == Object.prototype.constructor){
            sup.prototype.constructor = sup ; //手动设置父类原型对象的构造器
         }
    }


    // 混合继承：原型继承和借用构造函数继承
    function Person( name , age){
        this.name = name ; 
        this.age = age ; 
    }

    Person.prototype = {
        constructor: Person ,
        sayHello: function(){
            alert('hello world!');
        }
    };

    function Boy(name , age , sex){
        //call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版
        Boy.superClass.constructor.call(this , name , age);
        this.sex = sex ;
    }

    //原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象
    //Boy.prototype = new Person();
    // 只继承一遍父类的原型对象
    extend(Boy , Person);

    // 给子类加了一个 原型对象的方法
    Boy.prototype.sayHello = function(){
        alert('hi javascript!');
    }




    var b = new Boy('张三' , 20 , '男');
    alert(b.name); 
    alert(b.sex);
    b.sayHello();
    Boy.superClass.sayHello.call(b);

    //alert(Boy.superClass.constructor);
    // 混合继承的缺点： 3件事 : 继承了父类的2次模版 , 继承了一次父类的原型对象
    // extend方法 2件事: 继承1次父类的模版 继承一次父类的原型对象

结果：输出张三、男、hi javascript!、hello world!

qq_34983808
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值