Js使用原型链对对象进行扩展

发布时间:2021-06-23

在C#的扩展方法中,我们了解到了一种不需要修改源对象定义即可为对象添加新的行为的方法,在JavaScript中,我们通过原型链也可以实现类似的效果,为对象添加新的行为。需要一定的Js原型链基础。

原型链

简单介绍一下原型链,在C#语言中,有类的概念,所有的OOP(封装,继承,多态)都是基于类来实现的。但在Js中,没有类的概念,所有的对象都有一个继承的原型对象,层层向上,直到原型对象为null。可以查看MDN文档

使用原型来扩展对象

类似于C#扩展方法,下面就从 Date 对象入手,Date 类型在开发中使用非常频繁,但对于Js原生Date对象,直接打印的结果非常不直观。下面,给Date加上一个format方法,实现简单的格式化,传入一个格式化字符串,传出一个时间字符串。

直接上代码,通过匹配格式化字符串中的字符,再替换成对应的时间元素,最后组合传出。

Date.prototype.format = function(fmt)
{
    const o = {
        'M+': this.getMonth() + 1,                 // 月份
        'd+': this.getDate(),                    // 日
        'H+': this.getHours(),                   // 小时(12)
        'h+': this.getHours() > 12 ? this.getHours() - 12 : this.getHours(),     //小时(24)
        'm+': this.getMinutes(),                 // 分
        's+': this.getSeconds(),                 // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds()             // 毫秒
    };
    if (new RegExp('(y+)').test(fmt))
    {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    const keys = Object.keys(o);
    const values = Object.values(o);
    for (let i = 0; i < keys.length; i++)
    {
        if (new RegExp(`(${ keys[i] })`).test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (values[i].toString())
            : ((`00${ values[i]}`).substr(('' + values[i].toString()).length)));
    }
    }
    return fmt;
};

使用起来也是很方便,直接传入一个格式化字符串即可。

let time = new Date();
console.log(time.format('yyyy-MM-dd HH:mm:ss'));
console.log(time.format('yyyy-MM-dd hh:mm:ss'));
console.log(time.format('MM-dd HH:mm'));

// 输出  
// 1997-11-03 15:30:00
// 1997-11-03 03:30:00
// 11-03 15:30
其他阅读

软考中级系统集成项目管理工程师笔记:信息化发展

信息化发展主要包括了信息与信息化、现代化基础设施、产业现代化、数字中国、数字化转型与元宇宙共 5 个部分。

查看原文

git的一些技巧

git 是一个免费开源分布式版本控制系统,可以高效处理从小型到超大型项目内容管理,本文会介绍一些 git 使用的技巧。

查看原文

Web前端中实现一个拖动效果

在原生客户端开发中,窗口拖动是一个比较常用的操作。今天把这个效果在网页客户端中实现以下,文章记录一下效果。

查看原文

如何查看系统端口占用

在web开发中,时常会遇到开发的应用无法启动,这种情况一般是由于当前监听端口已经被别的应用先行占用监听了。本文就 Windows 和 Linux 介绍一下查看端口占用程序。

查看原文

vscode Material Design Theme

Material Design Theme 是由猪头少年(scung-cn)开发的一套基于 Material Design 设计语言的 Visual Studio Code 主题插件,可以在扩展市场上直接下载安装。

查看原文