当前位置 : 主页 > 网络编程 > JavaScript >

js面试题继承的方法及优缺点解答

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 说一说js继承的方法和优缺点? 一、原型链继承 二、借用构造函数(经典继承) 三、组合继承 四、原型式继承 五、寄生式继承 六、寄生组合式继承 说一说js继承的方法和优缺点?
目录
  • 说一说js继承的方法和优缺点?
    • 一、原型链继承
    • 二、借用构造函数(经典继承)
    • 三、组合继承
    • 四、原型式继承
    • 五、寄生式继承
    • 六、寄生组合式继承

说一说js继承的方法和优缺点?

要点: 原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、ES6 Class

答:

一、原型链继承

缺点:

  • 1.引用类型的属性被所有实例共享
  • 2.在创建 Child 的实例时,不能向 Parent 传参
//原型链继承
        function Parent() {
            this.parentPrototype = "parent prototype"
            //验证这种继承方法的确定,如果父类示例中存在一个引用类型的属性,将会被所有子类共享
            this.parentObj = {
                info: "我是 parent 引用属性parentObj中的 info"
            }
        }
        function Children() {
        }
        //将Children的原型对象指定为Parent的示例,通过原型链,将Parent中的属性赋值给Children示例
        Children.prototype = new Parent();
        const a = new Children();
        console.log(a.parentPrototype); // parent prototype
        //缺点
        const b = new Children();
        //在a示例中改动继承的引用属性
        a.parentObj.info = "我是a示例中 引用属性parentObj中的 info"
        //b与a示例共享引用属性
        console.log(b.parentObj.info); // 我是a示例中 引用属性parentObj中的 info

二、借用构造函数(经典继承)

优点:

  • 1.避免了引用类型的属性被所有实例共享
  • 2.可以在 Child 中向 Parent 传参

缺点:

  • 1.方法都在构造函数中定义,每次创建实例都会创建一遍方法。
function Parent() {
                this.parentPrototype = "parent prototype"
                this.obj = {
                    info: "parent obj info"
                }
                this.fn = function () {
                    console.log("打印功能")
                }
            }
            function Children() {
                Parent.call(this);
            }
            const a = new Children();
            console.log(a.parentPrototype); // parent ptototype
            //缺点 此时Parent()会再次创建一个fn函数,这个是没有必要的
            const b = new Children();
            a.obj.info = "a obj info";
            //优点 避免了子类实例共享引用属性
            console.log(b.obj.info) // parent obj info;

三、组合继承

优点:

  • 1.融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。
function Parent() {
                this.parentPrototype = "我是Parent 中的属性"
            }
            //Parent中的方法,在原型上定义
            Parent.prototype.pFn = function () {
                console.log('我是Parent中的方法');
            }
            function Children() {
                //Parent中的属性仍然在构造函数中继承
                Parent.call(this);
            }
            //将Children的原型对象赋值为 Parent实例,这样Parent中的方法也能够被Children继承
            Children.prototype = new Parent();
            const c = new Children();
            console.log(c.parentPrototype); //我是Parent 中的属性
            c.pFn(); //我是Parent中的方法

四、原型式继承

缺点: - 1.包含引用类型的属性值始终都会共享相应的值,这点跟原型链继承一样。

function objFn(o) {
                o.objFnPrototype = "我是 objFnPrototype"
                function F() {}
                F.prototype = o;
                return new F();
            }
            let a = objFn({
                name: "name1"
            });
            console.log(a.name); //name1
            console.log(a.objFnPrototype); //我是 objFnPrototype

五、寄生式继承

缺点:

  • 1.跟借用构造函数模式一样,每次创建对象都会创建一遍方法。
function createObje(obj) {
                let clone = Object.assign(obj); //接受到对象后,原封不动的创建一个新对象
                clone.prototype1 = "我是新增的prototype1"; //在新对象上新增属性,这就是所谓的寄生
                return clone; //返回新对象
            }
            const parent = {
                parentPrototype: "parentPrototype"
            }
            //c实例,就继承了parent的所有属性
            let c = createObje(parent);
            console.log(c.parentPrototype); //parentPrototype

六、寄生组合式继承

优点:

  • 1.这种方式的高效率体现它只调用了一次 Parent 构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。
  • 2.与此同时,原型链还能保持不变;
  • 3.因此,还能够正常使用 instanceof 和 isPrototypeOf。
function inherProto(superType, subType) {
                //拷贝一个超类的原型副本
                let proto = {
                    ...superType.prototype
                };
                //将原型的超类副本作为子类的原型对象,也就是第一种中的原型链继承方式,只不过继承的是超类原型的副本
                subType.prototype = proto;
                //这一步比较迷,官方的说法是,我们在拷贝超类的原型的时候,拷贝的proto对象,将会丢失默认自己的构造函数,也就是superType,
                //所以我们这里将它的构造函数补全为subType。貌似不做这一步也没啥问题,但是缺了点东西可能会有其他的副作用,所以还是补上
                proto.constructor = subType;
            }
            function Super() {
                this.superProto = "super proto";
                this.colors = ["red", "yelloy"];
            }
            function Sub() {
                this.subProto = "sub proto";
                this.name = "sub name";
                //这里还是借用构造函数的套路
                Super.call(this);
            }
            Super.prototype.getName = function () {
                console.log(this.name);
            }
            //这里要在定义完Super的属性后执行,因为继承的是超类原型的副本,与Super.prototype是两个对象,在这之后再改变Super.prototype,就已经不会在影响到Sub所继承的副本超类原型对象了
            inherProto(Super, Sub);
            let a = new Sub();
            console.log(a.getName);

以上就是js面试题继承的方法及优缺点解答的详细内容,更多关于js面试题继承方法优缺点的资料请关注易盾网络其它相关文章!

上一篇:Vue实现数字时钟效果
下一篇:没有了
网友评论