mkimq

可能有用的奇怪 JavaScript 类

从构造函数返回一个对象（单例）

构造函数返回除了它所属的类的实例之外，其他东西是非常奇怪的。好吧，在 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

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

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

防止类实例化（抽象类）

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

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

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

运行时的多个类扩展（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 方式允许您将代码拆分为更小的构造函数，这些构造函数可以处理包括私有数据在内的所有逻辑。 这允许您在代码运行时扩展您的类实例。

贡献者: mankueng