理解类、对象、实例、原型链以及继承

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>理解类、对象、实例、原型链以及继承</title>

</head>

<body>

</body>

</html>

<script type="text/javascript">

    /*

     *  理解类、对象、实例、原型链以及继承

     *

     * */

    /**

     * 声明父类

     * @constructor SuperClass

     */

    function SuperClass() {

        this.superValue = "我是SuperClass父类的属性'superValue'";

    }

    SuperClass.prototype.getSuperValue = function () {

        return this.superValue;

    }

    /**

     * 声明子类

     * @constructor

     */

    function SubClass() {

        this.subValue = "我是SubClass子类的属性'subValue'"

    }

    /*

     * 为什么使用继承？为什么使用面向对象编程？什么是类？

     * 类：对一类事物的行为和属性的抽象；人类，禽类(家禽类，飞禽类)，哺乳动物类等等有相同行为和属性的事物进行抽象；

     * OOP：面向对象编程；

     * 为什么使用面向对象编程：直白一点就是写更少的代码做更多的事情，另外就是提升代码的可维护性和可读性；

     * 当然重要的面向对象的是设计而不是编程语言，语言仅仅我们理解设计和实现设计的一种方式；

     */

    var _subClass = new SubClass();

    /*

    *   到目前为止SuperClass类和SubClass没有建立继承关系，怎么使用类式继承的方式实现继承关系？

    * */

    //类式继承

    SubClass.prototype = new SuperClass();

    //为子类添加新属性和方法

    SubClass.prototype.getSubValue = function () {

        return this.subValue;

    }

    /*

     *  在学习过程中，为了方便理解，我们将首字符大些的函数都称为类。让我们更方便、容易的理解对象，类，实例之间的关系；

     *

     *  类的原型对象：

     *      类的原型对象的作用就是为类添加【共有】属性和方法，但是类不能直接访问这些属性和方法，必须通prototype属性进行访问，

     *      我们创建类实例时，类实例除了会复制一份自身实例属性和方法外，还会包含一个影藏的属性__proto__，

     *      这个属性指向的是类的prototype属性，

     *      并且prototype属性的constructor属性指向的是当前类对象，这样子就构成了类的原型链；

     *      不管我们是修改prototype的值还是constructor所指向的类的对象，都会影响原型链，如果不能一一对应，都会破坏类的完整性；

     *

     *  为什么这么写就实现了继承呢？

     *

     *  1、在前面的原型链中我们使用checkObj.prtotype = {};这种方式对函数进行封装，使得checkObj对象包含我们所需要的属性和方法；

     *  2、var _superClass = new SuperClass();，所得到就是一个对象，我们剔除里面的属性和方法，是不是就是一个{}对象；

     *  3、由此简化，我们就可以看出类式继承其实我们很早就用过，只是一直不知道而已；

     *  4、因为javascript是没有继承这些个花里胡哨的东西的，这些概念都是模拟的，现在我们来还原这个SubClass类的原型链；

     *          1.SubClass类没有执行SubClass.prototype = new SuperClass();之前，他的原型链可以参见【类的原型对象】分析：

     *            var _subClass = new SubClass();

     *            _subClass.__proto__ === SubClass.prototype；

     *            SubClass.prototype.constructor = function SubClass(){}

     *            以上是在没有执行类式继承的原型链；

     *            2.执行SubClass.prototype = new SuperClass()后，他的原型链就变成如下：

     *            var _subClass = new SubClass();

     *             _subClass.__proto__ === SuperClass.prototype；

     *           SuperClass.prototype.constructor = function SuperClass(){}

     *           以上是在执行类式继承后的原型链；

     *

     *   当一个类是否完成了对类的继承，我们可以使用instanceof来检测

     *

     *   综上所述：类式继承通过修改类的原型指向的对象实例来实现对类的继承。

     *

     * */

    var _superClass = new SuperClass();

    console.log(_superClass);

    var _subClass = new SubClass();

    console.log(_subClass.getSuperValue());

    console.log(_subClass.getSubValue());

    //instanceof：用来检测某个实例是不是某个类的实例

    console.log(_subClass instanceof SuperClass);

    console.log(_subClass instanceof SubClass);

    /*

     * 实现继承的目的就是维持原型链的完整，

     * 不管是后续我们提到的构造函数继承，

     * 组合式继承，原型式继承，寄生式继承，

     * 组合寄生式继承都是为了满足参数和原型链的完美转移(对象关系的转换)；

     *

     * 组合式继承，原型式继承，寄生式继承，组合寄生式继承

     * 都是满足参数和原型链的完美转移而衍生出来的补丁，

     * 并正确的演绎出继承实际效果，

     * 在实际项目中，使用哪种方式实现对象关系的转换，

     * 根据实际业务场景来确定，选择最优者就可以；

     * */

