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

<!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. 被 GANs 虐千百遍后，我总结出来的 10 条训练经验

    一年前,我决定开始探索生成式对抗网络(GANs).自从我对深度学习产生兴趣以来,我就一直对它们很着迷,主要是因为深度学习能做到很多不可置信的事情.当我想到人工智能的时候,GAN是我脑海中最先出现的一个 ...

  2. 控件类——Button、UIControlState状态、title及其属性

    封装: 封装按钮:1.有提示文字 —>UILable 2.并且可以点击 —> UIControl UIButton:是一个按钮(系统已经把UIControl封装好了).  里面可以放文字. ...

  3. 一个java的http请求的封装工具类

    java实现http请求的方法常用有两种,一种则是通过java自带的标准类HttpURLConnection去实现,另一种是通过apache的httpclient去实现.本文用httpclient去实 ...

  4. TypeScript 学习笔记（二）

    块级作用域变量: 1.不能在被声明前读或写 console.log(num); let num: number = 0; // 报错 2.仍然可以在一个拥有块级作用域的变量声明前通过函数捕获它,但不能 ...

  5. python从入门到放弃之协程

    协程 协程,又称微线程,纤程.英文名Coroutine. 协程的概念很早就提出来了,但直到最近几年才在某些语言(如Lua)中得到广泛应用. 子程序,或者称为函数,在所有语言中都是层级调用,比如A调用B ...

  6. web网页利用JavaScript实现对摄像头的调用

    实现效果: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  7. [视频教程] ubuntu系统下以守护进程方式安装使用Redis

    直接访问redis的中国官网,在下载部分,可以看到安装和使用的方式.wget http://download.redis.io/releases/redis-5.0.4.tar.gztar xzf r ...

  8. NGINX动态增加模块，平滑升级

    这是一个小心活,不过,多操作几次,也就熟悉了. 参考URL: https://segmentfault.com/a/1190000006755963 一,安装nginx依赖包. yum install ...

  9. NOIP 2011 计算系数

    洛谷 P1313 计算系数 洛谷传送门 JDOJ 1747: [NOIP2011]计算系数 D2 T1 JDOJ传送门 Description 给定一个多项式(ax + by)k,请求出多项式展开后x ...

  10. vue.config.json CopyWebpackPlugin 没有生效

    本地生效,服务器不生效. 因为是jenkinis构建,没有留意到报错.后来发现错误:ENOENT: no such file or directory, rename 解决方法就是:删除package ...