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

<!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. Java数据结构（一）：栈

    导言:栈和我们的现实当中的箱子是一样的,保持一个先进后出,后进先出的原则.比如我们往一个箱子堆积衣服,一件一件地放进去之后,过一段时间再回来拿.那么最先放进去的衣服肯定最后拿出来,最后放进去的衣服就会 ...

  2. 如何使用 CODING 进行瀑布流式研发

    你好,欢迎使用CODING!这份最佳实践将帮助你通过 CODING 更好地实践瀑布流式开发流程. 什么是瀑布流式研发 1970 年温斯顿·罗伊斯(Winston Royce)提出了著名的"瀑 ...

  3. mysql 之优化

    # ### part1 : sql语句优化 # (1) mysql 执行流程 客户端: 发送链接请求,然后发送sql语句 服务端: 1.连接层: 提供和客户端链接的服务 show processlis ...

  4. Linux—服务器之间传输文件

    https://www.jb51.net/article/82608.htm https://blog.csdn.net/taian1665/article/details/86492400 http ...

  5. 1、mongoDB服务器的搭建与连接

    下载----编译----安装之后: 1.首先,创建一个mongodb_simple的目录,进入到目录中. 2.创建文件夹:data,用来存储数据库的数据文件. 3.创建文件夹:log,用来存储数据库的 ...

  6. CodeForces - 1236B （简单组合数学）

    题意 有n种物品和m个背包,每种物品有无限个,现将若干个物品放到这些背包中,满足: 1.每个背包里不能出现相同种类的物品(允许有空背包): 2.在所有的m个背包中,每种物品都出现过. 求方案数,对10 ...

  7. itest(爱测试) 3.3.5 发布，开源敏捷测试管理 & BUG 跟踪管理软件

    v3.3.5 下载地址 :itest下载 itest 简介:查看简介 V3.3.5 有 6个功能增强,2个BUG修复 ,详情如下所述. 用户反馈并强烈要求增强的功能实现:    1: 测试用例管理可线 ...

  8. C C++ ARM X86 函数 方法 的调用约定

    参考:https://bbs.pediy.com/thread-224583.htm 整理成表格方便查询 cdecl(C规范), stdcall(WinAPI默认), fastcall, ATPCS( ...

  9. axios+vue实现动态渲染员工数据+数据是对象

    <style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...

  10. 02vuex-modules

    01===> module的理解:将一个大的系统进行拆分 拆分成若干个细的模块 给个模块都有自己的 state mutations 等属性 这样可以在自己的小模块中进行修改 方便维护 modul ...