分享 3 个 你可能会用上的 JavaScript 类

2024-03-02 15:59
文章标签 java script 分享 可能 会用

本文主要是介绍分享 3 个 你可能会用上的 JavaScript 类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

76491fee1111965ad7c532e637700db7.png

英文 | https://javascript.plainenglish.io/3-weird-javascript-class-tricks-that-could-be-useful-c5a78144d574

翻译 | 杨小爱

我喜欢尝试一些新东西,而 JavaScript 有很多奇怪而隐藏的宝石,学习起来总是很有趣。 

有些只是 API 中的漏洞,有些则是有意或无意的意外。无论哪种方式,只要有正确的问题和正确的需求,这些都是非常有用的。

1 、 从构造函数返回一个对象(单例)

构造函数返回除了它所属的类的实例之外,其他东西是非常奇怪的。好吧,在 JavaScript 中,这实际上是可以做到的。

让我们举一个简单的汽车类的例子。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;}
}

默认情况下, new Car(...) 将返回一个类的实例对象,我们可以使用它来访问该类的属性和方法。

const jeepWrangler = new Car('jeep', 'wrangler');
jeepWrangler.doorsCount = 2;
jeepWrangler.model; // wrangler

我们实际上可以从构造函数返回一些东西,例如,一个不同的对象。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;return {different: true}}
}

这仅仅意味着当我们实例化类时,我们得到了返回的对象。

const jeepWrangler = new Car('jeep', 'wrangler');
jeepWrangler.model; // undefined
jeepWrangler.different; // true

但这仅在您返回对象时才具有此效果。如果您返回一个原语,该类将正常工作。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;return 12}
}
const jeepWrangler = new Car('jeep', 'wrangler');
jeepWrangler.model; // wrangler

那么,你能利用这种怪异来做什么呢?

好吧,你可以创建单例:无论你实例化多少次,你总是得到相同的实例。Angular 根提供的服务是可以通过单例模式完成的一个示例。

const LocalStore = (() => {const data = new Map();let instance = null;return class LocalStore {constructor() {if(instance === null) {instance = this;}return instance;}}
})();
const store1 = new LocalStore();
const store2 = new LocalStore();
store1 === store2 // true

单例适用于日志记录、分析、数据库、存储的全局类以及创建全局变量的替代方法。

你可以用这个技巧来控制类返回的内容。

2 、防止类实例化(抽象类)

JavaScript 本身并不支持抽象类的概念,抽象类是一个只能扩展不能实例化的类。但是,有一种不包括装饰器的 hacky 方法可以实现这一点。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;}
}
class BMW extends Car { <- extending Carconstructor(model) {super('bmw', model);this.model = model;}
}
const bmwM3 = new Car('bmw', 'm3'); <- instantiate Car

我们可以利用从类构造函数内部访问类构造函数名称的事实。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;console.log(this.constructor.name)}
}
const bmwM3 = new Car('bmw', 'm3');

构造函数名称将始终是您用于进行实例化的类,这意味着我们可以使用它来了解类是扩展还是实例化。

class Car {make = '';model = '';doorsCount = 4;wheelsCount = 4;constructor(make, model) {this.make = make;this.model = model;if(this.constructor.name === 'Car') {throw new Error('Car class is abstract. It can only be extended')}}
}
class BMW extends Car {constructor(model) {super('bmw', model);this.model = model;}
}
const bmwM1 = new BMW('m1'); // works!!
const bmwM3 = new Car('bmw', 'm3'); // Throws

因此,如果构造函数名称与您检查它的类匹配,则直接实例化该类。否则,它会被扩展它的类实例化。

就像这样,你可以创建只能扩展的类,这非常适合创建基类。

3 、运行时的多个类扩展(mixins)

在 OOP 中,您可以使一个类扩展另一个类,并且您必须在代码执行之前这样做。对于一些非常具体的问题,我在代码中一直在探索的一件事是在运行时扩展类的想法。

为了向你解释我的意思,我想让你想象你正在玩一个游戏并且你有一个 Person 类来代表你的角色。

让我们使用像这样简单的东西。

class Person {#name;#dob;constructor(name, dob) {this.#name = name;this.#dob = new Date(dob)}get name() {return this.#name;}get age() {return (new Date().getFullYear() - this.#dob.getFullYear())}
}
const johnDoe = new Person('John Doe', '09/12/1990');
johnDoe.age; // 32
johnDoe.name; // 'John Doe'

假设在整个游戏过程中,这个人被 AWS 聘为软件工程师。我们可以使用构造函数为此创建一个新功能。

function Employee(company, startingDate, title) {this.occupation = {company,startingDate: new Date(startingDate),title,}this.quit = () => {delete this.occupation;delete this.quit;}
}

为了给我们的用户这种能力,我们可以像这样在运行时扩展它:

Employee.call(johnDoe, 'AWS', '02/05/2020', 'software engineer');

有了这个,我们现在可以获得职业财产和辞职的能力。

johnDoe.occupation;
// {company: 'AWS', startingDate: Wed Feb 05 2020 00:00:00 GMT-0500 (Eastern Standard Time), title: 'software engineer'}
johnDoe.quit();
johnDoe.occupation; // undefined
johnDoe.quit; // undefined

当然,这只是解决此类问题的一种方法,我们也可以尝试插件模式。我想说明的是用多个东西扩展一个类的能力。

这也是实现 mixin 的一种方法,从基类开始并在运行时或预先扩展它。

这实际上是在 JavaScript 中引入类之前我们用来扩展类的方式。该类只是构造函数和原型工作的语法糖。下面类可以扩展构造函数。

class Person extends Employee {#name;#dob;constructor(name, dob, company, startingDate, title) {super(company, startingDate, title);this.#name = name;this.#dob = new Date(dob)}get name() {return this.#name;}get age() {return (new Date().getFullYear() - this.#dob.getFullYear())}}

上面是一样的,但它必须在代码运行之前设置,并且需要 Person 类接受更多参数。 

mixin 方式允许您将代码拆分为更小的构造函数,这些构造函数可以处理包括私有数据在内的所有逻辑。这允许您在代码运行时扩展您的类实例。

结论

探索 JavaScript 非常有趣,这意味着根据你如何扭转和转动,你最终可能会找到一两个可能最终被证明是有用的技巧。

我曾经认为利用这些东西不好,但是,当我冒险进入元编程世界时,寻找可以利用的空白成为一种习惯。

我把这些技巧分享给你,希望有一天它们对你有用。

学习更多技能

请点击下方公众号

47bc69e7cbff71d61f254acde73005fb.gif

这篇关于分享 3 个 你可能会用上的 JavaScript 类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766671

相关文章

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

SpringBoot整合OpenFeign的完整指南

《SpringBoot整合OpenFeign的完整指南》OpenFeign是由Netflix开发的一个声明式Web服务客户端,它使得编写HTTP客户端变得更加简单,本文为大家介绍了SpringBoot... 目录什么是OpenFeign环境准备创建 Spring Boot 项目添加依赖启用 OpenFeig

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖

SpringBoot中配置文件的加载顺序解读

《SpringBoot中配置文件的加载顺序解读》:本文主要介绍SpringBoot中配置文件的加载顺序,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot配置文件的加载顺序1、命令⾏参数2、Java系统属性3、操作系统环境变量5、项目【外部】的ap

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen