首页 > 编程语言 >javascript类的继承的实现

javascript类的继承的实现

时间:2023-10-23 14:26:40浏览次数:44  
标签:__ function Object proto 继承 javascript 实现 prototype 属性

首先需要知道两个概念:

  1. 构造函数的prototype属性是实例的原型,这个属性的值是一个对象,可以被重新赋值,比如有时候为了简便会把prototype属性重新赋值为一个对象字面量;
  2. 每个对象都有一个__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;
}

标签:__,function,Object,proto,继承,javascript,实现,prototype,属性
From: https://www.cnblogs.com/fogwind/p/17782290.html

相关文章

  • Windows11 实时字幕如何实现实时翻译?
    Windows11实时字幕如何实现实时翻译?引言 2023年6月27日Windows11更新新增实用功能!此更新添加了以下语言的实时字幕:中文(简体和繁体)法语(法国、加拿大)German意大利语日语葡萄牙语(巴西、葡萄牙)Spanish丹麦语英语(爱尔兰,其他英语方言)韩......
  • 软件设计之C/S结构连接数据库实现登录功能
    界面展示具体代码//DBUtil.javapackageorg.example;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.SQLException;publicclassDBUtil{publicstaticConnectiongetConnection()throwsClassNotFoundException,SQLException......
  • 《玩转翻译》实战连载№2:如何批量实现多语言翻译的格式对齐?
    《玩转翻译》实战连载№2:如何批量实现多语言翻译的格式对齐?引言 生活和工作很多时候都会遇到翻译的情况,如果是几个单词或几句话,则有很多途径可以实现翻译。但如果需要翻译的词汇量比较大、句子、段落比较多,又需要保持原先的格式或者保持行或段落,如何解决? 一般的方法,可能会......
  • 如何实现Windows11原生的语音输入?AI语音转文字,比打字快多了
    引言 在Win11之前,要实现语音识别,相对比较麻烦,或者使用第三方输入法软件,但当有新闻报导出用户的输入信息被非法收集和利用,广告和骚扰接踵而至,后由于隐私保护级别的提升,之后无论是输入法厂家还是用户,都变得比之前要谨慎多了。现在换上Win11的用户越来越多,但有些用户还是由于惯性......
  • 使用 MQTTnet 实现 MQTT 通信示例
    转自:https://cloud.tencent.com/developer/article/2103199一、什么是MQTT?MQTT(MessageQueuingTelemetryTransport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分。MQTT是基于二进制消息的发布/订阅编程模式的消息协议,如今已经成为OASIS......
  • CSS (四) CSS继承与权重/标签的表现形式/图文对齐
    1.CSS继承性就像父亲的财产会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。当然并不是所有的样式都会被继承,这一点我们讲到具体样式时,......
  • 构建交互式待办事项应用:使用React和Redux实现技术深度实战
    本文将介绍如何使用React和Redux框架构建一个交互式的待办事项应用。我们将使用React组件化的思想和Redux的状态管理,实现待办事项的添加、完成和过滤功能。通过本文的实战演示,读者将深入了解React和Redux的使用方式和相关概念,为构建复杂的前端应用打下坚实的基础。技术栈:React:一个......
  • CAS自旋锁到底是什么?为什么能实现线程安全?
    ......
  • 使用mimipenguin实现从当前 Linux 用户转储登录密码
    另外,它还支持如:VSFTPd(活跃的FTP客户端连接)、Apache2(活跃的/旧的HTTP基础认证会话,但是这需要Gcore),还有openssh-server(活跃的SSH链接,需用sudo 命令)。重要的是,它逐渐被移植到其他语言中,以支持所有可想到的以后可以利用的情况。mimipenguin是如何工作的?要理解mimipengui......
  • 17.2 实现无管道正向CMD
    WSASocket无管道正向CMD,使用WSASocket函数创建一个TCP套接字,并绑定到一个本地地址和端口上。然后使用CreateProcess函数创建一个新的CMD进程,并将标准输入、输出和错误输出重定向到套接字的句柄上。这样,客户端可以通过网络连接到这个套接字,发送CMD命令并获取命令输出结果。这种方......