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

<!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. [译]Zookeeper的优点与局限性

    1.Zookeeper的优点与局限性 在学习了Zookeeper(后文都简称zk)的介绍和功能后,您已经很好地理解了zk. 现在,在这个zk教程中,我们将讨论zk的优点和局限性. zk有几个功能对用户 ...

  2. Spring Boot的注解，你知道或者不知道的都在这里！

    1.1 定义 Annotation(注解),用于为Java代码提供元数据.简单理解注解可以看做是一个个标签,用来标记代码.是一种应用于类.方法.参数.变量.构造器及包的一种特殊修饰符. 1.2 注解的 ...

  3. css利用padding-top设置等比例遇到的问题

    外层盒子如果设置了左右margin,外层盒子设置对应比例的时候,是按外层盒子的宽+两边的margin算做横向总长度的,不是只算宽度的.

  4. 微信小程序访问webservice（wsdl）+ axis2发布服务端(Java)

    0.主要思路:使用axis2发布webservice服务端,微信小程序作为客户端访问.步骤如下: 1.服务端: 首先微信小程序仅支持访问https的url,且必须是已备案域名.因此前期的服务器端工作需 ...

  5. DevOps 工程师成长日记系列四：打包

    原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-part-4-packag ...

  6. [Go] 利用有缓存channel控制同时并发的数量

    如果有一个大循环,里面每一个都开启groutine,那么瞬间就会开启非常多的groutine,要解决这个问题就要用channel的阻塞特性来解决 package main import "t ...

  7. Java学习笔记（4）--- 变量类型，修饰符

    1.变量类型: a.定义: 和C++差不多,就是: type identifier [ = value][, identifier [= value] ...]: type为Java数据类型.iden ...

  8. Feign的介绍与使用（五）

    一.Feign的介绍 Feign是一个声明式 WebService 客户端,使用Feign能够让编写Web Service 客户端更加简单,它的使用方法是定义一个接口,然后在上面添加注解,同时也支持J ...

  9. 《LinuxTools》

    https://zhuanlan.zhihu.com/p/37196870 Linux基础 Linux工具进阶 工具参考篇 1. gdb 调试利器 2. ldd 查看程序依赖库 3. lsof 一切皆 ...

  10. Tensorflow的不足之处

    Tensorflow还是有不足的地方.第一体现在Tensorflow的数据机制,由于tensor只是占位符,在没有用tf.Session().run接口填充值之前是没有实际值的.