前端培训:3 个可能有用 JavaScript 类
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;returnclass LocalStore {constructor() {if(instance ===null) {instance =this;}return instance;}}})();conststore1 =newLocalStore();conststore2 =newLocalStore();store1 ===store2 //true
单例适用于日志记录、分析、数据库、存储的全局类以及创建全局变量的替代方法。你可以用这个技巧来控制类返回的内容。
2 、防止类实例化(抽象类)
JavaScript 本身并不支持抽象类的概念,抽象类是一个只能扩展不能实例化的类。但是,有一种不包括装饰器的 hacky 方法可以实现这一点。
classCar {make ='';model ='';doorsCount =4;wheelsCount =4;constructor(make, model) {this.make = make;this.model = model;}}classBMWextendsCar { <- extending Carconstructor(model) {super('bmw', model);this.model = model;}}const bmwM3 =new Car('bmw','m3');<-instantiateCar
我们可以利用从类构造函数内部访问类构造函数名称的事实。
classCar {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');
构造函数名称将始终是您用于进行实例化的类,这意味着我们可以使用它来了解类是扩展还是实例化。
classCar {make ='';model ='';doorsCount =4;wheelsCount =4;constructor(make, model) {this.make = make;this.model = model;if(this.constructor.name ==='Car') {thrownewError('Car class is abstract. It can only be extended')}}}classBMWextendsCar {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 类来代表你的角色。让我们使用像这样简单的东西。
classPerson {#name;#dob;constructor(name, dob) {this.#name = name;this.#dob = new Date(dob)}getname() {returnthis.#name;}getage() {return (new Date().getFullYear() -this.#dob.getFullYear())}}const johnDoe =new Person('John Doe','09/12/1990');johnDoe.age;// 32johnDoe.name;// 'John Doe'
假设在整个游戏过程中,这个人被 AWS 聘为软件工程师。 我们可以使用构造函数为此创建一个新功能。
functionEmployee(company, startingDate, title) {this.occupation = {company,startingDate:newDate(startingDate),title,}this.quit =() => {deletethis.occupation;deletethis.quit;}}
为了给我们的用户这种能力,我们可以像这样在运行时扩展它:
Employee.call(johnDoe,'AWS','02/05/2020','software engineer');
有了这个,我们现在可以获得职业财产和辞职的能力。
johnDoe.occupation;// {company:'AWS',startingDate: Wed Feb05202000:00:00 GMT-0500 (Eastern Standard Time),title:'software engineer'}johnDoe.quit();johnDoe.occupation;// undefinedjohnDoe.quit;// undefined
当然,这只是解决此类问题的一种方法,我们也可以尝试插件模式。 我想说明的是用多个东西扩展一个类的能力。这也是实现 mixin 的一种方法,从基类开始并在运行时或预先扩展它。这实际上是在 JavaScript 中引入类之前我们用来扩展类的方式。 该类只是构造函数和原型工作的语法糖。 下面类可以扩展构造函数。
classPersonextendsEmployee {#name;#dob;constructor(name, dob, company, startingDate, title) {super(company, startingDate, title);this.#name = name;this.#dob = new Date(dob)}getname() {returnthis.#name;}getage() {return (new Date().getFullYear() -this.#dob.getFullYear())}}
上面是一样的,但它必须在代码运行之前设置,并且需要 Person 类接受更多参数。 mixin 方式允许您将代码拆分为更小的构造函数,这些构造函数可以处理包括私有数据在内的所有逻辑。 这允许您在代码运行时扩展您的类实例。
文章来源:web 前端开发
评论