til
  • README
  • Software Development Roles
  • solid
  • README
    • service-worker
  • docker
    • arg
    • 更新docker版本
  • editor
    • vscode
    • Creating a VS Code Theme
  • english
    • words
  • front-end
    • ==
    • ECMAScript
    • IIFE
    • Label
    • basic
    • html.js.css渲染顺序
    • npm-vs-yarn
    • obj-delete-key-value
    • react
    • split-join-and-replace
    • video
    • 前端自检清单
    • 递归及去重
    • css
      • css换肤
      • flex
      • list
      • nth-child和nth-of-type区别
      • padding
      • position
      • 层叠上下文
      • 层叠样式(+)
      • 正方形
      • 语义化标签
    • dom
      • DOCTYPE
      • HEAD
      • 修改document
      • 自定义表单验证
    • electron
      • basic
    • es6
      • basic-type
      • basic
      • prototype-example
      • defineProperty
      • understanding-es6
        • 0.introduction
        • Appendix A: Smaller Changes
        • Appendix B: Understanding ES7
        • Block-Binding
        • Proxies&Reflection
        • class
        • 解构赋值
        • function
        • improved-array
        • iterators&generators
        • modules
        • object
        • promise
        • Map&Set
        • symbol
    • images
      • 前端角度看图片
    • interview_case
      • lexical_scope
      • redux和localstroage存储位置
    • javascript
      • fuck-the-js
      • js-engine-work
      • js原生操作dom
      • what-is-function-program
      • 执行上下文
      • articles
        • JavaScript中使用函数组合
        • JavaScript中的依赖注入
        • JavaScript作用域链中的标识符解析和闭包
        • JavaScript是何如工作的--概述
        • JavaScript深拷贝
        • JavaScript的全局变量是如何工作的
        • js继承常见的误解
        • node12&chrome中7个新的提案功能
        • 你真的懂JavaScript吗
      • date
        • index
      • engines
        • basic
        • JavaScript引擎基础:外形和内联缓存
        • v8中推测性优化的介绍
        • 优化原型
        • 更快的异步功能和promise
      • events
        • baisc
        • 事件冒泡和捕获
        • 定义事件
        • 页面生命周期
      • higher-order-function
        • curry
        • monad
      • module
        • basic
        • main&module
      • objects
        • iterator
        • spread
        • examples
          • iterator
      • performance
        • blocking-css
        • cache
      • prototype
        • Property-Descriptors
        • basic
        • prototype-shadow
      • you-dont-known-js
        • async&performance
          • Chapter 1: Asynchrony: Now & Later
          • Chapter 2: Callbacks
          • Chapter 3: Promises
          • Chapter 4: Generators
        • scope & closures
          • apA
          • apB
          • apC
          • apD
          • chapter1-what-is-scope
          • chapter2-lexical-scope
          • chapter3-function-vs-block-scope
          • chapter4-hoisting
          • chapter5-scope-closure
        • this & object prototypes
          • chapter1-this-or-that
          • chapter2-this-make-sense
          • chapter3-objects
          • chapter4-mixing(up)-class-object
          • chapter5-prototype
          • chapter6-behavior-delegation
        • types&grammer
          • Chapter1-Types
          • Chapter2-Values
          • Chapter3-Natives
          • Chapter4-coercion
          • Chapter5-grammer
        • up & going
          • chapter1-into-programming
          • chapter2-into-javascript
          • chapter3-into-YDKJS
    • mobile
      • iPhone分辨率终极指南
    • npm
      • arguments
      • build
    • react-native
      • prop-methods
    • react
      • PropTypes
      • basic
      • codebase-overview
      • component-element-instance
      • context
      • how-to-known-component-is-func-or-class
      • overview
      • react16.9
      • react18计划
      • react的设计原则
      • reconciliation
      • setState
      • useMemo
      • why-do-we-write-super-props
      • 从头实现一个react
      • concurrent
        • 引入并发模式(仅试验)
      • conf
        • conf-2019
      • events
        • 合成事件概述
      • hooks
        • custom-hook
        • effect-hook
        • hooks-api
        • intro
        • overview
        • rules
        • state-hook
        • hooks-vs-class
          • thinking-in-react-hooks
      • overreact
        • Development模式是如何工作的
        • How-Does-setState-Know-What-to-Do
        • Why-Do-React-Elements-Have-a-$$typeof-Property
        • Why-Do-React-Hooks-Rely-on-Call-Order
        • how-to-known-component-is-func-or-class
        • preparing-tach-talk-motivation
        • react作为ui运行
        • things-i-dont-known-as-2018
        • ui-element-problem-and-build-yourself
        • why-do-we-write-super-props
        • 一份完整的useEffect指南
        • 为什么X不是Hook
        • 函数组件与类有什么不同?
        • 演讲准备2-what-why-how
        • 编写弹性组件
        • 让setInterval在React-Hooks中为声明式
      • practice
        • render
      • react-dom
        • basic
      • react-redux
        • apiv7.1-hooks
        • connect
        • shallow-equal
      • redux
        • applyMiddleware
        • applyMiddleware2-细节
        • example
    • regex
      • index
    • stories
      • 数组下标
      • 阻止事件冒泡
    • svelte
      • compile-svelte-in-your-head-1
      • compiler-overview
      • parser
        • 写一个解析器-JavaScript的JSON解析器
    • turbopack
      • basic
    • typescript
      • interface和type的区别
    • webpack
      • hash
      • webpack4-for-react
      • webpack4
      • webpack4to5
      • babel
        • babel-parser和acorn的区别
        • babel.7.11
        • family
        • react16.14使用new-transform
        • update-to-7
    • pdf
      • deep-js
        • basic
      • react
        • reintroducing
  • git
    • capital
    • emoji
  • http
    • http2.0
    • response
  • rails
    • api
    • flash
    • middleware-vs-metal
    • model
    • performance
    • routes
    • environment
      • error
    • patterns
      • service
    • sidekiq
      • params
    • deploy
      • capistrano
        • ssh
  • ruby
    • self
    • net
      • http请求携带cookie
  • server
    • ss
    • ssh
    • user
    • crawler
      • puppeteer
    • nginx
      • domain-without-80
      • nginx节省带宽
  • sql
    • rails
    • search
