javascript类继承的实现方法

 更新时间:2023年10月23日 14:18:26   作者:Fogwind  
JavaScript是一种面向对象的语言,而继承是面向对象编程的一个重要特性,在JavaScript中,继承的实现方式有多种,本文将介绍javascript类的继承的实现,感兴趣的朋友一起看看吧

首先需要知道两个概念:

  • 构造函数的prototype属性是实例的原型,这个属性的值是一个对象,可以被重新赋值,比如有时候为了简便会把prototype属性重新赋值为一个对象字面量;
  • 每个对象都有一个__proto__内部属性,指向自己的原型,虽然是非标准的,但是各大浏览器都实现了他,在mdn文档中提到的[[Prototype]]就是__proto__。比如实例的__proto__属性就是指向了构造函数的prototype;

下面的代码来自@better-scroll/core实现了类的继承。

// extendStatics函数的作用是实现类静态方法的继承,构造函数原型继承,最终结果是d可以访问b的属性和方法。
var extendStatics = function (d, b) {
    // Object.setPrototypeOf() 方法设置一个指定的对象的原型(即,内部 [[Prototype]] 属性)到另一个对象或 null。是Object.prototype.__proto__ 的替代
    extendStatics = Object.setPrototypeOf ||
        (
            // 这里的逻辑是:如果当前环境支持 __proto__关键字, 就用__proto__修改原型的指向
            {
                __proto__: []
            }
            // instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
            instanceof Array && function (d, b) {
                d.__proto__ = b; // 把d的原型指向b
            }
        ) ||
        /* 如果以上两者修改原型指向的方法都不支持那么手动将b上的属性添加到d上 */
        function (d, b) {
            for (var p in b) {
                // 如果p是对象b自身的属性,那么将属性p添加到对象d上
                if (Object.prototype.hasOwnProperty.call(b, p)) {
                    d[p] = b[p];
                }
            }
        };
    return extendStatics(d, b);
};
function __extends(d, b) {
    extendStatics(d, b);
    // 这里 __ 函数的作用是: 1. 保证d的构造函数指向正确;2.通过 __ 的实例实现继承;
    function __() {
        this.constructor = d;
    }
    __.prototype = b.prototype;
    //Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__
    // 如果b不是null, d.prototype = new __(); d.prototype.__proto__ = b.prototype;
    d.prototype = b === null ? Object.create(b) : new __();
}

对于__extends函数中的如下代码:

function __() {
    this.constructor = d;
}
__.prototype = b.prototype;
d.prototype = new __();

其实这段逻辑用Object.create()也能实现,用Object.create()实现后的__extends如下:

function __extends(d, b) {
    extendStatics(d, b);
    d.prototype = Object.create(b.prototype);
    d.prototype.constructor = d;
}

到此这篇关于javascript类的继承的实现的文章就介绍到这了,更多相关js类继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript的Proxy可以做哪些有意思的事儿

    JavaScript的Proxy可以做哪些有意思的事儿

    这篇文章主要介绍了JavaScript的Proxy可以做哪些有意思的事儿,Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为 (在文档中被称为traps,我觉得可以理解为一个针对对象各种行为的钩子),,需要的朋友可以参考下
    2019-06-06
  • js图片无缝滚动插件使用详解

    js图片无缝滚动插件使用详解

    这篇文章主要为大家详细介绍了js图片无缝滚动插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js变换显示图片的实例

    js变换显示图片的实例

    题意:在界面上有一张图片,下面有四个单选按钮,点击每一个按钮图片变换成不同的图片
    2013-04-04
  • JS文件中加载jquery.js的实例代码

    JS文件中加载jquery.js的实例代码

    这篇文章主要介绍了JS文件中加载jquery.js的方法,JS文件添加其他JS的实例代码,感兴趣的小伙伴们可以参考一下,具体如下
    2018-05-05
  • JavaScript 事件查询综合

    JavaScript 事件查询综合

    比较全的 js事件,大家可以快速的掌握 js事件效果代码。
    2009-07-07
  • js动态调用css属性的小规律及实例说明

    js动态调用css属性的小规律及实例说明

    本篇文章主要介绍了js动态调用css属性的小规律及实例说明。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • layer弹出的iframe层在执行完毕后关闭当前弹出层的方法

    layer弹出的iframe层在执行完毕后关闭当前弹出层的方法

    今天小编就为大家分享一篇layer弹出的iframe层在执行完毕后关闭当前弹出层的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解JS判断页面是在手机端还是在PC端打开的方法

    详解JS判断页面是在手机端还是在PC端打开的方法

    这篇文章主要介绍了JS判断页面是手机端还是在PC端打开的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • webpack的pitching loader详解

    webpack的pitching loader详解

    这篇文章主要介绍了webpack的pitching loader详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • B/S模式项目中常用的javascript汇总

    B/S模式项目中常用的javascript汇总

    本篇文章是对B/S模式项目中常用的javascript进行了汇总介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论