</script>

理解类、对象、实例、原型链以及继承 - WPF特工队内部资料的更多相关文章

  1. 三张图搞懂JavaScript的原型对象与原型链 / js继承，各种继承的优缺点（原型链继承，组合继承，寄生组合继承）

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  2. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  3. 1--面试总结-js深入理解，对象，原型链，构造函数，执行上下文堆栈，执行上下文，变量对象，活动对象，作用域链，闭包，This

    参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...

  4. 小谈js原型链和继承

    原型(prototype)在js中可是担当着举足轻重的作用,原型的实现则是在原型链的基础上,理解原型链的原理后,对原型的使用会更加自如,也能体会到js语言的魅力. 本文章会涉及的内容 原型及原型对象 ...

  5. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  6. JS高级. 03 混入式继承／原型继承／经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链

    继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...

  7. 【javascript】对原型对象、原型链的理解

    原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...

  8. Js笔记（对象，构造函数，原型，原型链，继承）及一些不熟悉的语法

    对象的特性: 1.唯一标识性,即使完全不一样的对象,内存地址也不同,所以他们不相等 2.对象具有状态,同一个对象可能处在不同状态下 3.对象具有行为,即对象的状态可能因为他的行为产生变迁 Js直到es ...

  9. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

随机推荐

  1. GO与PHP的AES交互,key长度问题

    今天在使用go与php的AES加解密交互中,一直有个问题那就是在go中加密后,在php端始终都是无法解密,经过排查最后发现是加密key长度引起的问题, 这里简单记录下. go的AES使用的是第三方的库 ...

  2. HTTP中的2XX状态码

    HTTP状态码分类 1XX --信息,服务器收到请求,需要请求者继续执行操作 2XX--成功,操作被成功接收并处理 3XX--重定向,需要进一步的操作以完成请求 4XX--客户端错误,请求包含语法错误 ...

  3. HTTP协议中的chunked编码解析

    \r\n\r\n"了. chunked编码很简单,是不是? 不过,在协议还原的实现过程中,如何高效高性能地对chunked进行解码,是一件值得挑战的事哦.毕竟,HTTP的流量占比不小的. 长 ...

  4. Python图像处理库Pillow常用使用方法

    PIL(Python Imaging Library)是Python一个强大方便的图像处理库,只支持到Python2.7.Pillow是PIL的一个派生分支,在Python3中用Pillow代替PIL ...

  5. Saltstack_使用指南08_远程执行-返回程序

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

  6. 如何在Appium中使用AI定位

    当我们在写自动化测试脚本的时候,传统情况下一定要知道元素的属性,如id.name.class等.那么通过AI的方式定位元素可能就不需要知道元素的属性,评价人对元素的判断来定位,比如,看到一个搜索框,直 ...

  7. C/S与B/S架构

    目录 软件开发架构 C/S架构 数据放在服务端和客户端的利弊: B/S架构 软件开发架构 开发软件,必须要开发一套 客户端 和 服务端 服务端与客户端的作用 服务端:24小时不间断提供服务 客户端:享 ...

  8. Python3面向对象编程实例

    /*认真研究完这个实例,理解python面向对象编程的方法*/class Person: """人员信息""" # 姓名(共有属性) nam ...

  9. c# WF 第5节 窗体的控件

    本节内容: 1:控件在哪里 2:控件怎么添加 3:窗口的显示与隐藏 4:实例单击窗体,出现另一个窗体 1:控件在哪里 视图 --> 工具箱 2:控件怎么添加 第一种:从工具箱直接拉 第二种:在代 ...

  10. centos7.6离线安装mysql5.7（附下载链接）

    本来打算直接用原生yum源安装,但是跨国访问网络太慢,只好采用离线安装的方式,原理就是把所需的rpm下载下来再上传服务器安装. 1.rpm文件下载地址: 目录: http://repo.mysql.c ...