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

<!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. .NET MVC5简介（一）

    就像是.NET Framework WebApi与.NET Core WebApi一样,.NET Framework MVC与.NET Core MVC的区别,也是框架的之间的区别.本系列先首先从.N ...

  2. Tomcat安装、使用（Windows）

    一.下载.安装 1.下载 进官网下载 : https://tomcat.apache.org/ 选择自己适合的版本.在这里演示的是下载 Tomcat 7(解压安装版). 2.解压.启动tomcat 解 ...

  3. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

  4. Java web实现原理

    说明 最近在看一本java web和tomcat技术介绍的书籍.故此,希望通过文字总结的方式总结自己学习所获,本篇主要介绍java实现web基本的信息浏览的方法原理. web的本质 由于技术能力有限, ...

  5. SRDC - ORA-1562: Checklist of Evidence to Supply (Doc ID 1682728.1)

    SRDC - ORA-1562: Checklist of Evidence to Supply (Doc ID 1682728.1) Action Plan 1.  Execute srdc_db_ ...

  6. 在MVC视图中将数字转换为string类型后保留两位小数

    <td>@item.recharge_reward_rate.ToString("F2")%</td> @*保留小数两位*@ <td>@item ...

  7. UEFI Install CentOS 7

    bios必须设置u盘为第一启动项 编辑E:\EFI\BOOT\grub.cfg中所有inst.stage2=hd:LABEL=*与卷标名称一致(区分大小写)(linux系统写入镜像无需修改) inst ...

  8. C++：基本类型的转换

    C++:基本类型的转换 一.string转为int [参考:https://blog.csdn.net/m0_37316917/article/details/82712017] string num ...

  9. 各种windows10下的快捷键

    Windows键+ctrl+D 创建虚拟桌面 windows键+Ctrl+方向键 可以切换桌面 windows+tab ctrl+alt+TAB 切换应用 windows+[1-9] 打开任务栏固定的 ...

  10. 利用java程序构造mysql测试数据

    package com.baidu.mysql;import java.sql.*; public class MysqlJdbc { /** * @param args */ public stat ...