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类继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 非常漂亮的js烟花效果

    非常漂亮的js烟花效果

    这篇文章主要为大家详细介绍了js实现非常漂亮的烟花效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 详解JS HTML Web端使用MQTT通讯测试

    详解JS HTML Web端使用MQTT通讯测试

    这篇文章主要介绍了JS HTML Web端使用MQTT通讯测试,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • JavaScript生成.xls文件的代码

    JavaScript生成.xls文件的代码

    这篇文章主要介绍了JavaScript生成.xls文件的代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 微信小程序实现选项卡的方法

    微信小程序实现选项卡的方法

    这篇文章主要为大家详细介绍了微信小程序实现选项卡的方法,利用swiper组件实现选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 简单谈谈javascript Date类型

    简单谈谈javascript Date类型

    Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。本文就给大家简单讲述一下DATE类型的使用。
    2015-09-09
  • Javasript设计模式之链式调用详解

    Javasript设计模式之链式调用详解

    这篇文章主要为大家详细介绍了Javasript设计模式之链式调用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • javascript实现点击商品列表checkbox实时统计金额的方法

    javascript实现点击商品列表checkbox实时统计金额的方法

    这篇文章主要介绍了javascript实现点击商品列表checkbox实时统计金额的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序地图定位的实现方法实例

    微信小程序地图定位的实现方法实例

    小程序功能的强大想必使用过的人都知道,下面这篇文章主要给大家介绍了关于微信小程序地图定位的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Javascript 去除数组的重复元素

    Javascript 去除数组的重复元素

    在js中,如何去除指定数组中的重复元素?
    2010-05-05
  • JSP中使用JavaScript动态插入删除输入框实现代码

    JSP中使用JavaScript动态插入删除输入框实现代码

    这篇文章主要介绍了JSP中如何使用JavaScript动态插入删除输入框,需要的朋友可以参考下
    2014-06-06

最新评论