Powered by GitBook
On this page
  • You Don't Know JS: Up & Going
  • Chapter 3: Into YDKJS
  • Scope & Closures
  • this & Object Prototypes
  • Types & Grammar
  • Async & Performance
  • ES6 & Beyond
  • Review
  1. front-end
  2. javascript
  3. you-dont-known-js
  4. up & going

chapter3-into-YDKJS

You Don't Know JS: Up & Going

Chapter 3: Into YDKJS

这个系列的内容是什么?简而言之,它是关于认真学习JavaScript的所有部分,而不仅仅是某人称之为“好的部分”的语言的一部分,也不仅仅是你在工作中完成工作所需的最小量。

其他语言的开发人员希望能够学习他们主要编写的大部分或全部语言,但JS开发人员似乎从人群中脱颖而出,通常不会学习很多语言。这不是一件好事,而且我们不应该继续让它成为常态。

你不知道的JS (YDKJS)系列与学习JS的典型方法形成鲜明对比,与你将阅读的几乎所有其他JS书籍不同。它挑战你超越你的舒适区域,并为你遇到的每一个行为提出更深层次的“为什么”问题。你准备迎接挑战了吗?

我将使用最后一章简要总结本系列其他书籍的内容,以及如何最有效地在YDKJS之上构建JS学习的基础。

Scope & Closures

也许最基本的问题之一就是变量作用域在JavaScript中的实际工作方式。对作用域仅有传闻中的模糊 观念 是不够的。

Scope&Closures 首先揭穿了JS是一种“解释语言”并因此没有编译的常见误解。不。

JS引擎在执行之前(有时在执行期间)编译代码。因此,我们对编译器的代码方法有了更深入的了解,以了解它如何查找和处理变量和函数声明。在此过程中,我们看到了JS变量作用域管理的典型隐喻,即“提升”。

这种对“词汇作用域”的批判性理解是我们在本书最后一章的基础上探讨闭包的基础。闭包可能是所有JS中最重要的概念,但是如果你还没有首先牢牢掌握作用域是如何工作,那么对于闭包,你可能仍然无法掌握。

