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

在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
发布时间:2021-06-23
其他阅读

使用中间件记录网站访问日志记录

对于网站访问日志的记录,一般情况下都是使用现有的日志服务,比如谷歌分析引入轻量 js 文件即可。本文主要介绍对于现有的 Asp.Net Core 网站使用中间件快速记录访问日志。使用中间件的好处:在服务端进行处理,无视客户端类型(特殊信息无法获取);统一处理,不需要对每个地址重复处理等。

查看原文

如何查看系统端口占用

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

查看原文

Winform中设置控件边框

本文将会介绍在Winform中如何设置控件的边框,可应用于Form和Panel等。

查看原文

Blazor文件上传解决方案

Blazor 是由 Asp.Net Core 团队推出的一个Web前端SPA解决方案,其中包括了使用 WebAssembly 的 Blazor Wasm 和使用 SignalR 进行实时交互的 Blazor server。本篇文章中使用的是 Blazor Wasm 方案来验证上传文件的操作。

查看原文

C#扩展方法

一般来说,当我们使用某个类时,需要用到一些特别的方法,但却没有时。一般做法可能是创建一个基于该类的派生类,添加我们想要的方法,但这样做无疑增加了复杂度。所以这时候,扩展方法出现了。

查看原文