ES5继承

ES5没有像ES6那样继承的方法,他也没有正了八经的类,所以都是自己封装的函数

首先,要有个父类

function Ball(user) {
            this.name=user;
        }
Ball.prototype={
            a:1,
            b:2,
            c:function () {
                this.a=10;
            }
        };
Ball.prototype.constructor=Ball;

然后要写一个继承的函数,最重要的就是这个函数,继承就是对父类原型的继承

function extend(subClass,supClass) {
//           创建一个空类,空的构造函数
            function A() {}
//            设置这个空类的原型是父类的原型,这样保证这个空类和父类一样,但是没有父类构造函数内容
//           这样就解决直接继承时调用两次构造函数的情况
            A.prototype=supClass.prototype;
//            将这个与父类相似的类实例化后赋值给子类的原型,这样子类的原型就是这个空类的实例化对象
//           因此子类的原型里面就有了空类的原型下所有属性和方法
            subClass.prototype=new A();
//            子类的原型指针指向子类的构造函数
            subClass.prototype.constructor=subClass;
//            因为可能在子类使用到父类原型
//           设置子类的属性superClass是父类的原型对象
            subClass.superClass=supClass.prototype;
//            如果父类原型的指针没有指向父类的构造函数,仍然指向的是对象
            if(supClass.prototype.constructor===Object.prototype.constructor){
//                将父类的原型指针指向父类构造函数
                supClass.prototype.constructor=supClass;
            }
       }

然后想要继承的子类就可以继承了,下面的代码对继承的子类有一些自己的修改

function Box(user) {
           Ball.call(this,user);
       }
        extend(Box,Ball);
        Box.prototype.d=function () {
            
        };
        Box.prototype.e=5;
        Box.prototype.c=function () {
            Box.superClass.c.call(this);
            console.log(this.a);
        };

下面总结一下:

ES5的继承:
   1、先写extend函数
   2、新建父类和父类所有原型属性和方法
   3、新建子类,并且在子类的构造函数中执行 父类构造函数.call(this,参数1,参数2..)
   4、使用extend函数,填入子类和父类,完成继承
   5、只能使用子类.prototype.属性/方法=...设置添加新的子类方法和属性
           不能使用 子类.prototype={...}这种添加属性方法,这样会覆盖继承的方法
   6、覆盖父类的方法,子类.prototype.父类方法=function(){}
   7、super父类方法,就是希望在父类的该方法执行后在添加一些新的内容
        子类.superClass.父类方法.call(this,参数...);
        这句写在子类覆盖父类方法中
    8、最后就可以使用new来实例化对象了

你可能感兴趣的:(原生JS,ES5继承)