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
其他阅读

WPF使用云母材质

在最新的Windows 11 OS中,微软为流畅设计(Fluent Design)带来了新的云母材质,云母材质一种不透明的动态效果,微软将其作为Windows 11应用窗体的默认材质。

查看原文

Angular中开发一个代码库

Angular 的复杂项目中,我们可以对其拆分出不同功能模块进行开发,但是对于大型项目,或者我们直接考虑拆成库,将一部分的模块合起来组成一个库,方便复用,比如我们熟悉的各种设计组件库,就是一堆模块的合集。

查看原文

asp.net core实现一个反向代理

本文将向你展示如何在C#和ASP.NET Core中实现一个反向代理功能。

查看原文

使用Cherry Studio搭配DeepSeek构建知识库

上篇文章,介绍了怎么在本地部署DeepSeek大模型服务,但是仅限于对话聊天,本文在之前的基础上,用DeepSeek搭配上Cherry Studio来构建个人知识库。

查看原文

Nginx重定向HTTP到HTTPS

HTTP协议以纯文本形式进行数据的交互,数据明文传输,容易被监听,窃取和伪造,HTTPS在HTTP的基础上,使用了TLS/SSL对通信过程进行加密,数据得到了有效的保护,就算被拦截到也无法获取信息,更没法实施中间人攻击。本文将会介绍如何在Nginx中配置HTTP重定向到HTTPS。

查看原文