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面试题继承方法优缺点的资料请关注我们其它相关文章!

(0)

相关推荐

  • Javascript组合继承方法代码实例解析

    组合继承 组合继承,指将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式.其背后思路使用用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承.这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性. 下面来看一个例子 function SuperType(name) { this.name = name; this.color = ['red', 'blue', 'green']; }; // SuperType.prototype

  • JavaScript中的几种继承方法示例

    1.原型链继承 原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father(). 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型.js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型.原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举. var obj = {}; obj.__proto__ === Object.proto

  • JavaScript类的继承方法小结【组合继承分析】

    本文实例讲述了JavaScript类的继承方法.分享给大家供大家参考,具体如下: 在JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类).继承也有之前问题,比如字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数. 为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术,或者成为对象冒充(伪造对象.经典继承)的技术来解决这两种问题. function aObj(){ this.name

  • js的继承方法小结(prototype、call、apply)(推荐)

    js的原型继承 --  prototype 先说下什么是prorotype? js中,俗话说"一切皆对象".用new 出来的都是函数对象:否则就是普通对象 函数对象都有prototype(原型对象):而普通对象则只有__proto__(原型指针) 函数对象的一个特点:可以实现不同类之间的方法继承 函数的子类可以共享父类的方法,而父类不能想用子类的方法 eg: (prototype的继承) //创建父类函数对象 function Personal(name, age) { this.na

  • javaScript面向对象继承方法经典实现

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来给了程序员很大的自由,也带来了一些缺陷. 虽然JavaScript不算是一门面向对象的语言.但是我们可以模仿着其他语言实现面向对象的方式来实现JavaScript的面向编程. 下面是JavaScript教程中非常经典的继承方法. 复制代码 代码如下: //定义一个Pet对象.通过这一个名称和数量的腿

  • javascript的几种继承方法介绍

    1.原型链继承:构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.确认原型和实例之间的关系用instanceof. 原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数 function Parent(){ this.name='mike'; } function Child(){ this.age=12; } //儿子继承父亲(原型链) Child.prototype

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

    目录 说一说js继承的方法和优缺点? 一.原型链继承 二.借用构造函数(经典继承) 三.组合继承 四.原型式继承 五.寄生式继承 六.寄生组合式继承 说一说js继承的方法和优缺点? 要点: 原型链继承.借用构造函数继承.组合继承.原型式继承.寄生式继承.寄生组合式继承.ES6 Class 答: 一.原型链继承 缺点: 1.引用类型的属性被所有实例共享 2.在创建 Child 的实例时,不能向 Parent 传参 //原型链继承 function Parent() { this.parentPro

  • js实现继承的方法及优缺点总结

    整理<javascript高级程序设计>中继承的方法以及优缺点. 1. 原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法. 原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针

  • JS继承实现方法及优缺点详解

    前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

  • js类式继承的具体实现方法

    在开始摆弄代码之前,应该搞清楚使用继承的目的和能带来什么好处.一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化类之间的耦合.而要做到这两者都兼顾是很难的,我们需要根据具体的条件和环境下决定我们应该采取什么方法.根据我们对面向对象语言中继承的了解,继承会带类直接的强耦合,但js由于其特有的灵活性,可以设计出强耦合和弱耦合,高效率和低效率的代码.而具体用什么,看情况. 下面提供js实现继承的三种方法:类式继承,原型继承,掺元类.这里先简述类式继承,后两种在往后的随便中简述,请多多关

  • js继承实现方法详解

    本文实例讲述了js继承实现方法.分享给大家供大家参考,具体如下: var animal=function(name){ //构造函数 this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ //prototype主要作用:给类增加一个新的属性或函数 alert(this.name+"正在叫!"); }; ani

  • 详解js创建对象的几种方法及继承

    创建对象 通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 工厂模式 考虑在ES中无法创建类(ES6前),开发人员发明了一种函数,用函数来封装以特定接口创建对象的细节.(实现起来是在一个函数内创建好对象,然后把对象返回). function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.j

  • js中实现继承的五种方法

    借用构造函数 这种技术的基本思想很简单,就是在子类型构造函数的内部调用超类型的构造函数.另外,函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数. function Box(name){ this.name = name } Box.prototype.age = 18 function Desk(name){ Box.call(this, name) // 对象冒充,对象冒充只能继承构造里的信息 } var desk = ne

  • 一道超经典js面试题Foo.getName()的故事

    目录 一.解析: 1.Foo.getName() 二.解析: 2.getName() 三.解析: 3.Foo().getName() 四.解析: 4.getName() 五.解析: 5.new Foo.getName() 六.解析: 6.new Foo().getName() 七.解析: 7.new new Foo().getName() 总结 下面是一道超经典的JS面试题. 蕴含了静态属性与实例属性,变量提升,this指向,new一个函数的过程 function Foo() { getName

  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • JS对象的深度克隆方法示例

    本文实例讲述了JS对象的深度克隆方法.分享给大家供大家参考,具体如下: js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象. 尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的! 我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现! 我整理了两种深度克隆对象的方法,供大家参考! 首先var 一个假数据 复制代码 代码如下: var schedule = {"status"

随机推荐