闭包的一个重要应用是模块模式,正如我们在第2章的本书中简要介绍的那样。模块模式可能是所有JavaScript中最流行的代码组织模式;深入了解它应该是你的最高优先事项之一。

this & Object Prototypes

也许关于JavaScript的最广泛和持久的误解之一是this关键字指的是它出现的函数。大错特错。

this关键字是根据所讨论的函数的执行方式动态绑定的,事实证明有四个简单的规则可以理解并完全确定this绑定。

与this关键字密切相关的是对象原型机制,它是属性的查找链,类似于查找词法作用域变量的方式。但是在原型中包含了另一个关于JS的巨大错误:模仿(假)类和(所谓的“原型”)继承的想法。

不幸的是,将类和继承设计模式思想引入JavaScript的想法几乎是你可以尝试做的最糟糕的事情,因为虽然语法可能会诱使你认为存在类似于类的东西,但实际上原型机制在其行为方面基本上是相反的。

问题在于是否最好忽略不匹配并假装你所实现的是“继承”,或者是否更适合学习和拥抱对象原型系统的实际工作方式。后者更适合命名为“行为授权”。

现在的问题是,是最好忽略这种不匹配,假装正在实现的是“继承”,还是学习和接受对象原型系统的实际工作方式更合适。后者更适合称为“行为委托”。

这不仅仅是句法的偏好问题。委托是一种完全不同的,更强大的设计模式,它取代了使用类和继承进行设计的需要。但是,这些断言在Javascript的整个一生中,几乎所有其他的博客文章、书籍和会议都会涉及到这个主题。

我关于委托与继承的主张,不是因为不喜欢语言及其语法,而是因为我希望看到语言的真正功能得到适当的利用,而无休止的困惑和沮丧也随之消失。

但是,我在原型和授权方面所做的事情比我在这里所做的要复杂得多。如果你已经准备好重新考虑你所知道的关于javascript“类”和“继承”的一切,我会给你一个"服用红色药丸"(Matrix 1999)的机会,看看这个系列的第4-6章的 this & Object Prototypes。

Types & Grammar

本系列的第三个标题主要侧重于解决另一个备受争议的话题:类型强制。也许没有什么话题比你谈论隐式强制的困惑更让JS开发人员沮丧。

到目前为止,传统观点认为,隐含强制是语言的“坏部分”,应该不惜一切代价避免。事实上,有些人甚至称之为语言设计上的“缺陷”。事实上,有些工具的全部工作就是扫描代码,如果你在做任何强制的事情,就会为之警告。

但强制是否真的如此令人困惑,如此糟糕,如此危险,以至于如果你使用它,你的代码从一开始就注定要失败?

我说不是的。在理解了第1-3章中的类型和值是如何工作的之后,第4章开始了这场辩论,并充分解释了强制在所有的极端情况下是如何工作的。如果有时间学习,我们会看到强制的哪些部分是令人惊讶的,哪些部分是完全有意义的。

但我不仅仅暗示强制是明智的和可学习的,我断言强制是一种非常有用且完全被低估的工具,你应该在你的代码中使用它。我是说这种强制,如果使用得当,不仅有效,而且会让你的代码变得更好。所有的反对者和怀疑者肯定会嘲笑这种立场,但我相信这是提高你的JS游戏的主要关键之一。

你是想继续关注人群所说的话,还是你愿意把所有的假设放在一边,以新的视角去看待强制?Types & Grammar 系列将强迫你去思考。

Async & Performance

本系列的前三个标题侧重于语言的核心机制,但第四个标题略微扩展到了管理异步编程的语言机制之上的模式。异步不仅对应用程序的性能至关重要,而且越来越成为可写性和可维护性的关键因素。

本书首先介绍了许多关于“异步”,“并行”和“并发”之类的术语和概念混淆,并深入解释了这些事情是如何做的,适不适用于JS。

然后,我们将检查回调作为实现异步的主要方法。但在这里,我们很快看到回调本身对于异步编程的现代需求是远远不够的。我们发现了回调编码的两个主要缺陷:控制反转(IOC)信任损失和线性推理能力的缺乏。

