【FEM】JavaScript: The Hard Parts, v2

知无涯者
215 阅读6分钟

小白恶补，基础知识，最近在看front end master的课程，多做笔记

课程信息

课程视频: frontendmasters.com/courses/jav…

课件: static.frontendmasters.com/resources/2…

chapter1 JavaScrip原理

image.png

  1. 逐行检查代码并运行/“执行” 每行 - 称为执行线程
  2. 像字符串和数组一样保存“数据”，以便我们以后可以在其内存中使用该数据
  3. 我们甚至可以存储函数

image.png

执行上下文

  1. 执行上下文
  2. 创建用于运行函数的代码 - 有 2 个部分（我们已经看到了它们！）
  3. 执行线程 存储（数据、函数）

主程序，或者说全局执行上下文

image.png

call stack

image.png

  1. JavaScript 跟踪当前正在运行的函数 （执行线程在哪里）
  2. 运行函数 - 添加到调用堆栈
  3. 完成运行函数 - JS 将其从调用堆栈中删除
  4. 栈顶就是我们当前运行的函数

image.png

总结

几个核心点 执行线程，一行一行逐行检查，遇到功能代码，创建新的执行上下文，然后添加到调用栈，返回后，调用栈弹出，

chapter2 Callbacks & Higher order functions

回调和高阶函数

JavaScript中最容易被误解的概念之一

启用强大的专业级功能，如映射、过滤、减少（函数式编程的核心方面）

使我们的代码更具声明性和可读性

构成Codesmith技术面试（和专业中/高级工程面试）的支柱

举例子，我们要减少重复工作

image.png

image.png

“参数”（placeholdlers）意味着在我们运行函数之前，我们不需要决定在哪些数据上运行我们的功能

然后在我们运行函数时提供实际值（参数）

高阶函数遵循相同的原则。

我们可能不想确切地决定我们的一些功能是什么，直到我们

运行我们的函数

啥是一个高阶的，超级可服用的函数？

image.png

来看执行过程

image.png

如果我们要一个，/2 的 或者 add + 3 的呢，又写两个函数吗

又画了一次执行栈流程。

新的写法！

高阶函数

image.png 我们可以推广我们的函数-因此，只有当我们运行copyArrayAndManipulate时，我们才会传递特定的指令！

image.png

Javascript中的函数=头等舱对象

它们可以与任何其他javascript对象共存，并且可以像任何其他javascript对象一样处理

1.分配给其他对象的变量和属性

2.作为参数传递到函数中

3.作为函数的值返回

高阶函数和回掉函数

而且这种代码事声明式，更加可读的

高阶函数定义：

接受一个函数或传递一个函数

只是一个描述这些函数的术语——我们称之为的任何函数——但它们本质上没有什么不同

image.png

箭头函数

image.png

箭头函数更加的简洁

利用箭头函数

image.png

匿名和箭头功能

提高代码的即时可读性

但至少出于我们的目的，他们是“句法糖”。我们会看到他们的

稍后全面效果

了解他们如何在引擎盖下工作至关重要，要避免

无秩序

pair编程

讲到，要懂原理，研究和解决问题要平衡，

作业

csbin.io/callbacks

参考答案：github.com/FrontendMas…

chapter3 闭包

闭包是最深奥的JavaScript概念

启用强大的专业级功能，如“一次”和“记忆”

许多JavaScript设计模式，包括模块模式使用闭包构建迭代器，处理部分应用程序并在异步世界中保持状态

函数与内存

image.png

函数每次执行都会生成新的内存

当我们的函数被调用时，我们为该函数的执行上下文创建一个数据实时存储（本地内存可变环境/状态）。

当函数完成执行时，其本地内存将被删除（返回的值除外）

但是，如果我们的函数可以在执行之间保持实时数据呢？

这将使我们的函数定义具有关联的缓存/持久内存

但这一切都始于我们从另一个函数返回一个函数

返回另一个函数的函数

image.png

image.png

在看一个例子

例子2

image.png

image.png

例子3 在定义函数的函数调用之外调用函数

image.png

image.png

这里func 存储的 backpack 只会有 counter，因为只有couture被这个函数用到了

image.png

什么是backpack

image.png 我们将incrementCounter的代码（函数定义）从外部返回到全局，并给它一个新名称-myNewFunction

我们保持与外部实时本地内存的绑定。t被“返回”附加在增量计数器函数定义的背面。

因此，outer的本地内存现在存储在myNewFunction上-即使outer的执行上下文早已消失

当我们在全局运行myNewFunction时，它将首先查看自己的本地内存（正如我们所期望的那样），然后在myNewFunction的背包中查看

我们如何称呼这个backpack

image.png

就是闭包

实时数据的“backpack”（或“闭包”）通过一个称为[[scope]]的隐藏属性附加增量计数器（然后到myNewFunction），当内部函数返回时，该属性会持续存在

 独立的闭包

image.png

如果我们再次运行“外部”，并将返回的“incrementCounter”函数定义存储在“anotherFunction”中，则这个新的incrementCounter函数是在新的执行上下文中创建的，因此有一个全新的独立背包

chapter4 异步JavaScript和事件循环

image.png

异步性是JavaScript中现代Web开发的支柱。

image.png

setTimeout

image.png

异步例子

image.png

在看一个例子

image.png

image.png

event loop

call stack 空吗？ call Queue有东西吗

image.png

回掉地狱

image.png

promise

使用双管齐下的立面功能：

启动后台网页浏览器工作，并

立即在JavaScript中返回占位符对象（承诺）

这里讲到了fetch，这是一个浏览器的对象，很牛，他会返回一个js原生的对象，promise

image.png

一个复杂的例子

image.png

来看异步性

image.png

微任务的优先级别是更高的

规则

我们有执行异步延迟代码的规则

当Web浏览器功能（APl）完成时，在微任务队列中保留承诺递延函数，在任务队列（回调队列）中保留回调函数

在以下情况下，将函数添加到调用堆栈（即运行函数）：

调用堆栈为空&所有全局代码运行（让事件循环检查此条件）

将微任务队列中的函数优先于回调队列

总结

Promises、Web APls、回调和微任务队列以及事件循环启用：

非阻塞应用程序：这意味着我们不必在单个线程中等待，也不会阻止进一步的代码运行

无论需要多长时间：我们无法预测我们的浏览器功能的工作何时完成，所以我们让JS在完成时自动运行该函数

Web应用程序：异步JavaScript是现代Web的支柱，允许现代构建快速的“无阻塞”应用程序

类和原型

创建对象

image.png

问题：每次我们创建新用户时，都会在计算机的内存中为所有数据和功能腾出空间。但是我们的功能只是副本

优化提取函数，使用

const newUser = Object.create(userFunctionStore); image.png

方法二，就把函数，给提取出来了

原型链

image.png

方法二的优化

image.png

采用了new关键字 和 方法直接放到prototype

来看this

image.png

this: window

image.png

箭头函数呢？ 找到声明函数的时候，那时候的this

来看new

image.png

### 更好的方式 es6 的class

image.png

avatar
文章
阅读
粉丝