原生JS封装ES5继承操作

首先需要把对象深复制（复制原型）写一下：

 Object.prototype.addProto=function (sourceObj) {
        var names=Object.getOwnPropertyNames(sourceObj);
        for(var i=0;i<names.length;i++){
            var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
            if(typeof desc.value==="object" && desc.value!==null){
                var obj=new desc.value.constructor();
                obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值
                Object.defineProperty(this,names[i],{
                    enumerable:desc.enumerable,
                    writable:desc.writable,
                    configurable:desc.configurable,
                    value:obj
                });
                continue;
            }
            Object.defineProperty(this,names[i],desc);
        }
        return this;
    }

然后开始正题：

引入外部封装好的JS文件

(function () {
    Object.prototype.addProto=function (sourceObj) {
        var names=Object.getOwnPropertyNames(sourceObj);
        for(var i=0;i<names.length;i++){
            var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
            if(typeof desc.value==="object" && desc.value!==null){
                var obj=new desc.value.constructor;
                obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值
                Object.defineProperty(this,names[i],{
                    enumerable:desc.enumerable,
                    writable:desc.writable,
                    configurable:desc.configurable,
                    value:obj
                });
                continue;
            }
            Object.defineProperty(this,names[i],desc);
        }
        return this;
    };
    Function.prototype.extendClass=function (supClass) {
        function F() {}
        F.prototype=supClass.prototype;
        this.prototype=new F();
        this.prototype.constructor=this;
        this.supClass=supClass.prototype;
        if(supClass.prototype.constructor===Object.prototype.constructor){
            supClass.prototype.constructor=supClass;
        }
    }
})();

然后我们就可以用啦！！！

直接继承！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utile.js"></script>
</head>
<body>
    <script>
        function Box(num) {
            this.num=num;
        }
        Box.prototype.addProto({
            a:1,
            b:2,
            c:function () {
                
            },
            set data(value){
                this.b=value;
            },
            get data(){
                return this.b;
            }
        });


        function Ball(num) {
//            this.constructor//---Ball
//            this.constructor.supClass//---因为下面将会继承，继承函数中设定supClass的内容就是父类的原型
//              this.constructor.supClass.constructor//父类的构造函数
            this.constructor.supClass.constructor.call(this,num);
//            相当于ES6 super(num)
        }

        Ball.extendClass(Box);

        Ball.prototype.addProto({
            d:10,
            f:function () {
                
            },
            c:function () {
//                相当于ES6 super.c()
                this.constructor.supClass.c.call(this)
            }
        });

        var ball=new Ball(10);
        console.log(ball)
    </script>
</body>
</html>

原生JS封装ES5继承操作

猜你喜欢