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

更新日期: 2022-01-15阅读: 948标签: 

我喜欢尝试一些新东西,而 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 Car
constructor(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 非常有趣,这意味着根据你如何扭转和转动,你最终可能会找到一两个可能最终被证明是有用的技巧。

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

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

原文来自:https://javascript.plainenglish.io/3-weird-javascript-class-tricks-that-could-be-useful-c5a78144d574


链接: https://fly63.com/article/detial/11045

es6之js的类

ES6 的类让 JS 中的继承变得更简单,因此对于你已从其他语言学习到的类知识,你无须将其丢弃。 ES6 的类起初是作为 ES5 传统继承模型的语法糖,但添加了许多特性来减少错误。

利用 es6 new.target 来对模拟抽象类

最近在使用 Symbol 来做为唯一值,发现 Symbol 无法进行 new 操作,只能当作函数使用,只要进行了new 就会发生类型错误,在不考虑底层实现的情况下,在代码层面是否能够实现一个函数只可以进行调用而不可以进行 new 操作呢?

Js即将加入私有字段和私有方法

尽管 JavaScript 在 2015 年就有了类,但仍然没有私有字段和私有方法。由于 TC39 委员会 内部存在分歧,这些功能在最初版本中被取消。有三个规范草案打算在不久的将来将这些功能引入到 JavaScript 类中。

ts中类的定义

类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符public :公有 在当前类里面、 子类 、类外面都可以访问,protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问

创建Vue类的过程

构造函数、全局配置对象、默认options配置、比如 vue-router 就会注册这个回调,因此会每一个组件继承,前面提到了,默认组件有三个 `KeepAlive`,`transition`, `transitionGroup`

javascript中uber实现子类访问父类成员

上面代码通过实例化子类和父类,分别调用toString()实现了继承的关系。这个时候有这样的需求;不实例化父类,直接通过子类完完整整的调用父类的方法或属性。

如何在Vue中动态添加类名

能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。添加动态类名与在组件中添加 prop :一样简单。

了解JavaScript中的类

javascript是一种基于原型的语言,javascript中的每个对象都有一个名为[[原型]]的隐藏内部属性,可用于扩展对象属性和方法。直到最近,勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。

javascript如何定义类?

JavaScript中没有类或接口的概念,即不能直接定义抽象的类,也不能直接实现继承。不过,为了编程的方便,我们可以在JavaScript中模拟类和继承的行为。

JS一些类实现方式的性能研究

这再次证明了JS的写法很灵活(举个反面的例子,如Python,其哲学原则是one way to go!)。这里整理一下,研究一下各种实现的性能问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!