前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享 3 个 你可能会用上的 JavaScript 类

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

作者头像
前端达人
发布2022-03-25 09:30:21
3620
发布2022-03-25 09:30:21
举报
文章被收录于专栏:前端达人

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

翻译 | 杨小爱

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

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

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

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

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

代码语言:javascript
复制
class Car {
  make = '';
  model = '';
  doorsCount = 4;
  wheelsCount = 4;

  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

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

代码语言:javascript
复制
const jeepWrangler = new Car('jeep', 'wrangler');
jeepWrangler.doorsCount = 2;
jeepWrangler.model; // wrangler

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

代码语言:javascript
复制
class Car {
  make = '';
  model = '';
  doorsCount = 4;
  wheelsCount = 4;

  constructor(make, model) {
    this.make = make;
    this.model = model;

    return {
      different: true
    }
  }
}

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

代码语言:javascript
复制
const jeepWrangler = new Car('jeep', 'wrangler');
jeepWrangler.model; // undefined
jeepWrangler.different; // true

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

代码语言:javascript
复制
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 根提供的服务是可以通过单例模式完成的一个示例。

单例适用于日志记录、分析、数据库、存储的全局类以及创建全局变量的替代方法。 你可以用这个技巧来控制类返回的内容。 2 、防止类实例化(抽象类) JavaScript 本身并不支持抽象类的概念,抽象类是一个只能扩展不能实例化的类。但是,有一种不包括装饰器的 hacky 方法可以实现这一点。

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

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

因此,如果构造函数名称与您检查它的类匹配,则直接实例化该类。否则,它会被扩展它的类实例化。 就像这样,你可以创建只能扩展的类,这非常适合创建基类。 3 、运行时的多个类扩展(mixins) 在 OOP 中,您可以使一个类扩展另一个类,并且您必须在代码执行之前这样做。对于一些非常具体的问题,我在代码中一直在探索的一件事是在运行时扩展类的想法。 为了向你解释我的意思,我想让你想象你正在玩一个游戏并且你有一个 Person 类来代表你的角色。 让我们使用像这样简单的东西。

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

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

代码语言:javascript
复制
Employee.call(johnDoe, 'AWS', '02/05/2020', 'software engineer');

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

当然,这只是解决此类问题的一种方法,我们也可以尝试插件模式。我想说明的是用多个东西扩展一个类的能力。 这也是实现 mixin 的一种方法,从基类开始并在运行时或预先扩展它。 这实际上是在 JavaScript 中引入类之前我们用来扩展类的方式。该类只是构造函数和原型工作的语法糖。下面类可以扩展构造函数。

上面是一样的,但它必须在代码运行之前设置,并且需要 Person 类接受更多参数。  mixin 方式允许您将代码拆分为更小的构造函数,这些构造函数可以处理包括私有数据在内的所有逻辑。这允许您在代码运行时扩展您的类实例。 结论 探索 JavaScript 非常有趣,这意味着根据你如何扭转和转动,你最终可能会找到一两个可能最终被证明是有用的技巧。 我曾经认为利用这些东西不好,但是,当我冒险进入元编程世界时,寻找可以利用的空白成为一种习惯。 我把这些技巧分享给你,希望有一天它们对你有用。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-01-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档