为了解决这两个主要缺陷,ES6引入了两种新机制(实际上是模式):承诺(promise)和生成器(generator)。

Promise是一个与时间无关的“未来值”包装器,它可以让你推理和组合它们,无论值是否准备就绪。此外,他们还通过一个可信赖的、可组合的promise机制来安排回调,有效地解决了IoC信任问题。

生成器为JS函数引入了一种新的执行模式,其中生成器可以在yield处暂停,并在以后异步继续。暂停和恢复功能使生成器中的同步、顺序代码能够在后台异步处理。通过这样做,我们解决了回调的非线性,非局部跳转造成的混乱问题,从而使我们的异步代码看起来同步,从而更加合理。

但它是promises和generator的组合,它们在JavaScript中“产生”了我们迄今为止最有效的异步编码模式。事实上,ES7及其后期异步的未来复杂性很大程度上肯定会建立在这个基础之上。要认真对待异步环境中的有效编程,你需要真正适应将promise和generator结合在一起。

如果promise和generator是关于表达一些模式,这些模式让你的程序更加并发地运行,而因此在更短的时间内完成更多的处理,那么JS在性能优化上就拥有许多其他的方面值得探索。

第5章深入研究了与Web Workers的程序并行性和使用SIMD的数据并行性等主题,以及ASM.js等底层优化技术。第6章从适当的基准测试技术的角度来看待性能优化,包括关心什么类型的性能和忽略什么。

有效地编写JavaScript意味着编写代码可以打破在各种浏览器和其他环境中动态运行的约束障碍。从“工作”到“很好的工作”都需要我们进行大量复杂而详细的计划和努力。

Async & Performance 旨在为你提供编写合理且高性能的JavaScript代码所需的所有工具和技能。

ES6 & Beyond

不管你觉得你已经掌握了多少javascript,事实是javascript永远不会停止进化,而且进化的速度正在快速增长。这个事实几乎是这个系列精神的一个隐喻,我们永远不会完全 了解 JS的每个部分,因为一旦你掌握了所有这些,就会有新的东西出现,你需要学习。

这个标题致力于短期和中期的愿景,即语言的发展方向,不仅是 已知 的东西,如ES6,还有可能 未来 的东西。

虽然本系列的所有标题都涵盖了撰写本文时的JavaScript状态,这是ES6采用的中间阶段,但该系列的主要关注点在于ES5。现在,我们想把注意力转向ES6,ES7和......

由于ES6在撰写本文时已接近完成,因此ES6及更高版本首先将ES6环境中的具体内容划分为几个关键类别,包括新语法、新数据结构(集合)、新的处理能力和API。我们将以不同的详细程度介绍这些新的ES6功能,包括查看本系列其他书籍中涉及的详细信息。

这一些令人兴奋的ES6东西期待阅读:解构,默认参数值,符号(symbol),简洁的方法,计算机属性,箭头函数,块级作用域,promise,generator,迭代器,模块,代理,weakmaps,等等!啊,ES6真是太棒了!

本书的第一部分是你需要学习的所有内容的路线图,以便为你将在未来几年内编写和探索的新的和改进的JavaScript做好准备。

本书的后半部分将注意力转向简要地浏览一下我们可能期望在不久的将来看到的JavaScript。这里最重要的实现是在ES6之后,JS可能会逐个特性而不是逐个版本地发展,这意味着我们可以期待看到这些不久的将来比你想象的要快得多。

JavaScript的未来是光明的。是不是我们开始学习的时候了!?

Review

YDKJS系列致力于所有JS开发人员都可以并且应该学习这门伟大语言的所有部分。没有任何人的意见,没有任何框架的假设,没有任何项目的截止日期作为你从未学习和深刻理解JavaScript的借口。

我们将语言中每个重点关注的领域都放在一起,并专注于一本简短但非常密集的书籍,以全面探索你可能认为你知道但可能并不完全的所有部分。

“你知道的JS”不是批评或侮辱。我们所有人,包括我自己,都必须接受这一点。学习JavaScript不是最终目标,而是一个过程。我们还不知道JavaScript。但我们会知道的!

Previouschapter2-into-javascriptNextmobile

Last updated 6 years ago