专栏首页京程一灯作为一名JS开发人员,是什么使我夜不能寐[每日前端夜话0x91]

作为一名JS开发人员,是什么使我夜不能寐[每日前端夜话0x91]

每日前端夜话0x91

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:2415 字

预计阅读时间:9 分钟

作者:Justen Robertson

翻译:疯狂的技术宅

来源:toptal

JavaScript 是一种奇怪的语言。虽然受到 Smalltalk 的启发,但它用了类似 C 的语法。它结合了程序、函数和面向对象编程(OOP)的方方面面。它有许多能够解决几乎任何编程问题的方法,这些方法通常是多余的,并没有强烈推荐哪些是首选。它是弱动态类型,但采用了类似强制类型的方法,使经验丰富的开发人员也可以使用。

JavaScript 也有其瑕疵、陷阱和可疑的功能。新手程序员需要努力解决一些更为困难的概念 —— 异步性、封闭性和提升。具有其他语言经验的程序员合理地假设具有相似名称的东西,但是看上去与 JavaScript 相同的工作方法往往是错误的。数组不是真正的数组,什么是 this,什么是原型, new 实际上做了些什么?

ES6 类的麻烦

到目前为止,最糟糕的罪魁祸首是 JavaScript 的最新版本——ECMAScript 6(ES6)的。一些关于类的讨论坦率地令人震惊,并揭示了对语言实际运作机制的根深蒂固的误解:

“JavaScript 现在终于成为一种真正的面向对象的语言,因为它有类!”

要么是:

“让我们从 JavaScript 中被破坏的继承模型中解脱出来。”

甚至是:

“在 JavaScript 中创建类型是一种更安全、更简单的方法。”

这些言论并没有影响到我,因为它们暗示了原型继承中存在问题,让我们抛开这些论点。这些话让我感到困扰,因为它们都不是真的,它们证明了 JavaScript 的“everything for everyone”的语言设计方法的后果:它削弱了程序员对语言的理解。在我进一步说明之前,先举一个例子。

JavaScript 小测验 #1:这些代码块之间的本质区别是什么?

 1function PrototypicalGreeting(greeting = "Hello", name = "World") {
 2  this.greeting = greeting
 3  this.name = name
 4}
 5
 6PrototypicalGreeting.prototype.greet = function() {
 7  return `${this.greeting}, ${this.name}!`
 8}
 9
10const greetProto = new PrototypicalGreeting("Hey", "folks")
11console.log(greetProto.greet())
12class ClassicalGreeting {
13  constructor(greeting = "Hello", name = "World") {
14    this.greeting = greeting
15    this.name = name
16  }
17
18  greet() {
19    return `${this.greeting}, ${this.name}!`
20  }
21}
22
23const classyGreeting = new ClassicalGreeting("Hey", "folks")
24
25console.log(classyGreeting.greet())

这里的答案是并不是唯一的。这些代码确实有效,它只是一个是否使用了 ES6 类语法的问题。

没错,第二个例子更具表现力,因此你可能会认为 class 是语言的一个很好的补充。不幸的是,这个问题会变得更加微妙。

JavaScript 小测验 #2:以下代码有什么作用?

 1function Proto() {
 2  this.name = 'Proto'
 3  return this;
 4}
 5
 6Proto.prototype.getName = function() {
 7  return this.name
 8}
 9
10class MyClass extends Proto {
11  constructor() {
12    super()
13    this.name = 'MyClass'
14  }
15}
16
17const instance = new MyClass()
18
19console.log(instance.getName())
20
21Proto.prototype.getName = function() { return 'Overridden in Proto' }
22
23console.log(instance.getName())
24
25MyClass.prototype.getName = function() { return 'Overridden in MyClass' }
26
27console.log(instance.getName())
28
29instance.getName = function() { return 'Overridden in instance' }
30
31
32console.log(instance.getName())

正确的答案是它打印到控制台的输出:

1> MyClass
2> Overridden in Proto
3> Overridden in MyClass
4> Overridden in instance

如果你回答错误,就意味着不明白 class 究竟是什么。但这不是你的错。就像Arrayclass不是语言特征一样,它是蒙昧的语法。它试图隐藏原型继承模型和随之而来的笨拙的惯用语法,这意味着 JavaScript 正在做的事情并非是你想的那样。

你可能已经被告知在 JavaScript 中引入了 class,以使来自 Java 等语言的经典 OOP 开发人员更加熟悉 ES6 类继承模型。如果你是这样的开发者,那个例子可能会让你感到恐惧。例子表明 JavaScript 的 class 关键字没有提供类所需要的任何保证。它还演示了原型继承模型中的一个主要差异:原型是对象实例,而不是类型

原型与类

基于类和基于原型的继承之间最重要的区别是类定义了一个类型,它可以在运行时实例化,而原型本身就是一个对象实例。

ES6 类的子类是另一个类型定义,它使用新的属性和方法扩展父类,然后可以在运行时实例化它们。原型的子代是另一个对象实例,它将任何未在子代上实现的属性委托给父代。

旁注:你可能想知道为什么我提到了类方法,但没有提到原型方法。那是因为 JavaScript 没有方法的概念。函数在 JavaScript 中是一流的,它们可以具有属性或是其他对象的属性。

类构造函数用来创建类的实例。JavaScript 中的构造函数只是一个返回对象的普通函数。JavaScript 构造函数唯一的特别之处在于,当使用 new 关键字调用时,它会将其原型指定为返回对象的原型。如果这对你来说听起来有点混乱,那么你并不孤单 —— 它就是原型很难理解的原因。

为了说明一点,原型的子代不是原型的副本,也不是与原型相同的对象。子代对原型有生命参考,并且子代上不存在的原型属性是对原型上具有相同名称属性的单向引用。。

思考以下代码:

 1let parent = { foo: 'foo' }
 2let child = { }
 3Object.setPrototypeOf(child, parent)
 4
 5console.log(child.foo) // 'foo'
 6
 7child.foo = 'bar'
 8
 9console.log(child.foo) // 'bar'
10
11console.log(parent.foo) // 'foo'
12
13delete child.foo
14
15console.log(child.foo) // 'foo'
16
17parent.foo = 'baz'
18
19console.log(child.foo) // 'baz'

注意:你几乎不会在现实中写这样的代码 —— 这是一种可怕的做法 —— 但它简洁地证明了这一原则。

在前面的例子中,当 child.fooundefined 时,它引用了 parent.foo。一旦在 child 上定义了 foochild.foo 的值为 'bar',但 parent.foo 保留了原始值。一旦我们 delete child.foo,它将会再次引用 parent.foo,这意味着当我们更改父项的值时,child.foo 指的是新值。

让我们来看看刚才发生了什么(为了更清楚地说明,我们假设这些是 Strings 而不是字符串字面量,这里的区别并不重要):

显示如何在JavaScript中处理缺少的引用的原型链

它的工作方式,特别是 newthis 的特点是另一个主题,但如果你想学到更多的内容,可以查阅 Mozilla 的关于 JavaScript 的原型继承链的一篇详尽的文章【https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain】。

关键的一点是原型没有定义 type,它们本身就是 instances ,并且它们在运行时是可变的。

还有勇气往下读吗?接下来让我们再回过头来剖析 JavaScript 类。

JavaScript 小测验 #3:如何在类中实现私有?

上面的原型和类属性并没有被“封装”为外部不可访问的私有成员。应该怎样解决这个问题呢?

这里没有代码示例。答案是,你做不到。

JavaScript 没有任何私有的概念,但是它有闭包:

 1function SecretiveProto() {
 2  const secret = "The Class is a lie!"
 3  this.spillTheBeans = function() {
 4    console.log(secret)
 5  }
 6}
 7
 8const blabbermouth = new SecretiveProto()
 9try {
10  console.log(blabbermouth.secret)
11}
12catch(e) {
13  // TypeError: SecretiveClass.secret is not defined
14}
15
16blabbermouth.spillTheBeans() // "The Class is a lie!"

你明白刚才发生了什么吗?如果不明白的话就没搞懂闭包。好吧,但是它们并不那么令人生畏,而且非常有用,你应该花一些时间来了解它们【https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures】。

JavaScript 小测验 #4:怎样用 `class` 关键字写出与上面功能相同的代码?

对不起,这是另一个技巧问题。你可以做同样的事情,但它看起来是这样的:

 1class SecretiveClass {
 2  constructor() {
 3    const secret = "I am a lie!"
 4    this.spillTheBeans = function() {
 5      console.log(secret)
 6    }
 7  }
 8
 9  looseLips() {
10    console.log(secret)
11  }
12}
13
14const liar = new SecretiveClass()
15try {
16  console.log(liar.secret)
17}
18catch(e) {
19  console.log(e) // TypeError: SecretiveClass.secret is not defined
20}
21liar.spillTheBeans() // "I am a lie!"

如果你觉得这看起来比 SecretiveProto 更简单或更清晰,那么请告诉我。在我个人看来,它有点糟糕 —— 它打破了 JavaScript 中 class 声明的习惯用法,并且它不像你期望的那样来自 Java。这将通过以下方式表明:

JavaScript 小测验#5:`SecretiveClass::looseLips()` 是做什么用的?

我们来看看这段代码:

1try {
2  liar.looseLips()
3}
4catch(e) {
5  // ReferenceError: secret is not defined
6}

嗯……这很尴尬。

JavaScript Pop Quiz#6:经验丰富的 JavaScript 开发人员更喜欢原型还是类?

你猜对了,这又是一个关于技巧问题 —— 经验丰富的 JavaScript 开发人员倾向于尽可能避免两者。以下是使用 JavaScript 执行上述操作的惯用的好方法:

 1function secretFactory() {
 2  const secret = "Favor composition over inheritance, `new` is considered harmful, and the end is near!"
 3  const spillTheBeans = () => console.log(secret)
 4
 5  return {
 6    spillTheBeans
 7  }
 8}
 9
10const leaker = secretFactory()
11leaker.spillTheBeans()

这不仅仅是为了避免继承的丑陋或强制封装。想一想你能用 secretFactoryleaker 做些什么,你用原型或类做可不能轻易的做到。

首先,你可以解构它,因为你不必担心 this 的上下文:

1const { spillTheBeans } = secretFactory()
2
3spillTheBeans() // Favor composition over inheritance, (...)

这真是太好了。除了避免使用 newthis 做蠢事之外,它还允许我们将对象与 CommonJS 和 ES6 模块互换使用。它还使开发更容易:

 1function spyFactory(infiltrationTarget) {
 2  return {
 3    exfiltrate: infiltrationTarget.spillTheBeans
 4  }
 5}
 6
 7const blackHat = spyFactory(leaker)
 8
 9blackHat.exfiltrate() // Favor composition over inheritance, (...)
10
11console.log(blackHat.infiltrationTarget) // undefined (looks like we got away with it)

使用 blackHat 的程序员不必担心 exfiltrate 来自哪里,spyFactory 也不必乱用 Function::bind 的上下文小伎俩或深层嵌套属性。请注意,我们无需在简单的同步过程代码中担心 this,但它会导致异步代码中的各种问题。

经过一番思考,spyFactory 可以发展成为一种高度复杂的间谍工具,可以处理各种渗透目标 - 换句话说,就是外观模式。

当然你也可以用类来做,或者更确切地说,是各种各样的类,所有类都继承自 abstract classinterface 等,不过 JavaScript 没有任何抽象或接口的概念。

让我们用一个更好的例子来看看如何用工厂模式实现它:

1function greeterFactory(greeting = "Hello", name = "World") {
2  return {
3    greet: () => `${greeting}, ${name}!`
4  }
5}
6
7console.log(greeterFactory("Hey", "folks").greet()) // Hey, folks!

这比原型或类的版本更简洁。它可以更有效地实现其属性的封装。此外,它在某些情况下具有较低的内存和性能影响(乍一看似乎不太可能,但 JIT 编译器正悄悄地在幕后做了减少重复和推断类型的工作)。

因此它更安全,通常情况下也更快,并且编写这样的代码更容易。为什么我们又需要类了呢?哦,当然是可重用性。如果我们想要一个unhappy 且 enthusiastic 的 greeting会怎样?好吧,如果我们用的是 ClassicalGreeting类,可能会直接跳到梦想中的类层次结构中。我们知道自己需要参数化符号,所以会做一些重构并添加一些子类:

 1// Greeting class
 2class ClassicalGreeting {
 3  constructor(greeting = "Hello", name = "World", punctuation = "!") {
 4    this.greeting = greeting
 5    this.name = name
 6    this.punctuation = punctuation
 7  }
 8
 9  greet() {
10    return `${this.greeting}, ${this.name}${this.punctuation}`
11  }
12}
13
14// An unhappy greeting
15class UnhappyGreeting extends ClassicalGreeting {
16  constructor(greeting, name) {
17    super(greeting, name, " :(")
18  }
19}
20
21const classyUnhappyGreeting = new UnhappyGreeting("Hello", "everyone")
22
23console.log(classyUnhappyGreeting.greet()) // Hello, everyone :(
24
25// An enthusiastic greeting
26class EnthusiasticGreeting extends ClassicalGreeting {
27  constructor(greeting, name) {
28    super(greeting, name, "!!")
29  }
30
31  greet() {
32    return super.greet().toUpperCase()
33  }
34}
35
36const greetingWithEnthusiasm = new EnthusiasticGreeting()
37
38console.log(greetingWithEnthusiasm.greet()) // HELLO, WORLD!!

这是一个很好的方法,直到有人出现并要求实现一个不能完全适合层次结构的功能,整个事情都没有任何意义。当我们尝试用工厂模式编写相同的功能时,在这个想法中放一个引脚:

 1const greeterFactory = (greeting = "Hello", name = "World", punctuation = "!") => ({
 2  greet: () => `${greeting}, ${name}${punctuation}`
 3})
 4
 5// Makes a greeter unhappy
 6const unhappy = (greeter) => (greeting, name) => greeter(greeting, name, ":(")
 7
 8console.log(unhappy(greeterFactory)("Hello", "everyone").greet()) // Hello, everyone :(
 9
10// Makes a greeter enthusiastic
11const enthusiastic = (greeter) => (greeting, name) => ({
12  greet: () => greeter(greeting, name, "!!").greet().toUpperCase()
13})
14
15console.log(enthusiastic(greeterFactory)().greet()) // HELLO, WORLD!!

虽然它的代码更短,但得到的好处并不明显。实际上你可能会觉得它更难以阅读,也许这是一种迟钝的方法。难道我们不能只有一个 unhappyGreeterFactory 和一个 passionsticGreeterFactory

然后你的客户出现并说:“我需要一个不开心的新员工,希望整个办公室都能认识它!”

1console.log(enthusiastic(unhappy(greeterFactory))().greet()) // HELLO, WORLD :(

如果我们需要不止一次地使用这个 enthusiastically 且 unhappy 的 greeter,可以更容易实现:

1const aggressiveGreeterFactory = enthusiastic(unhappy(greeterFactory))
2
3console.log(aggressiveGreeterFactory("You're late", "Jim").greet())

这种合成风格的方法适用于原型或类。例如,你可以将 UnhappyGreetingEnthusiasticGreeting 重新考虑为装饰器。它仍然需要比上面的函数风格方法更多的样板,但这是你为真正的类的安全性和封装所付出的代价。

问题是,在 JavaScript 中,你没有得到自动安全性。强调 class 用法的 JavaScript 框架会对这些问题变很多“魔术”,并强制类使用自己的行为。看看 Polymer 的 ElementMixin 源代码【https://github.com/Polymer/polymer/blob/master/lib/mixins/element-mixin.js】,我敢说。它简直是 JavaScript 神器级别的代码,我没有任何讽刺的意思。

当然,我们可以用 Object.freezeObject.defineProperties 来解决上面讨论的一些问题,以达到更大或更小的效果。但是为什么要在没有函数的情况下模仿表单,而忽略了 JavaScript 本身为我们提供的工具?当你的工具箱旁边有真正的螺丝刀时,你会用一把标有 “螺丝刀” 的锤子来驱动螺丝吗?

