原生JS封装ES5继承操作

骑猪看日落 2022-03-27 03:42 210阅读 0赞

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

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文件

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

直接继承！！！

<!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>