近期通过一些巧合 或者说 思想转变吧 。。。

  想通过blog && 公众号 (个人公众号: KeepinJS)去记录自己的Javascript深度学习的内容,从而达到 进一步的自我提升。

  js面向对象设计 很多都会用到  原型继承和多态 再加以封装 我通过一些大佬视频 和 学习博客 来分享一波自己的见解   如果有描述不当之处 还请及时指正 => QQ :2070994423 ;Email:2070994423@qq.com 或者在我的公众号上留言,我看到的话,有时间会给予回复和沟通,谢谢!

  基础知识不多赘述,来看以下几种继承方式:

原型继承

  

  这里可以通过构造函数创建父类实例,父类实例可以根据不同的参数定义不同的实例属性name,当我们使用原型继承的时候,将子类构造函数原型指向父类实例的时候,再创建子类实例的时候,并不能定义子类的属性,也就是说,虽然父类原型上的方法可以通过这种方式继承下来,但是父类的构造方法(即定义实例属性name)并没有继承下来。

  并且,如果没有在创建父类实例的时候定义父类实例的名字,那么,子类是不知道自己继承的父类实例的名字是什么。

  所以这种继承是最简单,它只是实现了父类定义的属性和方法。

子类构造函数内调用父类构造函数

  

  通过在子类构造函数内调用父类构造函数,实现this指向的改变,可以实现创建子类实例的时候,它们都会有自己私有的属性值

,每个子类实例都是独一无二的。但是这里是不是看出问题了,子类又不能调用父类原型上的方法,只是继承了父类构造函数定义实例属性的方法,因此,这也是不合适的。

组合继承

   

  这样,不仅可以继承父类构造函数初始化实例属性的方法,也可以调用父类原型上的方法,一举两得。

  但是,这里会存在一个问题,new Person()的时候调用一次父类构造函数,子类创建实例的时候又调用了一次父类的构造函数,是不是调用了两次,并且这样的继承必须要创建一个父类实例,有没有办法去减少这样多次调用构造函数和强制调用呢??

寄生组合式继承

 

  这里解析一波Object.create方法,官方定义如下:

  Object.create(obj)方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 (请打开浏览器控制台以查看运行结果。)

  

  就是说参数对象obj是新创建对象obj1的构造函数的原型对象。

  这里寄生组合式方法中调用方法使得子类构造函数的原型对象指向了父类构造函数的原型对象。可以理解为其中建立了__proto__这么一层关系。

  

  注意一点,此时子类构造函数的原型对象的constructor属性是指向Parent的。

 

  所以需要将子类构造函数原型对象的constructor重新指向子类构造函数。

 

ES5和ES6继承的区别

  

  这里使用浏览器环境提供的Array方法,在Fun构造函数上使用寄生组合式继承。但是并没有实现原生Array创建数组实例对象的属性和方法。

  这是为什么呢?

  这是因为原生内部构造函数具有内部属性,而通过Array.apply()方法或者分配原型对象都不能在子类实例的创建过程中将this指向Array。

  ES5通过构造函数创建实例的过程,是先调用子类构造函数,然后将父类属性添加到子类实例上。并且,Array对象存在不可枚举属性和不可继承的静态方法。

  ES6是新建父类实例对象调用父类构造函数,再调用子类构造函数修饰this,这个this始终没有改变,并且可以相比于ES5,可以继承父类的所有行为!!

  (这块细节很多,以后会单独研究后做一篇讨论)

ES6继承

 

  ES6只有静态方法和静态属性,ES7有静态属性的提案。

  这里只提一点,和Java很像,静态方法在外部通过类名调用,比不过内部是通过this调用,而且静态方法是会被继承的。

  

  ES6存在两条继承链:一是子类构造函数的__proto__属性总是指向父类构造函数,二是子类prototype属性也指向父类的prototype属性。

  ES6类的继承使用了Object.setPrototypeOf(Children.prototype, Parent.prototype),具体实现方式百度。