找到好的部分

JavaScript 开发人员经常强调语言的优点。我们选择试图通过坚持编写干净、可读、最小化、可重用的代码来避免其可疑的语言设计和陷阱。

关于 JavaScript 的哪些部分是合理的,我希望已经说服了你,class 不是其中之一。如果做不到这一点,希望你能理解 JavaScript 中的继承可能是混乱且令人困惑的。而且 class 既不去修复它,也不会让你不得不去理解原型。如果你了解到面向对象的设计模式在没有类或 ES6 继承的情况下正常工作的提示,则可获得额外的好处。

我并没有告诉你要完全避免 class。有时你需要继承,而 class 为此提供了更清晰的语法。特别是,class X extends Y 比旧的原型方法更好。除此之外,许多流行的前端框架鼓励使用它,你应该避免在原则上单独编写奇怪的非标准代码。我只是不喜欢它的发展方向。

在我的噩梦中,整整一代的 JavaScript 库都是使用 class 编写的,期望它的行为与其他流行语言类似。即使我们没有不小心掉进 class 的陷阱,它也可能复活在错误的 JavaScript 墓地之中。经验丰富的JavaScript开发人员经常受到这些怪物的困扰,因为流行的并不总是好的。

最终我们都沮丧地放弃了,开始重新发明 Rust、Go、Haskell 或者其它类似这样的轮子,然后为 web 编译为Wasm,新的 Web 框架和库扩散到无限多的语言中。

它确实让我夜不能寐。

原文:https://www.toptal.com/javascript/es6-class-chaos-keeps-js-developer-up

本文分享自微信公众号 - 前端先锋(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java设计模式-模板方法模式

    Define the skeleton of an algorithm in an operation,deferring some steps to subc...

    美的让人心动
  • 梯度下降法公式推导过程--再次补充:导数部分化简

    前面一篇就是基础性的推导过程。从反馈的情况看,总体还是讲明白了。但是在导数的部分,仍有不少的存疑。 其实在数学方面,我也是学渣。所以尽我所能,希望再次的补...

    俺踏月色而来
  • 如何在spark里面使用窗口函数

    在大数据分析中,窗口函数最常见的应用场景就是对数据进行分组后,求组内数据topN的需求,如果没有窗口函数,实现这样一个需求还是比较复杂的,不过现在大多数标准SQ...

    我是攻城师
  • tf.decode_raw

    原链接: https://tensorflow.google.cn/versions/r1.8/api_docs/python/tf/decode_raw?h...

    于小勇
  • python接口自动化(四十二)- 项目结构设计之大结局(超详解)

      这一篇主要是将前边的所有知识做一个整合,把各种各样的砖块---模块(post请求,get请求,logging,参数关联,接口封装等等)垒起来,搭建一个房子。...

    北京-宏哥
  • 28. 实现strStr()

    给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存...

    祝你万事顺利
  • 用web3dart为flutter应用生成以太坊地址

    Flutter是采用Dart语言的跨平台应用开发框架,目前已经支持ios、安卓和web等多个平台。本文将介绍如何在Flutter应用中生成以太坊地址,如果你要开...

    用户1408045
  • Leetcode 【537、890、1016】

    计算两个复数相乘,先将两个复数的实数和虚数部分分别提取出来,然后按照复数的运算规则分别计算结果的实数和虚数部分,最后把结果的两部分拼接起来就能得到答案。

    echobingo
  • Oracle表连接学习笔记

    内连接:指表连接的结果只包含那些完全满足连接条件的记录。下面学习一下内连接的,给个例子,这里创建两张表,然后用内连接方式查询,看看例子:

    用户1208223
  • 【通俗易懂】手把手带你实现DeepFM!

    可以说,DeepFM是目前最受欢迎的CTR预估模型之一,不仅是在交流群中被大家提及最多的,同时也是在面试中最多被提及的:

    石晓文

扫码关注云+社区

领取腾讯云代金券