• 继承——原型继承


    ————此篇日志会随着理解长期更新————

    一、核心代码

    原型继承比较简单,其核心代码是:子类通过prototype=new 父类来实现。如下图所示:

    如图所示,父类拥有的方法属性被子类分别继承。

    二、缺点

    原型继承的缺点

    1. 如果子类更改父类的引用属性,会导致继承的子类都会被影响。
    2. 无法向父类传递参数。

    代码如下:

            //父类
            function superClass(name) {
                this.name = name;
            }
            //父类的公共方法
            superClass.prototype.show = function () {
                console.log(this.name);
            }
            //父类的公共属性(引用类型)
            superClass.prototype.books = ['C++', 'Java'];
    
            /****************************/
            //子类
            function subClass() {
            }
    
            //子类继承父类
            subClass.prototype = new superClass();
    
            var A = new subClass();     //实例化子类A
            A.books.push('Javascript'); //更改从父类继承过来的引用属性
            var B = new subClass();     //实例化子类B
            console.log(B.books);       //B类受到影响

     ## 关于无法传递参数的问题:

    因为是通过prototype=父类实例化对象,所以得到的是公共属性。举例来说,有苹果,桔子,柠檬三种水果子类,那么不能只在实例父类时只传一种参数。代码示例:

            //父类:水果类
            function fruit(name)
            {
                this.name = name;
            }
            //子类
            function subClass()
            { }
            //原型继承
            subClass.prototype = new fruit('苹果');   //向父类传进参数'苹果',那么桔子,柠檬怎么办?
            
            var apple = new subClass();     //苹果
            var orange = new subClass();    //桔子
            var lemon = new subClass();     //柠檬
    
            console.log(apple.name);        //打印结果:'苹果'
            console.log(orange.name);       //打印结果:'苹果'
            console.log(lemon.name);        //打印结果:'苹果'
    
            //显然这不是想要的结果,因为每个子类都想拥有自己的name属性。这里就是不能向父类传参的原因。

    因此,这里自然就会想到用构造函数,关于这个在继承——构造函数继承一篇中记录。

    三、深入详解

    ————补充于2018/4/3号,根据另一篇日志记录————

    ##...比较圆满的解释了原型继承....##

  • 相关阅读:
    Linux 用户管理命令-usermod和chage
    用户管理命令-passwd
    Linux 用户管理命令-useradd
    用户和用户组管理-用户管理相关文件
    用户和用户组管理-组信息文件
    用户和用户组管理-影子文件shadow
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/tinaluo/p/8686330.html
Copyright © 2020-2023  润新知