多态

  下面说一下多态,从几个方面阐述和分析:

  首先来说多态的定义:在面向对象语言中,接口的多种不同的实现方式即为多态。

 

  一种是子类和父类可以有不同实现的”虚函数“,子类构造函数定义的函数属性或者是原型上的函数属性会覆盖父类构造函数定义的重名函数属性或者是原型上的重名函数,调用的时候根据原型链来调用。

  

  对于比较运算符,如果是一个对象和一个是数字进行比较,则会调用对象的valueOf方法,如果valueOf方法没有指定,则会调用toString方法;如果是一个对象和一个字符串进行比较,会先尝试toString方法,然后是valueOf方法。

  另外相同类的实例对象之间进行比较,会先尝试转化,再比较大小;而对非同类实例对象比较,则会直接返回false。

  注:valueOf方法只能返回数字!

  

Javascript 继承和多态的更多相关文章

  1. JavaScript 继承 封装 多态实现及原理详解

    面向对象的三大特性 封装 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. ...

  2. JavaScript 面向对象程序设计(下)——继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

  3. JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  4. javascript面向对象编程,带你认识封装、继承和多态

    原文链接:点我 周末的时候深入的了解了下javascript的面向对象编程思想,收获颇丰,感觉对面向对象编程有了那么一丢丢的了解了~很开森 什么是面向对象编程 先上一张图,可以对面向对象有一个大致的了 ...

  5. JavaScript 的继承与多态

    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...

  6. 浅谈JavaScript的面向对象和它的封装、继承、多态

    写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...

  7. 2、C#面向对象:封装、继承、多态、String、集合、文件(上)

    面向对象封装 一.面向对象概念 面向过程:面向的是完成一件事情的过程,强调的是完成这件事情的动作. 面向对象:找个对象帮你完成这件事情. 二.面向对象封装 把方法进行封装,隐藏实现细节,外部直接调用. ...

  8. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  9. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

随机推荐

  1. ssh 端口更改或ssh 远程接不上的问题(尤其是国外服务器)

    问题: Connecting to 149.*.*.*:22...Connection established.To escape to local shell, press 'Ctrl+Alt+]' ...

  2. 在Ubuntu下安装lrzsz

    目录 自动安装 手动安装 下载 解压 安装 创建连接 在Ubuntu 14.04x64下安装lrzsz 自动安装 在终端中,输入命令 sudo apt-get install lrzsz 由于一些原因 ...

  3. javascript中使用"<"符号,比较大小的是字符串或对象时正确的处理方法

    <![CDATA[ var items=document.getElementsByTagName("li"); for(var i=0;i<items.length; ...

  4. Redis不支持ssl

    一直在公司内部推荐redis做cache管理,今天偶然想起虽然C#没问题,可是c/c++没查过可不可行. 结果查了一下,还真tmd有问题,官方的c client版本只支持linux side的,根本没 ...

  5. XML基础学习

    XML 信息传输工具 标签未被预定义 具有自我描述性 W3C的推荐标准 XML  HTML的差异 XML:传输 存储数据 HTML:显示数据 树结构 <root> <child> ...

  6. layui 表格组件不能访问连续的属性的解决办法

    table.js里第741行改成这样,它这里只能访问一级属性// var content = item1[field]; 不能访问对象内的对象,比如item1.depart.name,只能访问一级属性 ...

  7. 火狐firebug和firepath插件安装方法(最新)

    火狐浏览器最近下掉了firebug和firepath插件,用户即使下载了火狐55以下的版本,也无法查找到这两个插件. 因此,可以用以下方法来获取这两个插件. 1.下载火狐55以内版本安装包,安装时迅速 ...

  8. Day 22 初识面向对象

    一.两种编程思想 1.面向过程编程 核心是'过程',过程指的是解决问题的步骤,就是先干什么再干什么 基于面向过程思想编写程序相当于写一条流水线,是一种机械式的思维方式 优点:解决问题的思路清晰,可以把 ...

  9. Ubuntu16.04更新源

    首先说说为什么要更新源,我是在docker容器中修改配置文件时有所需要,要用到vim,但是会报错.找不到需要的包. 网上都会说要先更新:apt-get update 但是超级慢有没有,我更新了4小时, ...

  10. SQL触发器批量删除数据库中的表

    以下通过触发器批量删除数据库中的表,SQL2008已验证 DECLARE @Table NVARCHAR() DECLARE @Count Int = DECLARE tmpCur CURSOR FO ...