原文地址:http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/

译者注:Dmitry Soshnikov是Facebook软件工程师,ECMAScript理论家。他编写的《ECMAScript in detail》系列文章是对ECMAScript规范最优秀的解析,已经被翻译成多国语言(包括中文)。


这是JavaScript:核心概述讲稿的第二版,致力于ECMAScript编程语言及其运行时系统的核心组件。

目标人群:有经验的程序员、专家。

本文的第一版涵盖了JS语言的通用方面,主要讲解了旧式ES3规范中的概念,并参考了在ES5和ES6(即ES2015)中的一些变化。

从ES2015开始,规范修改了一些核心组件的描述和结构,引入了新的模型等等。所以在这个版本中,我们会关注较新的概念以及更新了的术语,但是依然保留在规范各个版本中保持一致的最基本的JS结构。

本文涵盖了ES2017+运行时系统。

注:ECMAScript规范的最新版本可以在TC-39网站上找到。

我们从讨论ECMAScript最基础的概念对象开始。

阅读全文 »

代理服务器是位于客户端和服务器之间某处的服务器。它处理原始请求,处理该请求,然后将其转发到服务器。代理服务器有两种类型:

  1. 正向代理

  2. 反向搭理

下面我们看一下两者之间的区别及其工作原理。

阅读全文 »

当我们在浏览器中键入一个网站的 URL 后点击回车键,浏览器会尝试向连接到该 URL 的服务器发出请求。这个服务器包含我们在屏幕上显示数据所需的文件:比如一个 HTML 文件,可能还有 CSS 或者 JavaScript 文件。最终的目标用一种非常简化的方式就是:

不过,在与服务器对话之前,我们得找到它的位置。这就是我们在 DNS 查找期间要做的事情:试图找到最终要想其发出 HTTP 请求的服务器的位置。通常,当访问一个网站时,是通过用它的域名来访问。域名是,比如 www.google.comwww.facebook.comwww.airbnb.com 等等容易记住的名字!

不过,域名实际上对计算机是不友好的。想像一下你有朋友:你不想把他们所有的电话号码记在心里,而是将他们的真实姓名存在手机里面,这样通常更容易记住。不过最后,你的手机依然需要知道他们的实际电话号码,而不是他们的人名。我们要访问一个网站时,也会发生类似的事情:可以把你朋友的名字和域名相比较,他们的电话号码与叫做 IP 地址的东西相比较。

互联网上的每个设备都有一个 IP 地址,这是一个唯一的地址,我们可以用它来定位互联网上的设备。把这个和你的家庭地址相比较:它完全是独一无二的,这对那些需要知道你的披萨送到哪里的送货员来说是很有用的。DNS 查找这个词听起来很吓人,但是本质上只是试图找到与域名相对应的 IP 地址。

阅读全文 »

在 DNS 查找之后,浏览器就知道了我们实际要查找的 IP 地址。现在是第二步了:与位于该 IP 地址的服务器建立连接。

为了创建这样的连接,浏览器执行一种称为 TCP/IP 三次握手(也称为SYN-SYN-ACK)的过程。毫不奇怪,握手由三个步骤组成。

阅读全文 »

(在本文中我将解释 HTTP/1.1,但现在主要用的是 HTTP/2。我在本文中也会介绍!)

一旦建立了 TCP 连接,我们就可以向服务器发送数据以及从服务器接收数据。我们可以用 HTTP 请求,询问服务器是否可以提供我们所需的数据。然后服务器用 HTTP 响应进行应答。在这个步骤中,我们将最终得到如下流程:

阅读全文 »

每个开发人员偶尔看到控制台上大红色的Access to fetched has been blocked by CORS policy(CORS策略已阻止访问。。。)错误时,都会感到沮丧!😬 虽然有一些方法可以快速消除这个错误,但今天我们就别把任何事情都当作是理所当然,我们就好好看看 CORS 到底在做什么,以及为什么它实际上是我们的朋友。👏🏼

❗️ 在本文中我不会解释 HTTP 基础知识。不过,如果想更详细了解 HTTP 请求和响应的信息,我之前为此写过一篇一篇小博客。🙂 在我的例子中,我用的是 HTTP/1.1 而不是 HTTP/2,但这并不影响 CORS。

阅读全文 »

你是否曾经遇到JS代码并没有按照你预期的方式运行?似乎函数是在随机、不可预测的时间执行的,或者执行被延迟了。如果是这样,那么你有可能正在处理ES6引入的一项很酷的新功能:promise

我多年以来的好奇心得到了回报,而我不眠之夜又一次给了我时间制作一些动画。是时候讨论Promise了:为什么要使用promise?Promise在幕后是如何工作的?我们如何以最现代的方式编写promise呢?

阅读全文 »

ES6引入了一个很酷的东西,叫做生成器(generator)函数。每当我问人们有关生成器函数的问题时,得到的回复基本上都是:“我曾看到过一次,没搞明白,然后就再也没有看到过”,“哦,天哪,我读过很多有关生成器函数的博客文章,但依然还没有搞明白”,“我是搞明白了,但是为什么有人会用它啊?”,🤔也许那只是我一直在与自己进行的对话,因为那是我很长一段时间以来习惯的思考方式!但是生成器函数是真的很酷。

阅读全文 »

你有没有想过为什么我们可以在字符串、数组或对象上使用诸如.length.split().join()这些内置方法呢?我们从来没有明确指定过它们,它们到底是从哪里来的呢?现在别说“哈哈,没人知道,这就是神奇的JavaScript🧚🏻‍♂️”。这实际上是因为一种叫做原型继承(prototypal inheritance)的玩意儿。它很棒,而且我们用到它的次数比意识到它存在的次数要多得多!

阅读全文 »

JavaScript很酷,但是机器是如何才能真正理解我们所编写的代码呢?作为JavaScript开发人员,我们通常不必自己处理编译器。不过,一定要了解JavaScript引擎的基础知识,看看它如何处理我们对人类友好的JS代码,并将其转换成机器可以理解的东西!🥳

请注意:这篇文章主要基于Node.js和基于Chromium的浏览器使用的V8引擎。

阅读全文 »