JavaScript on Last Stand

Let/Const

Wed, 02 Oct 2024 00:00:00 +0800

Var

在 ES6 出现之前，必须使用 var 声明。但是，前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们在讨论这些问题之前更多地了解 var。

var 的作用域

作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。

当在最外层函数的外部声明var变量时，作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。

当在函数中声明var时，作用域是局部的。这意味着它只能在函数内访问。

要进一步了解，请查看下面的示例。

var greeter = 'hey hi';

function newFunction() {
 var hello = 'hello';
}

这里，greeter是全局范围的，因为它存在于函数外部，而hello是函数范围的。因此，我们无法在函数外部访问变量hello。因此，如果我们这样做：

var tester = 'hey hi';
function newFunction() {
 var hello = 'hello';
}
console.log(hello); // error: hello is not defined

我们会收到错误消息，这是由于函数外部没有hello导致的。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行下面的操作，并且不会出错

var greeter = 'hey hi';
var greeter = 'say Hello instead';

又比如

var greeter = 'hey hi';
greeter = 'say Hello instead';

var 的变量提升

变量提升是 JavaScript 的一种机制:在执行代码之前，变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做:

console.log(greeter);
var greeter = 'say hello';

生面的代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

因此，将var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化.

数据类型

Tue, 01 Oct 2024 00:00:00 +0800

前言

请讲下 JavaScript 中的数据类型？

前端面试中，估计大家都被这么问过。

答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 Null、Undefined、Boolean、String、Symbol、BigInt。引用类型指的是 Object。

没错，我也是这么回答的，只是这通常是第一个问题，由这个问题可以引出很多很多的问题，比如

Null 和 Undefined 有什么区别？前端的判空有哪些需要注意的？
typeof null 为什么是 object?
为什么 ES6 要提出 Symbol？
BigInt 解决了什么问题？
为什么 0.1 + 0.2 !== 0.3? 你如何解决这个问题？
如何判断一个值是数组？
…

弱类型语言

因为 JavaScript 是弱类型语言或者说是动态语言。这意味着你不需要提前声明变量的类型，在程序运行的过程中，类型会被自动确定，也就是说你可以使用同一个变量保存不同类型的值

var foo = 42; // foo is a Number now
foo = "bar"; // foo is a String now
foo = true; // foo is a Boolean now

这一特性给我们带来便利的同时，也给我们带来了很多的类型错误。试想一下，假如 JS 说是强类型语言，那么各个类型之间没法转换，也就有了一层隔阂或者说一层保护，会不会更加好维护呢？——这或许就是 TypeScript 诞生的原因。

对 JavaScript 的数据类型掌握，是一个前端最基本的知识点

null 还是 undefined

定义

undefined 表示未定义的变量。null 值表示一个空对象指针。

类型判断

Mon, 04 Nov 2024 00:00:00 +0800

JS中的类型判断也是咱的老朋友了，如果要你说两句，那便是啥玩意typeof、instanceof的，张口就来，但你真的掌握了每一种类型判断，并熟知其原理吗？就比如说Object.prototype.toString.call()，当面试官问其中的 call有什么作用时，咱们又该如何游说呢。

typeof原理

所有的类型判断里当属typeof最为经典，其最为出名之处就是这玩意不顶用，typeof居然会将null判定为object，但这到底是什么原因？实际上，这就是JS这门编程语言的官方团队造出来的一个bug。

let s = '123'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(123)
let big = 1234n
let obj = {}
let arr = []
let fn = function(){}
let date = new Date();

console.log(typeof(s)); // string
console.log(typeof(n)); // number
console.log(typeof(f)) // boolean
console.log(typeof(u)) // undifined
console.log(typeof(sy)) // symbol
console.log(typeof(big)) // bigint

console.log(typeof(nu)); //将null判断为object

//以下为引用类型，除了function，一律被判断为object
console.log(typeof(obj)) //object
console.log(typeof(arr)) //object
console.log(typeof(date)) //object

// 所有引用类型只能判断function
console.log(typeof(fn)) //function

//

原因就是：typeof会把所有传进去的值都转成二进制，而当年JS制定的规则便是：原始类型的被转为二进制的前面三个值绝对不为零，而typeof会把前三位为零的类型全部认定为对象，null这个类型又是JS语言后来引入的。遵循其他语言的原则，JS语言将null的二进制值定为一长串的0，因此typeof在判断时会将其认定为object。

因此，面试官一般不会询问判断方法 typeof 的原理。

手写一个instanceof

相较于typeof，instanceof有其优越之处，也有其不足之处，比如，instanceof只能判断引用类型，并且是通过原型链查找来判断类型。

let s = '123'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(123)
let big = 1234n
let obj = {}
let arr = []
let fn = function(){}
let date = new Date();

console.log(s instanceof String); // false instanceof 不能判断原始类型

// 以下为引用类型

console.log(obj instanceof Object) ; // true
console.log(arr instanceof Object); // true
console.log(fn instanceof Function); // true
console.log(date instanceof Date); // true

首先要知道每个类型的原型都不相同。

模版字符串

Wed, 02 Oct 2024 00:00:00 +0800

未见过的函数用法：

function fun(strings,params1){
 console.log(strings);
 console.log(params1)
}

fun`params1 = ${333}`
// 输出分别为
// ['params1 = ', '']
// 333

不知道各位在学习或开发中有没有遇到过这样的函数调用方式呢？秉承着我没遇到的东西就要发文章来分享分享的原则，经过我查阅资料并加以学习，就让本文来带大家了解一下JS中的标签函数吧。

模板字符串

标签函数的主要作用就是处理模板字符串，所以在了解标签函数之前先了解一下模板字符串（模板字面量）吧。

基本用法

模板字符串是ES6新增的使用模板字面量定义字符串的能力，用反引号```````` 进行分隔。与使用''或""的定义的字符串字面量不同是模板字面量保留换行字符，可以跨行定义字符串。例如：

let str1 = 'xxhh\n2233'
let str2 = `xxhh
2233`
console.log(str1 === str2) // 结果为true

要注意的是模板字符串中的所有字符都会包含在字符串中，特别在使用缩进的时候，缩进的空格都会包含在字符串中。

let str = `
 <div>
 <h1>xxhh</h1>
 </div>
`
console.log(str.length) // 结果为44，包含了缩进所产出的所有空格

字符串插值

在没有模板字符串时，我们通常会使用+加法运算符来进行字符串的拼接，但有了模板字符串后我们并可通过插值占位符${}来将各字面量、变量或表达式结果来进行拼接，这样可以更容易地创建复杂和动态的字符串，同时保持代码的可读性和简洁性。这是模板字符串最常用的一个特性。

let name = 'xxhh';
let str1 = "name:"+name;
let str2 = `name:${name}`;
console.log(str1,str2) // name:xxhh name:xxhh
console.log(str1 === str2) // true

要注意的是使用字符串插值的所有插入的值都会使用toString()强制转型为字符串，而且任何JavaScript 表达式都可以用于插值。

数据类型转换

Mon, 04 Nov 2024 00:00:00 +0800

前言

JavaScript 是一种非常灵活的编程语言，它允许开发者在代码中进行各种类型的操作和转换。其中，显式和隐式类型转换是 JavaScript 中一个重要而又常见的概念。你是否曾经遇到过 JavaScript 中奇怪的类型转换行为？当你使用加号连接两个不同类型的值时，为什么有时候会得到意料之外的结果？为了更好地理解 JavaScript 中的这些行为，我本篇文章将带大家深入探讨显式和隐式类型转换。

数据类型

首先简单了解下有哪些数据类型。

原始数据类型：String、Number、Boolean、Symbol、Undefined、Null、BigInt（本文不讨论BigInt、Symbol）

引用数据类型: Object（引用类型指向一个对象，不是原始值，指向对象的变量是引用变量）

类型转换

数据类型之间的转换可以分为下面三种：

原始数据类型之间的转换。
原始数据类型转换为对象。
对象转换为原始数据类型。

1.1 原始数据类型转Number

console.log(Number('123')); // 123
console.log(Number(true)); // 1
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0

我们可以直接调用Number()函数来进行转换。该函数会把undefined转换为NaN，将null转换为0。

而对于字符串，如果字符串中仅仅包含数字，则将转换为数字，若包含非数字字符，则返回NaN。我们也可以使用parseInt()来转换字符串。

console.log(parseInt('123')); // 123
console.log(parseInt('12.3')); // 12
console.log(parseInt('12ds8'));// 12
console.log(parseInt('ads25')); // NaN

parseInt()只解析整数部分，忽略小数部分。parseFloat()可以将字符串转换为浮点数的函数。

1.2 原始数据类型转String

console.log(String());//''
console.log(String(123));//'123'
console.log(String(NaN));//NaN
console.log(String(undefined));//undefined
console.log(String(null));//null
console.log(String(true));//true

我们可以使用String() 构造函数将任何类型的数据转换为字符串类型。它将接收到的参数转换为对应的字符串表示形式。

1.3 原始数据类型转Boolean

console.log(Boolean());// false
console.log(Boolean('Ywis'));// tru
console.log(Boolean(123));// true
console.log(Boolean(NaN));// false
console.log(Boolean(undefined));// false
console.log(Boolean(null));// false
console.log(Boolean(true));// true

调用Boolean()函数进行转换。在将非布尔值类型转换为布尔值类型时，有一个总结：

false：布尔值 false
undefined：未定义的值
null：空值
0：数字 0
-0：负零
NaN：非数字值
''：空字符串

除了以上七个值外，其他值（包括对象、数组、函数等）在转换为布尔值时都会返回 true。这种规则使得 JS 中的大多数值被视为真值（truthy）。

默认参数

Wed, 02 Oct 2024 00:00:00 +0800

一、参数传递

代码语言：javascript

function foo(a, b) {
 console.log([a, b]);
}

foo(1, 2); // 输出 [1, 2]

这个例子中，a 和 b 属于函数中的局部变量，只能在函数中访问。调用函数时，传递的数据会根据位置来匹配对应，分别赋值给 a 和 b。

创建函数时，function 函数名后面括号中设定的参数被称为形参；调用函数时，函数名后面括号中传入的参数被称为实参。上面例子中，a 和 b 是形参，传入的 1 和 2 是实参。

因为形参是已声明的变量，所以不能再用 let 和 const 重复声明。

代码语言：javascript

function foo(a, b) {
 let a = 1; // 报错，a 已声明
 const b = 1; // 报错，b 已声明
}

JavaScript 中所有函数传递都是按值传递的，不会按引用传递。所谓的值，就是指直接保存在变量上的值，如果把对象作为参数传递，那么这个值就是这个对象的引用，而不是对象本身。这里实际上是一个隐式的赋值过程，所以给函数传递参数时，相当于从一个变量赋值到另一个变量。

原始值：

代码语言：javascript

function add(num) {
 return num + 1;
}

let count = 5;
let result = add(count); // 此处参数传递的过程可以看作是 num = count

console.log(count); // 5
console.log(result); // 6

引用值：

内存空间

Wed, 06 Nov 2024 00:00:00 +0800

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }

因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。

当然也包括我自己。在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要。可是后我当我回过头来重新整理JS基础时，发现由于对它们的模糊认知，导致了很多东西我都理解得并不明白。比如最基本的引用数据类型和引用传递到底是怎么回事儿？比如浅复制与深复制有什么不同？还有闭包，原型等等。

因此后来我才渐渐明白，想要对JS的理解更加深刻，就必须对内存空间有一个清晰的认知。

在学习内存空间之前，我们需要对三种数据结构有一个直观的认知。他们分别是堆(heap)，栈(stack)与队列(queue)。

一、栈数据结构

与C/C++不同，JavaScript中并没有严格意义上区分栈内存与堆内存。因此我们可以简单粗暴的理解为JavaScript的所有数据都保存在堆内存中。但是在某些场景，我们仍然需要基于堆栈数据结构的思维来实现一些功能，比如JavaScript的执行上下文（关于执行上下文我会在下一篇文章中总结）。执行上下文的执行顺序借用了栈数据结构的存取方式。(也就是后面我们会经常提到的函数调用栈)。因此理解栈数据结构的原理与特点十分重要。

要简单理解栈的存取方式，我们可以通过类比乒乓球盒子来分析。如下图左侧。

这种乒乓球的存放方式与栈中存取数据的方式如出一辙。处于盒子中最顶层的乒乓球5，它一定是最后被放进去，但可以最先被使用。而我们想要使用底层的乒乓球1，就必须将上面的4个乒乓球取出来，让乒乓球1处于盒子顶层。这就是栈空间先进后出，后进先出的特点。图中已经详细的表明了栈空间的存储原理。

二、堆数据结构

堆数据结构是一种树状结构。它的存取数据的方式，则与书架与书非常相似。

书虽然也整齐的存放在书架上，但是我们只要知道书的名字，我们就可以很方便的取出我们想要的书，而不用像从乒乓球盒子里取乒乓一样，非得将上面的所有乒乓球拿出来才能取到中间的某一个乒乓球。好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

三、队列

在JavaScript中，理解队列数据结构的目的主要是为了清晰的明白事件循环（Event Loop）的机制到底是怎么回事。在后续的章节中我会详细分析事件循环机制。

队列是一种先进先出（FIFO）的数据结构。正如排队过安检一样，排在队伍前面的人一定是最先过检的人。用以下的图示可以清楚的理解队列的原理。

四、变量对象与基础数据类型

JavaScript的执行上下文生成之后，会创建一个叫做变量对象的特殊对象（具体会在下一篇文章与执行上下文一起总结），JavaScript的基础数据类型往往都会保存在变量对象中。

严格意义上来说，变量对象也是存放于堆内存中，但是由于变量对象的特殊职能，我们在理解时仍然需要将其于堆内存区分开来。

基础数据类型都是一些简单的数据段，JavaScript中有5中基础数据类型，分别是Undefined、Null、Boolean、Number、String。基础数据类型都是按值访问，因为我们可以直接操作保存在变量中的实际的值。

ES6中新加了一种基础数据类型Symbol，可以先不用考虑他

五、引用数据类型与堆内存

与其他语言不同，JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以理解为保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。

为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。

var a1 = 0; // 变量对象
var a2 = 'this is string'; // 变量对象
var a3 = null; // 变量对象

var b = { m: 20 }; // 变量b存在于变量对象中，{m: 20} 作为对象存在于堆内存中
var c = [1, 2, 3]; // 变量c存在于变量对象中，[1, 2, 3] 作为对象存在于堆内存中

因此当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量对象中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据。

理解了JS的内存空间，我们就可以借助内存空间的特性来验证一下引用类型的一些特点了。

在前端面试中我们常常会遇到这样一个类似的题目

// demo01.js
var a = 20;
var b = a;
b = 30;

// 这时a的值是多少？

// demo02.js
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 这时m.a的值是多少

在变量对象中的数据发生复制行为时，系统会自动为新的变量分配一个新值。var b = a执行之后，a与b虽然值都等于20，但是他们其实已经是相互独立互不影响的值了。具体如图。所以我们修改了b的值以后，a的值并不会发生变化。

箭头函数

Wed, 02 Oct 2024 00:00:00 +0800

一、箭头函数的特点

1. 相比普通函数，箭头函数有更加简洁的语法。

普通函数

function add(num) {
 return num + 10
}

箭头函数

const add = num => num + 10;

2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。

这句话需要注意的是，箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。

下面这个例子是箭头函数的外层有普通函数。

let obj = {
 fn:function(){
 console.log('我是普通函数',this === obj) // true
 return ()=>{
 console.log('我是箭头函数',this === obj) // true
 }
 }
}
console.log(obj.fn()())

下面这个例子是箭头函数的外层没有普通函数。

let obj = {
 fn:()=>{
 console.log(this === window);
 }
}
console.log(obj.fn())
// true

3. 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误。

执行上下文

Wed, 06 Nov 2024 00:00:00 +0800

我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。

console.log(a); // 这里会打印出什么？
var a = 20;

暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

全局环境：JavaScript代码运行起来会首先进入该环境
函数环境：当函数被调用执行时，会进入当前函数中执行代码
eval（不建议使用，可忽略）

因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。

当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。为了更加清晰的理解这个过程，根据下面的例子，结合图示给大家展示。

执行上下文可以理解为函数执行的环境，每一个函数执行时，都会给对应的函数创建这样一个执行环境。

var color = 'blue';

function changeColor() {
 var anotherColor = 'red';

 function swapColors() {
 var tempColor = anotherColor;
 anotherColor = color;
 color = tempColor;
 }

 swapColors();
}

changeColor();

我们用ECStack来表示处理执行上下文组的堆栈。我们很容易知道，第一步，首先是全局上下文入栈。

全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor() ，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。

changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。

在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapColors的上下文从栈中弹出。

swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了。

全局上下文在浏览器窗口关闭后出栈。

注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。

详细了解了这个过程之后，我们就可以对执行上下文总结一些结论了。

单线程
同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待
全局上下文只有唯一的一个，它在浏览器关闭时出栈
函数的执行上下文的个数没有限制
每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

function f1(){
 var n=999;
 function f2(){
 alert(n);
 }
 return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

最后留一个简单的例子，大家可以自己脑补一下这个例子在执行过程中执行上下文的变化情况。

var name = "window";

var p = {
 name: 'Perter',
 getName: function() {

 // 利用变量保存的方式保证其访问的是p对象
 var self = this;
 return function() {
 return self.name;
 }
 }
}

var getName = p.getName();
var _name = getName();
console.log(_name);

常见考点

执行上下文的定义

什么是执行上下文？它在 JavaScript 中有哪些类型？
执行上下文在代码执行时是如何被创建和销毁的？

执行上下文的生命周期

执行上下文的创建和执行过程有哪些阶段？（例如，创建阶段和执行阶段）
请描述执行上下文在创建阶段进行的三个步骤：变量对象的创建、作用域链的建立、this 的绑定。

变量对象（Variable Object）

什么是变量对象？它在执行上下文中的作用是什么？
变量提升是如何与变量对象关联的？在函数声明和变量声明时有何不同？

作用域链

执行上下文是如何通过作用域链来访问变量的？
请解释在嵌套函数的情况下，作用域链是如何建立的？

this 绑定

在不同的执行上下文中，this 的值是如何确定的？（例如，全局上下文、函数上下文、箭头函数）
如何解释在不同函数调用方式下 this 的指向差异？

执行上下文栈

什么是执行上下文栈？它如何管理代码执行的顺序？
JavaScript 引擎如何利用执行上下文栈来实现函数的嵌套调用和返回？

块级作用域的影响

ES6 中引入的 let 和 const 是如何影响执行上下文的？
如何解释块级作用域在执行上下文中的特殊处理？

常见问题与调试

如何通过理解执行上下文来排查变量未定义、this 指向错误等常见问题？
请解释某个你遇到的实际问题，以及如何通过分析执行上下文来解决它的。

解构赋值

Wed, 02 Oct 2024 00:00:00 +0800

解构赋值概念

解构赋值语法是一种 Javascript 表达式。

通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。
解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。

数组解构

基本使用

📖 可以在定义变量的同时，使用解构进行赋值

let [one, two, three] = foo;

//等同于

let one = foo[0];
let two = foo[1];
let three = foo[2];

📖 也可以先声明变量，在进行解构赋值

设置默认值

当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined

剩余值处理

可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上

进阶用法

🎨 可以和split 函数结合使用，比如

let [Mother,Father] = "judy,pete".split(',');

console.log(Mother) //judy
console.log(Father) //pete

🎨 可以使用逗号忽略元素，比如

let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"]

🎨 可以直接赋值给对象的属性，比如

let user = {};
[user.name, user.surname] = ["Ilya","Kantor"]

变量对象

Wed, 06 Nov 2024 00:00:00 +0800

这篇文章要给大家介绍的是变量对象。

在JavaScript中，我们肯定不可避免的需要声明变量和函数，可是JS解析器是如何找到这些变量的呢？我们还得对执行上下文有一个进一步的了解。

在知识点《执行上下文》中，我们已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段。

创建阶段

在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。

代码执行阶段

创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

从这里我们就可以看出详细了解执行上下文极为重要，因为其中涉及到了变量对象，作用域链，this等很多人没有怎么弄明白，但是却极为重要的概念，它关系到我们能不能真正理解JavaScript。在后面的文章中我们会一一详细总结，这里我们先重点了解变量对象。

变量对象（Variable Object）

变量对象的创建，依次经历了以下几个过程。

建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。
检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

许多读者在阅读到这的时候会因为下面的这样场景对于“跳过”一词产生疑问。既然变量声明的foo遇到函数声明的foo会跳过，可是为什么最后foo的输出结果仍然是被覆盖了？

function foo() { console.log('function foo') }
var foo = 20;

console.log(foo); // 20

其实只是大家在阅读的时候不够仔细，因为上面的三条规则仅仅适用于变量对象的创建过程。也就是执行上下文的创建过程。而foo = 20是在执行上下文的执行过程中运行的，输出结果自然会是20。对比下例。

console.log(foo); // function foo
function foo() { console.log('function foo') }
var foo = 20;

// 上栗的执行顺序为

// 首先将所有函数声明放入变量对象中
function foo() { console.log('function foo') }

// 其次将所有变量声明放入变量对象中，但是因为foo已经存在同名函数，因此此时会跳过undefined的赋值
// var foo = undefined;

// 然后开始执行阶段代码的执行
console.log(foo); // function foo
foo = 20;

根据这个规则，理解变量提升就变得十分简单了。在很多文章中虽然提到了变量提升，但是具体是怎么回事还真的很多人都说不出来，以后在面试中用变量对象的创建过程跟面试官解释变量提升，保证瞬间提升逼格。

在上面的规则中我们看出，function声明会比var声明优先级更高一点。为了帮助大家更好的理解变量对象，我们结合一些简单的例子来进行探讨。

// demo01
function test() {
 console.log(a);
 console.log(foo());

 var a = 1;
 function foo() {
 return 2;
 }
}

test();

在上例中，我们直接从test()的执行上下文开始理解。全局作用域中运行test()时，test()的执行上下文开始创建。为了便于理解，我们用如下的形式来表示

展开运算符

Wed, 02 Oct 2024 00:00:00 +0800

ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。就让我们看看它有哪些常见用法吧。

让函数的 Apply 调用方式成为过去

有时候我们需要通过 Function.prototype.apply 来调用函数，参数就放在一个数组里。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// 调用函数并传参
doStuff.apply(null, args);

现在有了展开运算符，我们可以完全避免使用 apply，只需在调用函数时在数组前加上展开运算符：

doStuff(...args);

代码变得更短、更简洁，也不需要一个毫无用处的 null！

合并数组

合并数组有各种方式，但是展开运算符为我们提供了一种新思路：

arr1.push(...arr2) // 在数组后面添加 arr2 里的元素
arr1.unshift(...arr2) //在数组前面添加 arr2 里的元素

如果你想合并两个数组，并且想把元素放到数组中的任何位置，你可以这么做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

代码少了很多，还可以随意控制位置！

拷贝数组

拷贝数组是个常见的任务，过去我们使用 Array.prototype.slice
来完成，但现在我们可以通过展开运算符得到数组的副本：

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

这里要注意，数组里的对象仍然是引用类型的，因此实际上并不是所有内容都被“拷贝”了。

将参数或 NodeList 转成数组

跟拷贝数组类似，我们用 Array.Prototype.slice 将 NodeList和 arguments 对象转成真正的数组，但是现在我们可以使用展开运算符完成这个任务：

export/import

Wed, 02 Oct 2024 00:00:00 +0800

export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

export 用于对外输出本模块
import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"

 //将上面的变量导出
 export { siteUrl ,siteName }

 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl) //输出： www.helloworld.net
 console.log(siteName) //输出： helloworld开发者社区

```

### 3 导出函数

导出函数和导出变量一样，需要添加`{ }`

````js
//a.js 中定义并导出一个函数
function sum(a, b) {
 return a + b
}
//将函数sum导出
export { sum }

//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

```

### 4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

#### 4.1 第一种写法

使用 `export default` 关键字导出，如下

````js
//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

#### 4.2 第二种写法

同样是使用`export default` 关键字，如下

````js
//a.js 中定义对象，并在最后导出
var obj = {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

export default obj //导出对象obj

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

### 5 导出类

导出类与上面的导出对象类似，同样是用 `export default` 关键字，同样有两种写法

#### 5.1 第一种写法

````js
//a.js 中定义一个类并直接导出
export default class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

#### 5.2 第二种写法

````js
//a.js 中定义一个类，最后导出
class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//导出这个类
export default Person

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

### 小结

下面我们简单总结一下

`export`与`export default`的区别

* export与export default均可用于导出常量、函数、文件、模块等
* 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
* export default后面不能跟const或let的关键词
* export、import可以有多个，export default仅有一个。
* 通过export方式导出，在导入时要加 { }，export default则不需要
* export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
* 模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个

对于 `import` ,`export` , `export default` ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

常见考点

1. `export` 的基本使用

export 用于导出模块中的内容（如变量、函数、类等），使得其他模块能够导入这些内容。

作用域链与闭包

Tue, 01 Oct 2024 00:00:00 +0800

初学JavaScript的时候，我在学习闭包上，走了很多弯路。而这次重新回过头来对基础知识进行梳理，要讲清楚闭包，也是一个非常大的挑战。

闭包有多重要？如果你是初入前端的朋友，我没有办法直观的告诉你闭包在实际开发中的无处不在，但是我可以告诉你，前端面试，必问闭包。面试官们常常用对闭包的了解程度来判定面试者的基础水平，保守估计，10个前端面试者，至少5个都死在闭包上。

可是为什么，闭包如此重要，还是有那么多人没有搞清楚呢？是因为大家不愿意学习吗？还真不是，而是我们通过搜索找到的大部分讲解闭包的中文文章，都没有清晰明了的把闭包讲解清楚。要么浅尝辄止，要么高深莫测，要么干脆就直接乱说一通。包括我自己曾经也写过一篇关于闭包的总结，回头一看，不忍直视[捂脸]。

因此本文的目的就在于，能够清晰明了得把闭包说清楚，让读者朋友们看了之后，就把闭包给彻底学会了，而不是似懂非懂。

一、作用域与作用域链

在详细讲解作用域链之前，我默认你已经大概明白了JavaScript中的下面这些重要概念。这些概念将会非常有帮助。

基础数据类型与引用数据类型
内存空间
垃圾回收机制
执行上下文
变量对象与活动对象

如果你暂时还没有明白，可以去看本系列的前三篇文章，本文文末有目录链接。为了讲解闭包，已经为大家做好了基础知识的铺垫哦。

作用域

在JavaScript中，我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

这里的标识符，指的是变量名或者函数名

JavaScript中只有全局作用域与函数作用域(因为eval我们平时开发中几乎不会用到它，这里不讨论)。
作用域与执行上下文是完全不同的两个概念。我知道很多人会混淆他们，但是一定要仔细区分。

JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。

作用域链

回顾一下，我们分析过的执行上下文的生命周期，如下图：

我们知道函数在调用激活时，会开始创建对应的执行上下文，在执行上下文生成的过程中，变量对象，作用域链，以及this的值会分别被确定。之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。

作用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

为了帮助大家理解作用域链，我我们先结合一个例子，以及相应的图示来说明。

var a = 20;

function test() {
 var b = a + 10;

 function innerTest() {
 var c = 10;
 return b + c;
 }

 return innerTest();
}

test();

在上面的例子中，全局，函数test，函数innerTest的执行上下文先后创建。我们设定他们的变量对象分别为VO(global)，VO(test), VO(innerTest)。而innerTest的作用域链，则同时包含了这三个变量对象，所以innerTest的执行上下文可如下表示。

innerTestEC = {
 VO: {...}, // 变量对象
 scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域链
}

我们可以直接用一个数组来表示作用域链，数组的第一项scopeChain[0]为作用域链的最前端，而数组的最后一项，为作用域链的最末端，所有的最末端都为全局变量对象。

很多人会误解为当前作用域与上层作用域为包含关系，但其实并不是。以最前端为起点，最末端为终点的单方向通道我认为是更加贴切的形容。如图。

注意，因为变量对象在执行上下文进入执行阶段时，就变成了活动对象，这一点在上一篇文章中已经讲过，因此图中使用了AO来表示。Active Object

是的，作用域链是由一系列变量对象组成，我们可以在这个单向通道中，查询变量对象中的标识符，这样就可以访问到上一层作用域中的变量了。

二、闭包

对于那些有一点 JavaScript 使用经验但从未真正理解闭包概念的人来说，理解闭包可以看作是某种意义上的重生，突破闭包的瓶颈可以使你功力大增。

闭包是一种特殊的对象。

它由两部分组成。执行上下文(代号A)，以及在该执行上下文中创建的函数（代号B）。

当B执行时，如果访问了A中变量对象中的值，那么闭包就会产生。

在大多数理解中，包括许多著名的书籍，文章里都以函数B的名字代指这里生成的闭包。而在chrome中，则以执行上下文A的函数名代指闭包。

因此我们只需要知道，一个闭包对象，由A、B共同组成，在以后的篇幅中，我将以chrome的标准来称呼。

// demo01
function foo() {
 var a = 20;
 var b = 30;

 function bar() {
 return a + b;
 }

 return bar;
}

var bar = foo();
bar();

上面的例子，首先有执行上下文foo，在foo中定义了函数bar，而通过对外返回bar的方式让bar得以执行。当bar执行时，访问了foo内部的变量a，b。因此这个时候闭包产生。

全方位解读this

Wed, 06 Nov 2024 00:00:00 +0800

我们在学习JavaScript的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。

危害比较大的是，有的不准确的结论在网上还广为流传。

比如对于this指向的理解中，有这样一种说法：谁调用它，this就指向谁。在我刚开始学习this的时候，我是非常相信这句话的。因为在一些情况下，这样理解也还算说得通。可是我常常会在开发中遇到一些不一样的情况，一个由于this的错误调用，可以让我懵逼一整天。那个时候我也查资料，在群里问大神，可是我仍然搞不清楚“我特么到底错哪里了”。其实只是因为我心中有一个不太准确的结论。

所以，我认为需要有这样一篇文章，来帮助大家全方位的解读this。让大家对this，有一个正确的，全面的认知。

在这之前，我们需要来回顾一下执行上下文。

在前面的几篇文章中，我有好几个地方都提到执行上下文的生命周期，为了防止大家没有记住，再次来回顾一下，如下图。

在执行上下文的创建阶段，会分别生成变量对象，建立作用域链，确定this指向。其中变量对象与作用域链我们都已经仔细总结过了，而这里的关键，就是确定this指向。

首先我们需要得出一个非常重要一定要牢记于心的结论，**this的指向，是在函数被调用的时候确定的。**也就是执行上下文被创建时确定的。因此，一个函数中的this指向，可以是非常灵活的。比如下面的例子中，同一个函数由于调用方式的不同，this指向了不一样的对象。

var a = 10;
var obj = {
 a: 20
}

function fn () {
 console.log(this.a);
}

fn(); // 10
fn.call(obj); // 20

除此之外，在函数执行过程中，this一旦被确定，就不可更改了。

var a = 10;
var obj = {
 a: 20
}

function fn () {
 this = obj; // 这句话试图修改this，运行后会报错
 console.log(this.a);
}

fn();

一、全局对象中的this

关于全局对象的this，我之前在总结变量对象的时候提到过，它是一个比较特殊的存在。全局环境中的this，指向它本身。因此，这也相对简单，没有那么多复杂的情况需要考虑。

// 通过this绑定到全局对象
this.a2 = 20;

// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a1 = 10;

// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;

// 输出结果会全部符合预期
console.log(a1);
console.log(a2);
console.log(a3);

二、函数中的this

在总结函数中this指向之前，我想我们有必要通过一些奇怪的例子，来感受一下函数中this的捉摸不定。

// demo01
var a = 20;
function fn() {
 console.log(this.a);
}
fn();

// demo02
var a = 20;
function fn() {
 function foo() {
 console.log(this.a);
 }
 foo();
}
fn();

// demo03
var a = 20;
var obj = {
 a: 10,
 c: this.a + 20,
 fn: function () {
 return this.a;
 }
}

console.log(obj.c);
console.log(obj.fn());

这几个例子需要花点时间仔细感受一下，如果你暂时没想明白怎么回事，也不用着急，我们一点一点来分析。

Promise

Wed, 02 Oct 2024 00:00:00 +0800

Promise 是在 ES6 出现的新功能，并且是用来优化过去回调函式 callback 的写法。这篇面试详解中会讨论到， promise 是什么、为什么需要有 Promise，以及延伸到 async/await 相关问题。

为什么要使用 Promise？

在探讨 Promise 之前，我们先来看一下为什么需要它的出现。

JavaScript 中有一个重要概念 - 异步 (async)，它允许我们在执行耗时任务时，不必等待程式完成，而是继续执行下面的代码，直到任务完成再通知。常用的异步操作有：文件操作、数据库操作、AJAX 以及定时器等。

JavaScript 有两种实现异步的方式：

第一种：回调函式 callback function

在 ES6 promise 出现之前，通常使用回调函式 (callback) 实现异步操作。但使用回调函式 callback 存在一个明显的缺点，当需要执行多个异步操作时，代码会不断往内嵌套，这种情况通常被称为「callback 地狱」(callback hell)。

callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 }, 200);
 }, 200);
 }, 200);
}, 200);

而为了解决这种问题，就出现了第二种方法 - promise。

什么是 Promise？

上一段提到 Promise 出现的原因，这一段我们来看那到底 Promise 是什么。

Generator

Wed, 02 Oct 2024 00:00:00 +0800

聊聊 `for of`

说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。但是就像我们标题里面说的，它跟 Generator 能扯上什么关系呢？

首先我们想一个问题，为什么使用 for of 或者 map()/filer() 方法就可以遍历一个数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 呢？为什么不能用他们来遍历一个对象呢？

你能学到什么

对 for of 更深入的理解
iterator 到底是何方神圣?
数组也是对象，为什么不能用 for of 来遍历对象呢？
如何实现对象的 for of?
Generator 又是何方神圣？他有什么用呢？

类数组对象的玄机

在真正揭开谜底之前，站在 for of 的角度想一下，现在让你去遍历一个数组，你需要知道什么信息呢？

对应下标的值
是否遍历结束的标志

带着这样的思考，我们打印一个数组来看看这里面的玄机：

const numbersArray = [1, 2, 3];

console.dir(numbersArray);

数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 的原型中都实现了一个方法 Symbol.iterator，问题来了，那么这个 Symbol.iterator 又有什么用呢？拿出来试一下就知道了：

函数与函数式编程

Tue, 01 Oct 2024 00:00:00 +0800

纵观JavaScript中所有必须需要掌握的重点知识中，函数是我们在初学的时候最容易忽视的一个知识点。在学习的过程中，可能会有很多人、很多文章告诉你面向对象很重要，原型很重要，可是却很少有人告诉你，面向对象中所有的重点难点，几乎都与函数息息相关。

包括之前几篇文章介绍的执行上下文，变量对象，闭包，this等，都是围绕函数的细节来展开。

很多人在学习中，很急切的希望自己快一点开始学习面向对象，学习模块，学习流行框架，然后迅速成为高手。但是我可以很负责的告诉你，关于函数的这些基础东西没理解到一定程度，那么你的学习进展一定是举步维艰的。

所以，大家一定要重视函数！

当然，关于函数的重点，难点在前面几篇文章都已经说得差不多了，这篇文章主要总结一下函数的基础知识，并初步学习函数式编程的思维。

一、函数声明、函数表达式、匿名函数与自执行函数

关于函数在实际开发中的应用，大体可以总结为函数声明、函数表达式、匿名函数、自执行函数。

函数声明

我们知道，JavaScript中，有两种声明方式，一个是使用var的变量声明，另一个是使用function的函数声明。

在前端基础进阶（三）：变量对象详解中我有提到过，变量对象的创建过程中，函数声明比变量声明具有更为优先的执行顺序，即我们常常提到的函数声明提前。因此我们在执行上下文中，无论在什么位置声明了函数，我们都可以在同一个执行上下文中直接使用该函数。

fn(); // function

function fn() {
 console.log('function');
}

函数表达式

与函数声明不同，函数表达式使用了var进行声明，那么我们在确认他是否可以正确使用的时候就必须依照var的规则进行判断，即变量声明。我们知道使用var进行变量声明，其实是进行了两步操作。

// 变量声明
var a = 20;

// 实际执行顺序
var a = undefined; // 变量声明，初始值undefined，变量提升，提升顺序次于function声明
a = 20; // 变量赋值，该操作不会提升

同样的道理，当我们使用变量声明的方式来声明函数时，就是我们常常说的函数表达式。函数表达的提升方式与变量声明一致。

fn(); // 报错
var fn = function() {
 console.log('function');
}

上例子的执行顺序为：

var fn = undefined; // 变量声明提升
fn(); // 执行报错
fn = function() { // 赋值操作，此时将后边函数的引用赋值给fn
 console.log('function');
}

因此，由于声明方式的不同，导致了函数声明与函数表达式在使用上的一些差异需要我们注意，除此之外，这两种形式的函数在使用上并无不同。

关于上面例子中，函数表达式中的赋值操作，在其他一些地方也会被经常使用，我们清楚其中的关系即可。

在构造函数中添加方法
function Person(name) {
 this.name = name;
 this.age = age;
 // 在构造函数内部中添加方法
 this.getAge = function() {
 return this.age;
 }
 this.
}
// 给原型添加方法
Person.prototype.getName = function() {
 return this.name;
}

// 在对象中添加方法
var a = {
 m: 20,
 getM: function() {
 return this.m;
 }
}

匿名函数

Async/Await

Wed, 02 Oct 2024 00:00:00 +0800

async/await用法

其实你要实现一个东西之前，最好是先搞清楚这两样东西

这个东西有什么用？
这个东西是怎么用的？

有什么用？

async/await的用处就是：用同步方式，执行异步操作，怎么说呢？举个例子

比如我现在有一个需求：先请求完接口1，再去请求接口2，我们通常会这么做

function request(num) { // 模拟接口请求
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(num * 2)
 }, 1000)
 })
}

request(1).then(res1 => {
 console.log(res1) // 1秒后 输出 2

 request(2).then(res2 => {
 console.log(res2) // 2秒后 输出 4
 })
})

或者我现在又有一个需求：先请求完接口1，再拿接口1返回的数据，去当做接口2的请求参数，那我们也可以这么做

request(5).then(res1 => {
 console.log(res1) // 1秒后 输出 10

 request(res1).then(res2 => {
 console.log(res2) // 2秒后 输出 20
 })
})

其实这么做是没问题的，但是如果嵌套的多了，不免有点不雅观，这个时候就可以用async/await来解决了

async function fn () {
 const res1 = await request(5)
 const res2 = await request(res1)
 console.log(res2) // 2秒后输出 20
}
fn()

是怎么用？

还是用刚刚的例子

函数柯里化

Tue, 01 Oct 2024 00:00:00 +0800

柯里化是函数的一个比较高级的应用，想要理解它并不简单。

通过《函数与函数式编程》的学习，我们知道，接收函数作为参数的函数，都可以叫做高阶函数。我们常常利用高阶函数来封装一些公共的逻辑。

我们接下来要学习的柯里化，其实就是高阶函数的一种特殊用法。

柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。

这样的定义可能不太好理解，我们可以通过下面的例子配合理解。

假如有一个接收三个参数的函数A。

function A(a, b, c) {
 // do something
}

又假如我们有一个已经封装好了的柯里化通用函数createCurry。他接收bar作为参数，能够将A转化为柯里化函数，返回结果就是这个被转化之后的函数。

var _A = createCurry(A);

那么_A作为createCurry运行的返回函数，他能够处理A的剩余参数。因此下面的运行结果都是等价的。

_A(1, 2, 3);
_A(1, 2)(3);
_A(1)(2, 3);
_A(1)(2)(3);
A(1, 2, 3);

函数A被createCurry转化之后得到柯里化函数_A，_A能够处理A的所有剩余参数。因此柯里化也被称为部分求值。

在简单的场景下，我们可以不用借助柯里化通用式来转化得到柯里化函数，我们可以凭借眼力自己封装。

例如有一个简单的加法函数，他能够将自身的三个参数加起来并返回计算结果。

function add(a, b, c) {
 return a + b + c;
}

那么add函数的柯里化函数_add则可以如下：

function _add(a) {
 return function(b) {
 return function(c) {
 return a + b + c;
 }
 }
}

因此下面的运算方式是等价的。

add(1, 2, 3);
_add(1)(2)(3);

当然，柯里化通用式具备更加强大的能力，我们靠眼力自己封装的柯里化函数则自由度偏低。因此我们仍然需要知道自己如何去封装这样一个柯里化的通用式。

首先通过_add可以看出，柯里化函数的运行过程其实是一个参数的收集过程，我们将每一次传入的参数收集起来，并在最里层里面处理。因此我们在实现createCurry时，可以借助这个思路来进行封装。

封装如下:

// 简单实现，参数只能从右到左传递
function createCurry(func, args) {

 var arity = func.length;
 var args = args || [];

 return function() {
 var _args = [].slice.call(arguments);
 [].push.apply(_args, args);

 // 如果参数个数小于最初的func.length，则递归调用，继续收集参数
 if (_args.length < arity) {
 return createCurry.call(this, func, _args);
 }

 // 参数收集完毕，则执行func
 return func.apply(this, _args);
 }
}

尽管我已经做了足够详细的注解，但是我想理解起来也并不是那么容易，因此建议大家用点耐心多阅读几遍。这个createCurry函数的封装借助闭包与递归，实现了一个参数收集，并在收集完毕之后执行所有参数的一个过程。

Class

Wed, 02 Oct 2024 00:00:00 +0800

Class 的基本语法

简介

类的由来

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
 this.x = x;
 this.y = y;
}

Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }

 toString() {
 return '(' + this.x + ', ' + this.y + ')';
 }
}

上面代码定义了一个“类”，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Point是一致的。

Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {
 // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

class Bar {
 doStuff() {
 console.log('stuff');
 }
}

const b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

原型链与继承

Tue, 01 Oct 2024 00:00:00 +0800

JavaScript 中没有类的概念的，主要通过原型链来实现继承。通常情况下，继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联（原型对象指针），这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

原型

当我们 new 了一个新的对象实例，明明什么都没有做，就直接可以访问 toString 、valueOf 等原生方法。那么这些方法是从哪里来的呢？答案就是原型。

在控制台打印一个空对象时，我们可以看到，有很多方法，已经“初始化”挂载在内置的 __proto__ 对象上了。这个内置的 __proto__ 是一个指向原型对象的指针，它会在创建一个新的引用类型对象时（显示或者隐式）自动创建，并挂载到新实例上。当我们尝试访问实例对象上的某一属性 / 方法时，如果实例对象上有该属性 / 方法时，就返回实例属性 / 方法，如果没有，就去 __proto__ 指向的原型对象上查找对应的属性 / 方法。这就是为什么我们尝试访问空对象的 toString 和 valueOf 等方法依旧能访问到的原因，JavaScript 正式以这种方式为基础来实现继承的。

构造函数

如果说实例的 __proto__ 只是一个指向原型对象的指针，那就说明在此之前原型对象就已经创建了，那么原型对象是什么时候被创建的呢？这就要引入构造函数的概念。

其实构造函数也就只是一个普通的函数而已，如果这个函数可以使用 new 关键字来创建它的实例对象，那么我们就把这种函数称为 构造函数。

// 普通函数
function person () {}

// 构造函数，函数首字母通常大写
function Person () {}
const person = new Person();

原型对象正是在构造函数被声明时一同创建的。构造函数被申明时，原型对象也一同完成创建，然后挂载到构造函数的 prototype 属性上：

原型对象被创建时，会自动生成一个 constructor 属性，指向创建它的构造函数。这样它俩的关系就被紧密地关联起来了。

细心的话，你可能会发现，原型对象也有自己的 __proto__ ，这也不奇怪，毕竟万物皆对象嘛。原型对象的 proto 指向的是 Object.prototype。那么 Object.prototype.__proto__ 存不存在呢？其实是不存在的，打印的话会发现是 null 。这也证明了 Object 是 JavaScript 中数据类型的起源。

Map与Set

Wed, 02 Oct 2024 00:00:00 +0800

每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的《ES6入门》去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。

当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。

不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢

Set和Map主要的应用场景在于数组去重和数据存储，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现

原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和Map吧

集合

集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构
这里说的Set其实就是我们所要讲到的集合，先来看下基础用法

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
 console.log(i); // 2 3 5 4
}

// 去除数组的重复成员
let array = [1,2,1,4,5,3];
[...new Set(array)] // [1, 2, 4, 5, 3]

具体用法如果还有不清楚的，这里我会在后面一一细说。现在还是来看一下以ES6中Set类(数据结构)为基础实现的集合吧

Set实例的属性和方法

Set的属性：
- size：返回集合所包含元素的数量
Set的方法：
- 操作方法
  - add(value)：向集合添加一个新的项
  - delete(value)：从集合中移除一个值
  - has(value)：如果值在集合中存在，返回true,否则false
  - clear(): 移除集合里所有的项
- 遍历方法
  - keys()：返回一个包含集合中所有键的数组
  - values()：返回一个包含集合中所有值的数组
  - entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)
  - forEach()：用于对集合成员执行某种操作，没有返回值

创建一个集合

function Set(arr = []) { // 可以传入数组
 let items = {};
 this.size = 0; // 记录集合中成员的数量
}

module.exports = Set;

这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的

高阶函数

Tue, 01 Oct 2024 00:00:00 +0800

高阶函数是指那些可以接受函数作为参数或者返回函数作为结果的函数。这种特性使得JavaScript的函数变得异常灵活和强大，为开发者提供了丰富的工具和手段来编写更加简洁、可重用和模块化的代码。

本文将详细介绍JavaScript高阶函数的概念、特性、常见用法以及在实际开发中的应用。

一、高阶函数的概念

高阶函数是函数式编程中的一个核心概念。在JavaScript中，函数是一等公民，这意味着函数可以像其他数据类型（如数字、字符串、对象等）一样被传递和操作。高阶函数正是利用了这一特性，使得函数可以作为参数传递给其他函数，或者作为其他函数的返回值。

二、高阶函数的特性

函数作为参数：高阶函数可以接受一个或多个函数作为参数。这使得我们可以将特定的行为（即函数）作为参数传递给高阶函数，从而实现更加灵活和可重用的代码。
函数作为返回值：高阶函数可以返回一个函数作为结果。这种特性允许我们创建可以动态生成新函数的函数，这些新函数可以根据需要执行不同的行为。
闭包：闭包是高阶函数的一个重要特性。闭包允许函数访问其外部作用域中的变量，即使该函数在其外部作用域之外执行。这使得高阶函数可以捕获和存储状态，从而创建更加复杂和强大的函数行为。

三、高阶函数的常见用法

数组方法：JavaScript中的数组方法（如map、filter、reduce等）都是高阶函数的典型例子。这些方法接受一个函数作为参数，并对数组中的每个元素执行该函数，从而返回一个新的数组或单一结果。

map方法：用于创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。
filter方法：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
reduce方法：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

函数组合：函数组合是指将多个函数组合在一起形成一个新的函数。通过高阶函数，我们可以轻松地将多个函数组合在一起，从而创建一个更加复杂和强大的函数。这种技术在实际开发中非常有用，特别是当我们需要处理一系列转换或操作时。
柯里化：柯里化是一种将接收多个参数的函数转换为一系列接收单一参数的函数的技术。虽然柯里化本身不是高阶函数，但高阶函数在实现柯里化时扮演着重要角色。通过高阶函数，我们可以创建一个接受原始函数作为参数的柯里化函数，并返回一个新的函数来处理单一参数。
创建高阶函数：我们可以编写自己的高阶函数来实现特定的行为。例如，我们可以编写一个高阶函数来接受一个函数和一个数组作为参数，并返回该数组中应用该函数后的结果。

四、高阶函数在实际开发中的应用

1. 数据转换

高阶函数非常适合用于数据的转换和映射。例如，我们可以使用Array.prototype.map方法将一个数组中的每个元素转换为另一种形式。

// 定义一个高阶函数，它接受一个转换函数和一个数组作为参数
const transformArray = (transformFn, array) => array.map(transformFn);

// 定义一个简单的转换函数，将数字转换为它的平方
const square = x => x * x;

// 使用高阶函数和转换函数来处理数组
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = transformArray(square, numbers);

console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

在这个例子中，transformArray是一个高阶函数，它接受一个转换函数transformFn和一个数组array作为参数。然后，它使用Array.prototype.map方法来遍历数组，并对每个元素应用转换函数。

2. 事件处理

在Web开发中，事件处理是一个常见的任务。通过高阶函数，我们可以创建更加灵活和可重用的事件处理器。

// 定义一个高阶函数，它接受一个事件处理函数和一个事件类型作为参数
const createEventHandler = (handlerFn, eventType) => event => {
 if (event.type === eventType) {
 handlerFn(event);
 }
};

// 定义一个简单的事件处理函数，用于打印事件信息
const logEvent = event => console.log(`Event type: ${event.type}, Target: ${event.target}`);

// 创建一个点击事件处理器
const handleClick = createEventHandler(logEvent, 'click');

// 假设我们有一个DOM元素，我们可以为它添加事件监听器
// const button = document.querySelector('button');
// button.addEventListener('click', handleClick);

// 为了演示，我们直接调用处理器并传递一个模拟的事件对象
const mockEvent = { type: 'click', target: document.body };
handleClick(mockEvent); // 输出: Event type: click, Target: [object HTMLBodyElement]

在这个例子中，createEventHandler是一个高阶函数，它接受一个事件处理函数handlerFn和一个事件类型eventType作为参数，并返回一个新的函数。这个新的函数会检查传入的事件对象的类型是否与指定的事件类型匹配，如果匹配，则调用事件处理函数。

WeakMap 和 WeakSet

Wed, 02 Oct 2024 00:00:00 +0800

1. 什么是 WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合，具备

WeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value) ：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value) ：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。这三个方法。但是，它与 Set 有两个区别。

区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下

从代码中可以看到，想像Set一样直接往 WeakSet 中添加原始类型化会报错，只能添加对象和Symbol

区别二`(这是核心)`： WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

（这句解释来自ECMAScript 6 入门,第一眼看到这句话这话会觉得有点晦涩，我们来解释一下）

弱引用：垃圾回收机制有一套自己的回收算法，我们都知道一个函数执行完成后该函数在调用栈中创建的执行上下文会被销毁，这里说的销毁，其实指的就是执行上下文中环境变量、词法变量中的数据存储所占据的内存空间被垃圾回收机制所回收，那么垃圾回收机制不考虑 WeakSet 对该对象的引用是不是就意味着垃圾回收机制不会回收 WeakSet 对象里面的数据所占据的内存呢？不！不是的！代码是最好的解释

我们用 ws 中存放一个对象，然后再将该对象置为null，（这里要说明一下，一个变量被置为null，就意味着这个变量的内存可以被回收了）看着这个打印结果有没有突然明白了点什么，对！没错！只要 WeakSet 结构中的对象不再需要被引用，那么 WeakSet 就直接为空了，这不就意味着WeakSet中的数据所占据的内存被释放了吗。好的，你或许还会有疑问，难道不用 WeakSet 存储数据，结果就不是这样的吗，来打消你的疑虑

不使用 WeakSet 存放数据，当变量obj为null时，fistName依旧是有值的，对比这段代码，我们可以清晰的看出, WeakSet中 - 垃圾回收机制会自动回收该对象所占用的内存

2. 这里有’BUG'

可能已经有小伙伴拔出了他40米长的大剑了，上图二中的代码其实有问题，真实的打印应该是

各位手中的长剑收一收，先别急，其实我们前面聊的没有问题，为什么这里真是打印能出来结果呢？这个问题在国外某技术论坛上也是一度出现在 WeakSet 话题榜首位，解释为：因为浏览器的垃圾回收机制是不受我们控制的，我们无法知道垃圾回收机制什么时候执行，之所以打印能出现内容，其实是因为打印的时候垃圾回收机制没有启动。所以我们可以认为，上图二中的打印在垃圾回收启动之后，它就是空的

我们可以这样来证明它:

如果这样你觉得依旧不够睡服你自己的话，我们把这段代码搬到node中：

异步编程

Tue, 01 Oct 2024 00:00:00 +0800

浏览器中的JavaScript程序是典型的事件驱动型程序，即它们会等待用户触发后才真正的执行，而基于的JavaScript的服务器通常要等待客户端通过网络发送请求，然后才能执行。这种异步编程在JavaScript是很常见的，下面就来介绍几个异步编程的重要特性，它们可以使编写异步代码更容易。

本文将按照异步编程方式的出现时间来归纳整理：

一、什么是异步

下面先来看看同步和异步的概念：

同步： 在执行某段代码时，在没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值，即可执行其他代码。也就是说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。
异步： 当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情况称为异步。

下面来看一个例子：

// 同步
function syncAdd(a, b) {
  return a + b;
}

syncAdd(1, 2) // 立即得到结果：3

// 异步
function asyncAdd(a, b) {
  setTimeout(function() {
    console.log(a + b);
  }, 1000)
}

asyncAdd(1, 2) // 1s后打印结果：3

这里定义了同步函数 syncAdd 和异步函数 asyncAdd，调用 syncAdd(1, 2) 函数时会等待得到结果之后再执行后面的代码。而调用 asyncAdd(1, 2) 时则会在得到结果之前继续执行，直到 1 秒后得到结果并打印。

我们知道，JavaScript 是单线程的，如果代码同步执行，就可能会造成阻塞；而如果使用异步则不会阻塞，不需要等待异步代码执行的返回结果，可以继续执行该异步任务之后的代码逻辑。因此，在 JavaScript 编程中，会大量使用异步。

那为什么单线程的JavaScript还能实现异步呢，其实也没有什么魔法，只是把一些操作交给了其他线程处理，然后采用了事件循环的机制来处理返回结果。

二、回调函数

在最基本的层面上，JavaScript的异步编程式通过回调实现的。回调的是函数，可以传给其他函数，而其他函数会在满足某个条件时调用这个函数。下面就来看看常见的不同形式的基于回调的异步编程。

1. 定时器

一种最简单的异步操作就是在一定时间之后运行某些代码。如下面代码：

setTimeout(asyncAdd(1, 2), 8000)

setTimeout()方法的第一个参数是一个函数，第二个参数是以毫秒为单位的时间间隔。asyncAdd()方法可能是一个回调函数，而setTimeout()方法就是注册回调函数的函数。它还代指在什么异步条件下调用回调函数。setTimeout()方法只会调用一次回调函数。

2. 事件监听

给目标 DOM 绑定一个监听函数，用的最多的是 addEventListener：

document.getElementById('#myDiv').addEventListener('click', (e) => {
 console.log('我被点击了')
}, false);

通过给 id 为 myDiv 的一个元素绑定了点击事件的监听函数，把任务的执行时机推迟到了点击这个动作发生时。此时，任务的执行顺序与代码的编写顺序无关，只与点击事件有没有被触发有关。

defineProperty 与 proxy

Wed, 02 Oct 2024 00:00:00 +0800

前言

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

definePropety

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj: 要在其上定义属性的对象。

prop: 要定义或修改的属性的名称。

descriptor: 将被定义或修改的属性的描述符。

举个例子：

var obj = {};
Object.defineProperty(obj, "num", {
 value : 1,
 writable : true,
 enumerable : true,
 configurable : true
});
// 对象 obj 拥有属性 num，值为 1

虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。

函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。

两者均具有以下两种键值：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。

enumerable

当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

值得注意的是：

事件循环

Tue, 01 Oct 2024 00:00:00 +0800

单线程的 JavaScript

同步与异步

JavaScript 在设计之初是作为浏览器脚本语言，主要用于与用户进行页面交互和操纵 DOM。因此，为避免由不可预测的用户操作可能带来的复杂的并发问题，JavaScript 只能设计成单线程的，这也是这门语言的核心特征之一。

JS 的宿主环境通过仅提供一个线程运行 JS 来保证 JS 代码的单线程运行。

单线程意味着 JS 引擎在同一时间只能做一件事情，即同步地执行代码。但在代码执行过程中不可避免地会遇到一些无法立即执行的任务，例如：

计时器到达时间后要执行的任务 — setInterval、setTimeout
网络请求完成后要执行的任务 — XMLHttpRequest、Fetch
监听到用户操作后要执行的任务 — addEventListener
… … …

如果让执行 JS 的线程去处理这些任务，就会导致该线程处于长期阻塞的状态，而宿主环境中的 JS 执行线程往往还承担着极其重要的工作。例如，在浏览器中，如果执行 JS 的线程长期阻塞，就会导致浏览器卡死！

为避免上述情况发生，JS 的宿主环境使用了异步的方式来处理这种无法立即执行的任务。

当遇到异步任务时，宿主环境会将其交给其他线程处理，执行 JS 的线程则会立即结束当前任务转而去执行后续代码。

事件循环

事件循环是宿主环境处理 JS 异步操作，让其能够非阻塞式运行的机制。

不同宿主环境对事件循环的实现方式有所不同，不过在核心机制上大同小异。

接下来，本文将详细描述 JavaScript 在浏览器和 Node.js 这两个宿主环境中的事件循环机制。

浏览器事件循环

浅谈浏览器

聊浏览器的事件循环之前，我们先说说浏览器本身。

现代浏览器是一个多进程多线程的应用程序，内部工作极其复杂，其程度直逼操作系统。它拥有数个功能模块，为避免单个模块崩溃牵连其他模块，导致连锁反应，使浏览器彻底崩溃。浏览器在启动时，会开启多个进程，把不同的功能模块放在不同的进程里。

浏览器进程众多，其中比较重要的有：

📚 浏览器进程

浏览器进程是浏览器的主进程，无论打开多少浏览器窗口，它仅有一个。

它主要负责浏览器界面显示、用户交互和进程管理。

这里说的界面和交互，不是视窗内的网站界面。而是指浏览器本身自带的部分，如导航栏、书签栏、刷新按钮等。

刚打开浏览器的时候只有一个浏览器进程，其他进程都是它创建的。

📚 网络进程

网络进程主要负责处理网站的数据请求和响应，通常情况下，它与渲染进程的交互最为密切。每当网站需要进行资源请求，渲染进程就会将任务交给网络进程处理，网络进程取得响应结果后再返回给渲染进程。

网络进程内部会开启多个线程，以实现多网络请求的异步化处理。

📚 渲染进程

渲染进程负责控制和显示视窗部分（网站页面）的所有内容，主要是解析 HTML、CSS、JS 和其他资源，并生成渲染树、执行布局和绘制等操作。

Reflect

Wed, 02 Oct 2024 00:00:00 +0800

一、Reflect有什么用？

一句话，Reflect没什么用，除了装装逼，让人看起来高大上以外，并不具有什么牛逼之处。

准确讲应该是这样的，Reflect更像是一种语法变体，其挂在的所有方法都能找到对应的原始语法，也就是Reflect的替代性非常强。

其实从Reflect这个单词本身字面意思就能体会出Reflect的神韵，Reflect的中文意思是“反射”，阳光照在镜子上反射，其实光子还是那些光子，只是变化了方向。

举例说明：

Reflect对象挂载了很多静态方法，所谓静态方法，就是和Math.round()这样，不需要new就可以直接使用的方法。

比较常用的两个方法就是get()和set()方法：

Reflect.get(target, propertyKey\[, receiver\])
Reflect.set(target, propertyKey, value\[, receiver\])

就作用而言，等同于：

target[propertyKey]
target[propertyKey] = value;

比方说页面上有个输入框，其DOM对象变量是input，平时我们对整个输入框赋值使用的语句多半是：

input.value = 'zhangxinxu';

就可以直接使用Reflect.set()方法代替：

Reflect.set(input, 'value', 'zhangxinxu')

效果是一模一样的。

又例如，我们希望对input的value属性重新定义，使该输入框value属性发生变化的时候可以同时触发'change'事件，下面是使用大家普遍比较熟悉的Object.defineProperty()方法实现的示意：

const props = Object.getOwnPropertyDescriptor(input, 'value');
Object.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

上述代码我们完全可以使用Reflect对象实现，具体的JavaScript代码如下所示。

const props = Reflect.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Reflect.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

我们可以测试下，假设页面HTML如下：

<input id="input">

测试代码为：

input.addEventListener('change', () => {
 document.body.append('变化啦~');
});

input.value = 'zhangxinxu';

此时，就可以看到页面上出现了“变化啦~”文字

模块化

Tue, 01 Oct 2024 00:00:00 +0800

前言

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。

本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无味的概念，希望诸君阅读后，对模块化编程有个全新的认识和理解！

一、模块化的理解

1.什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

2.模块化的进化过程

全局function模式 : 将不同的功能封装成不同的全局函数
- 编码: 将不同的功能封装成不同的全局函数
- 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

function m1(){
 //...
}
function m2(){
 //...
}

namespace模式 : 简单对象封装
- 作用: 减少了全局变量，解决命名冲突
- 问题: 数据不安全(外部可以直接修改模块内部的数据)

let myModule = {
 data: 'www.baidu.com',
 foo() {
 console.log(`foo() ${this.data}`)
 },
 bar() {
 console.log(`bar() ${this.data}`)
 }
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

IIFE模式：匿名函数自调用(闭包)
- 作用: 数据是私有的, 外部只能通过暴露的方法操作
- 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
- 问题: 如果当前这个模块依赖另一个模块怎么办?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
 myModule.foo()
 myModule.bar()
 console.log(myModule.data) //undefined 不能访问模块内部数据
 myModule.data = 'xxxx' //不是修改的模块内部的data
 myModule.foo() //没有改变
</script>

// module.js文件
(function(window) {
 let data = 'www.baidu.com'
 //操作数据的函数
 function foo() {
 //用于暴露有函数
 console.log(`foo() ${data}`)
 }
 function bar() {
 //用于暴露有函数
 console.log(`bar() ${data}`)
 otherFun() //内部调用
 }
 function otherFun() {
 //内部私有的函数
 console.log('otherFun()')
 }
 //暴露行为
 window.myModule = { foo, bar } //ES6写法
})(window)

最后得到的结果：

数组扩展

Wed, 02 Oct 2024 00:00:00 +0800

ES6（ECMAScript 2015）为JavaScript数组引入了多项扩展功能，这些功能不仅简化了数组操作，还提高了代码的可读性和效率。本文将详细介绍ES6数组扩展的主要功能和用法。

一、扩展运算符（…）

扩展运算符可以用于数组的赋值、合并、解构赋值以及将字符串转为数组。

赋值数组：

let arr1 = [100, 200, 300, [500]];
let arr2 = [...arr1]; // 浅拷贝
console.log(arr2 == arr1); // false
arr1[0] = 400;
console.log(arr2); // 不受影响
arr1[3][0] = 600;
console.log(arr2); // 受影响（只拷贝了一层）

合并数组：

console.log([...[1, 2, 3], ...[4, 5, 6]]); // [1, 2, 3, 4, 5, 6]

解构赋值：

let [a, ...list] = [1, ...["a", "b"]];
console.log(a); // 1
console.log(list); // ["a", "b"]

将字符串转为数组：

console.log([..."str"]); // ["s", "t", "r"]

二、Array.from()

Array.from()方法用于将类数组对象或可迭代对象转换为真正的数组。

let arrLike = {
 "0": "内容",
 "1": "内容2",
 "2": "内容3",
 length: 3
};
console.log(Array.from(arrLike)); // ["内容", "内容2", "内容3"]

此外，Array.from()还可以接受一个回调函数，用于对数组中的每个元素进行处理。

let arr = Array.from({ length: 2 }, () => "jack");
console.log(arr); // ["jack", "jack"]

三、Array.of()

Array.of()方法用于将一组值转换为数组，与Array构造函数的行为不同，Array.of()不会把一个参数作为数组的长度。

垃圾回收

Tue, 01 Oct 2024 00:00:00 +0800

写在前面

我们知道垃圾回收机制是引擎来做的，JS引擎有很多种（各个浏览器都不同），其垃圾回收机制在一些细节及优化上略有不同，本文我们以一些通用的回收算法作为切入，再由 V8 引擎发展至今对该机制的优化为例（为什么以 V8 为例？因为它市场占有率大 😄 ），一步一步深入来助我们了解垃圾回收机制，因为只有真正了解垃圾回收机制，后面才能理解内存泄漏的问题以及手动预防和优化

JavaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，你了解多少呢？想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收，那在正式开始之前，给大家列几个小问题，大家可以先想一下答案，带着问题及答案再去看文章，最后读完此文如果你的答案可以优化，即有收获

什么是垃圾回收机制？
垃圾是怎样产生的？
为什么要进行垃圾回收？
垃圾回收是怎样进行的？
V8 引擎对垃圾回收进行了哪些优化？

当然，我们可不仅仅是为了面试，其目的是一次性彻底搞懂 GC！

GC是什么

GC 即 Garbage Collection ，程序工作过程中会产生很多 垃圾，这些垃圾是程序不用的内存或者是之前用过了，以后不会再用的内存空间，而 GC 就是负责回收垃圾的，因为他工作在引擎内部，所以对于我们前端来说，GC 过程是相对比较无感的，这一套引擎执行而对我们又相对无感的操作也就是常说的 垃圾回收机制 了

当然也不是所有语言都有 GC，一般的高级语言里面会自带 GC，比如 Java、Python、JavaScript 等，也有无 GC 的语言，比如 C、C++ 等，那这种就需要我们程序员手动管理内存了，相对比较麻烦

垃圾产生&为何回收

我们知道写代码时创建一个基本类型、对象、函数……都是需要占用内存的，但是我们并不关注这些，因为这是引擎为我们分配的，我们不需要显式手动的去分配内存

但是，你有没有想过，当我们不再需要某个东西时会发生什么？JavaScript 引擎又是如何发现并清理它的呢？

我们举个简单的例子

let test = {
 name: "isboyjc"
};
test = [1,2,3,4,5]

如上所示，我们假设它是一个完整的程序代码

我们知道 JavaScript 的引用数据类型是保存在堆内存中的，然后在栈内存中保存一个对堆内存中实际对象的引用，所以，JavaScript 中对引用数据类型的操作都是操作对象的引用而不是实际的对象。可以简单理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的

那上面代码首先我们声明了一个变量 test，它引用了对象 {name: 'isboyjc'}，接着我们把这个变量重新赋值了一个数组对象，也就变成了该变量引用了一个数组，那么之前的对象引用关系就没有了，如下图

没有了引用关系，也就是无用的对象，这个时候假如任由它搁置，一个两个还好，多了的话内存也会受不了，所以就需要被清理（回收）

用官方一点的话说，程序的运行需要内存，只要程序提出要求，操作系统或者运行时就必须提供内存，那么对于持续运行的服务进程，必须要及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则就会导致进程崩溃

垃圾回收策略

在 JavaScript 内存管理中有一个概念叫做 可达性，就是那些以某种方式可访问或者说可用的值，它们被保证存储在内存中，反之不可访问则需回收

至于如何回收，其实就是怎样发现这些不可达的对象（垃圾）它并给予清理的问题， JavaScript 垃圾回收机制的原理说白了也就是定期找出那些不再用到的内存（变量），然后释放其内存

尾部优化

Wed, 02 Oct 2024 00:00:00 +0800

ES6 引入了尾调用优化（Tail Call Optimization，TCO）的规范，但它的实现依赖于 JavaScript 引擎的支持（比如 V8 并未开启 TCO），所以这是一个理论上重要、实践中需要谨慎对待的考点。

一、什么是尾调用（Tail Call）？

尾调用是指：

函数的最后一步是调用另一个函数，并直接返回这个函数的执行结果。

例如：

function foo() {
 return bar(); // bar 是 foo 的尾调用
}

尾调用意味着：

当前函数的调用栈帧不需要再做任何事。
调用栈可以复用，不需要为当前函数保留栈帧，从而节省内存。

二、什么是尾调用优化（TCO）？

尾调用优化的目标是：

当一个函数的最后一步是调用另一个函数，JS 引擎可以不再保留当前函数的调用记录，直接跳转执行被调用函数，复用当前栈帧。

也就是说：

不会形成函数调用嵌套的“栈帧链”；
可以避免函数递归导致的栈溢出（stack overflow）。

三、尾调用成立的条件

必须同时满足以下三个条件：

条件	说明
1. 在严格模式下	TCO 只在 strict mode 下才可能被引擎开启
2. 是函数的最后一步调用	return 后没有任何操作
3. 返回调用结果	return bar(x) 形式，不能是 `bar(x); return y`

✅ 尾调用示例：

'use strict';
function f(x) {
 return g(x); // 最后一步是返回 g(x)，符合尾调用优化条件
}

❌ 非尾调用：

function f(x) {
 const y = g(x);
 return y; // 不是直接返回函数调用
}

四、尾调用优化应用场景：尾递归

递归调用时，若能做到尾调用，就能避免栈溢出。

DOM操作

Tue, 01 Oct 2024 00:00:00 +0800

1、DOM基本概念

1.1、DOM、DOM节点与DOM树

DOM：(Document Object Model, 文档对象模型)是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的API。

本文面向HTML，不讨论XML等文档，下文中“文档===HTML”。

DOM节点：简称节点（Node），是DOM模型的组成单元。HTML的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签。
DOM树：DOM树是DOM结构的表示形式，DOM把文档的每个节点根据父子关系连接，形成DOM树。

1.2、节点、节点类型和节点类

节点：前面提过，节点是DOM树的组成单元。在JS看来，一个节点就是JS对象。下面用node表示任意的节点。
节点类型：并非所有的节点都是一样的，DOM规定文档中有12种节点类型，分别用常量1 ~ 12（有与之对应的常量名称Node.XXX_NODE）表示，可以通过node.nodeType属性获取节点的类型常量。现在，有些类型的节点已经弃用了，常见到的只有几种类型的节点，包括：
元素节点: 类型常量为Node.ELEMENT_NODE或1。最常见的一类节点，对应文档中的元素。大部分DOM操作都是在元素节点层次的。
文本节点：类型常量为Node.TEXT_NODE或2。对应文档中的文本，任何文档内容都有对应的文本节点，即使空格和换行符。

空格和换行不会对页面内容产生影响，但它们确实以文本节点的形式存在于DOM树中。

Document节点：类型常量为Node.DOCUMENT_NODE或9。它不对应文档的内容，而是作为文档的入口节点，每个文档都有且仅有一个入口，因为这种独特性，赋予一个特殊的变量名称document。
注释节点：类型常量为Node.COMMENT_NODE或8。它对应文档中的注释标签，文档的注释内容也是可读取和修改的。
节点类：DOM内置许多节点类，类之间存在继承关系，形成一套节点类框架。每个节点对象都属于节点类，拥有该类和其父类的方法与属性，这使得操作节点十分简单。节点类框架的一部分大概如图：这些节点上有丰富的属性和方法，是继承的结果，可以看到，一个HTML标签元素至少有四层的继承关系。以<a>标签为例，它属于HTMLAnchorElement类，获得了a.target，a.download等属性，接着继承了HTMLElement类上的title, hidden等属性和click()等方法，又从Element类继承了tagName, className等属性和getAttribute(), setAttribute()等方法，再从Node类继承了nodeType(前面说过的节点类型), appenChild(), removeChild()等方法，最后从EventTarget类中继承了事件相关的属性和方法。

不要混淆节点类型和节点类这两个概念。前者是一个生活中的类别，后者是编程意义上的类。节点对象的nodeType属性表示了它的类型，而节点类是该节点的从属的类。因为Dode是一个抽象类，所以，如果知道了某个节点从属的类，我们就知道它的节点类型。

区分节点与元素节点。我们经常关心元素节点（简称元素），因为这是一类最常使用的节点，但是并非所有节点都是元素。

1.3、探索DOM结构

前面的说法太抽象了，让我们用实际的例子看看文档、DOM树与节点的关系。

Live DOM Viewer是一个可以根据HTML文档实时查看DOM树的网站。你把下面的例子复制过去，或者自己去探索。

一个简单的HTML文档：

<!DOCTYPE HTML>
<html>
<body>
 A simple text.
 <ol title="this is a title">
 <li>czpcalm</li>
 <!-- comment -->
 </ol>
</body>
</html>

它对应的DOM图（颜色区分了节点类型）：

留意这个图，你要注意几点：

总共有4种类型的节点，分别是标签节点（红色）,文本节点（灰色），注释节点(黄色)和DOCTYPE节点（紫色）。
文档没有<head>标签却出现了HEAD节点。这是因为HTML必然存在<html>，<head>，<body>标签，不存在时会自动补上。顺便一提，当出现<table>标签时，也一定会有<tbody>标签。
文档中的文本都会形成文本节点的内容，包括空格␣和换行↵。第一,单独的空格和换行都会形成对应的文本节点；第二，有内容的文本节点的值包含前导和后继的空白。

不是说HTML中的空白字符都被忽略吗？怎么这里又说全都是有效的字符？

在从文档解析生成DOM树的过程中，HTML中的任何字符都是有效的；不过，在接下去的页面渲染的过程中，空白内容被忽略。所以从文档到页面的整过过程中，空白确实被忽略了。

理解DOM树中的父子关系对应文档中的包含（嵌套）关系。一个极佳的类比是文件树，把元素看做文件夹，文本看做文件，文件夹中可以存放文件和新的文件夹，然后一层层深入下去，DOM树也是如此。

几个原则可以帮我们快速理解这个DOM树的构建：

事件冒泡、事件捕获、事件委托

Tue, 01 Oct 2024 00:00:00 +0800

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

Dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

addEventListener的第三个参数
在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而addEventListener还可以传入第三个参数：

element.addEventListener(event, function, useCapture);

第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。如果不写第三个参数则默认在事件冒泡阶段调用事件处理函数。

下面先介绍事件冒泡：

1. 事件冒泡

事件冒泡（dubbed bubbling）：当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到 window （注意这里传递的仅仅是事件，例如click、focus等等这些事件，并不传递所绑定的事件函数。）

事件源 =>根节点（由内到外）进行事件传播。

举例说明：

给三个盒子依次绑定点击事件，当点击盒子的时候，会依次触发父级元素的点击事件。

click small box

click center box

click big box

如果父元素没有绑定点击事件则只会触发点击盒子的事件。

click small box

如果子元素（small）的点击事件去掉，当我们点击small的时候会把当前操作的点击事件传递给父元素（因为父元素绑定了点击函数）

click small box

有些时候我们不希望产生事件冒泡，所以可以 在子事件中加入e.stopPropagation() 取消冒泡

click small box

2. 事件捕获

事件捕获（event capturing）：当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。

事件捕获与事件冒泡是比较类似的，最大的不同在于事件传播的方向。

还是举上面的例子：

click small box

3. 事件委托

事件委托也称为事件代理。就是利用事件冒泡，把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托就无法实现。

原理实现：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

应用场景：1000个button需要注册点击事件

如果循环给每个按钮添加点击事件，那么会增加内存损耗，影响性能

此时可以给button的父元素添加点击事件

这时相当于每个按钮都绑定了点击事件

优点：

替代循环绑定事件的操作，减少内存消耗，提高性能。比如：

在table上代理所有td的click事件。
在ul上代理所有li的click事件。

简化了dom节点更新时，相应事件的更新。比如：

不用在新添加的li上绑定click事件。
当删除某个li时，不用移解绑上面的click事件。

缺点：

call、apply和bind

Tue, 01 Oct 2024 00:00:00 +0800

`apply` 和 `call`简介

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

比如 A 对象有一个方法，而 B 对象因为某种原因，也需要用到同样的方法，那么这时候不用单独为 B 对象扩展一个方法，可以直接借用 A 对象的方法。这样既完成了需求，又减少了内存的占用。

直接来看个例子：

function fruits() {} fruits.prototype = { color: "red", say: function() { console.log("My color is " + this.color); }} var apple = new fruits();apple.say(); //My color is red

但是如果我们有一个对象 banana= {color : "yellow"} ,我们不想对它重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

banana = { color: "yellow"}apple.say.call(banana); //My color is yellowapple.say.apply(banana); //My color is yellow

apply、call 的区别

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。例如，有一个函数定义如下：

深拷贝/浅拷贝

Thu, 07 Nov 2024 00:00:00 +0800

浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。

前言

说到深浅拷贝，必须先提到的是JavaScript的数据类型，大家可以看前面的知识点，这里不多说了。

初学前端的同学，需要知道的一点就是：JavaScript的数据类型分为基本数据类型和引用数据类型。

对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。

浅拷贝

浅拷贝的意思就是只复制引用，而未复制真正的值。

const originArray = [1,2,3,4,5];
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};

const cloneArray = originArray;
const cloneObj = originObj;

console.log(cloneArray); // [1,2,3,4,5]
console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}}

cloneArray.push(6);
cloneObj.a = {aa:'aa'};

console.log(cloneArray); // [1,2,3,4,5,6]
console.log(originArray); // [1,2,3,4,5,6]

console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
console.log(originArray); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}

上面的代码是最简单的利用 = 赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着 cloneArray 和 cloneObj 改变，originArray 和 originObj 也随着发生了变化。

深拷贝

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。

只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。

目前实现深拷贝的方法不多，主要是两种：

利用 JSON 对象中的 parse 和 stringify
利用递归来实现每一层都重新创建对象并赋值

JSON.stringify/parse的方法

先看看这两个方法吧：

The JSON.stringify() method converts a JavaScript value to a JSON string.

JSON.stringify 是将一个 JavaScript 值转成一个 JSON 字符串。

字符串常见方法

Fri, 08 Nov 2024 00:00:00 +0800

1. 获取字符串长度

JavaScript中的字符串有一个length属性，该属性可以用来获取字符串的长度：

const str = 'hello';
str.length // 输出结果：5

2. 获取字符串指定位置的值

charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值：

charAt() 方法获取到的是指定位置的字符；
charCodeAt()方法获取的是指定位置字符的Unicode值。

（1）charAt()

charAt() 方法可以返回指定位置的字符。其语法如下：

string.charAt(index)

index表示字符在字符串中的索引值：

const str = 'hello';
str.charAt(1) // 输出结果：e

我们知道，字符串也可以通过索引值来直接获取对应字符，那它和charAt()有什么区别呢？来看例子：

const str = 'hello';
str.charAt(1) // 输出结果：e
str[1] // 输出结果：e
str.charAt(5) // 输出结果：''
str[5] // 输出结果：undefined

可以看到，当index的取值不在str的长度范围内时，str[index]会返回undefined，而charAt(index)会返回空字符串；除此之外，str[index]不兼容ie6-ie8，charAt(index)可以兼容。

（2）charCodeAt()

charCodeAt()：该方法会返回指定索引位置字符的 Unicode 值，返回值是 0 - 65535 之间的整数，表示给定索引处的 UTF-16 代码单元，如果指定位置没有字符，将返回 NaN：

let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98

通过这个方法，可以获取字符串中指定Unicode编码值范围的字符。比如，数字0～9的Unicode编码范围是: 48～57，可以通过这个方法来筛选字符串中的数字，当然如果你更熟悉正则表达式，会更方便。

3. 检索字符串是否包含特定序列

这5个方法都可以用来检索一个字符串中是否包含特定的序列。其中前两个方法得到的指定元素的索引值，并且只会返回第一次匹配到的值的位置。后三个方法返回的是布尔值，表示是否匹配到指定的值。

注意：这5个方法都对大小写敏感！

（1）indexOf()

indexOf()：查找某个字符，有则返回第一次匹配到的位置，否则返回-1，其语法如下：

string.indexOf(searchvalue,fromindex)

该方法有两个参数：

searchvalue：必需，规定需检索的字符串值；
fromindex：可选的整数参数，规定在字符串中开始检索的位置。它的合法取值是 0 到 string.length - 1。如省略该，则从字符串的首字符开始检索。

let str = "abcdefgabc";
console.log(str.indexOf("a")); // 输出结果：0
console.log(str.indexOf("z")); // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9

（2）lastIndexOf()

lastIndexOf()：查找某个字符，有则返回最后一次匹配到的位置，否则返回-1

数组常用方法

Fri, 08 Nov 2024 00:00:00 +0800

数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。

一、创建数组

1.使用数组字面量表示法

var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项数据为20的数组
var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组

2.使用 Array 构造函数

无参构造

var arr1 = new Array(); //创建一个空数组

带参构造

如果只传一个数值参数，则表示创建一个初始长度为指定数值的空数组

var arr2 = new Array(20); // 创建一个包含20项的数组

如果传入一个非数值的参数或者参数个数大于 1，则表示创建一个包含指定元素的数组

var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
var array4 = new Array('23'); // ["23"]

3.Array.of 方法创建数组(es6 新增)

ES6 为数组新增创建方法的目的之一，是帮助开发者在使用 Array 构造器时避开 js 语言的一个怪异点。

Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

let arr = Array.of(1, 2);
console.log(arr.length);//2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

let arr2 = Array.of('2');
console.log(arr2.length);//1
console.log(arr2[0]);//'2'

4.Array.from 方法创建数组(es6 新增)

在 js 中将非数组对象转换为真正的数组是非常麻烦的。在 ES6 中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组。

function arga(...args) { //...args剩余参数数组,由传递给函数的实际参数提供
 let arg = Array.from(args);
 console.log(arg);
}

arga('arr1', 26, 'from'); // ['arr1',26,'from']

映射转换

如果你想实行进一步的数组转换，你可以向 Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式，并将其存储在目标数组的对应位置上。

正则表达式

Tue, 01 Oct 2024 00:00:00 +0800

前言

正则表达式使用单个[字符串]来描述、匹配一系列匹配某个[句法规则]的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

创建

1.构造函数创建

new RegExp(‘正则表达式’,‘修饰符’)

var reg = new RegExp('hello','igm');

2.直接直面量创建

/正则表达式/修饰符

var reg = /hello/igm;

字符分类

1.普通字符

字母、数字、下划线、汉字、没有特殊含义的符号（,;!@等）

实际上不是特殊字符的字符都是普通字符

2.特殊字符

\：将特殊字符转义成普通字符

3.模式修饰符

i：ignoreCase，匹配时忽视大小写

m：multiline，多行匹配

g：global，全局匹配

字面量创建正则时，模式修饰符写在一对反斜线后

实例方法

1.exec()

用来匹配字符串中符合正则表达式的字符串

如果匹配到，返回值是一个result数组:

[匹配的内容，index: 在str中匹配的起始位置，input: 参数字符串，groups: undefined]

否则返回null

var str = 'Hello world javascript hello';
var reg = new RegExp('hello','igm');
var res = reg.exec(str);
console.log(res);

输出结果为：
[
 'Hello',
 index: 0,
 input: 'hello world javascript hello',
 groups: undefined
]

2.test()

用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串

如果有返回true，否则返回false

var reg = /hello/;
var str = 'hello world';
console.log(reg.test(str)); //true

3.toSting() toLocaleString()

把正则表达式的内容转化成字面量形式字符串/有本地特色的字符串

var reg = /hello/;
var str = 'hello world';
console.log(reg.toString(),typeof reg.toString()); // /hello/ string
console.log(reg.toLocaleString(),typeof reg.toLocaleString()); // /hello/ string

4.valueOf()

返回正则表达式本身

跨域

Tue, 01 Oct 2024 00:00:00 +0800

一、什么是跨域？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

二、常见的跨域场景

URL	说明	是否允许通信
www.domain.com/a.js
www.domain.com/b.js
www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
www.domain.com:8000/a.js
www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js
https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.js
http://x.domain.com/b.js
http://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.js
http://www.domain2.com/b.js	不同域名	不允许

三、9种跨域解决方案

1、JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
1）原生JS实现：

 <script>
 var script = document.createElement('script');
 script.type = 'text/javascript';

 // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
 script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
 document.head.appendChild(script);

 // 回调执行函数
 function handleCallback(res) {
 alert(JSON.stringify(res));
 }
 </script>

服务端返回如下（返回时即执行全局函数）：

前端存储

Tue, 01 Oct 2024 00:00:00 +0800

什么是前端存储

开门见山。前端存储就是通过前端技术来存储一段信息，然后在同源下的不同页面中都可以获取到已存储信息的一种策略。

前端存储的作用

方便网页的加载，避免了在发送请求收到响应前页面的空白期
可以在非强制性要求实时更新时减少向服务端的请求，加快渲染速度
在网络不佳或无网时仍有离线数据可以查看

有哪些前端存储方案

如图，一共有5种前端存储方案。大致可以分为3类：

Cookie
WebStorage：LocalStorage、SessionStorage
数据库存储：IndexedDB、WebSQL

先做一个简单对比：

下面我们详细介绍。

Cookie 的工作流程：

Cookie 的构成：

域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值的键值对。

Cookie 的生命周期：

如果设定了 Cookie 的过期时间，那么 Cookie 会在到期时自动失效
如果没有设定过期时间，那么 Cookie 就是 session 级别的，即浏览器关闭时 Cookie 自动消失

Cookie 的优缺点：

优点：

可以控制过期时间，不会永久有效，有一定的安全保障
可进行扩展，可跨域共享
通过加密与安全传输技术，可以减少 Cookie 被破解的可能性
有较高的兼容性

缺点：

存储大小最多4KB
存储数量根据浏览器或浏览器版本的不同而不同，并且每个域最多20条
请求头上的数据容易被拦截攻击
存储的数据只能是字符串类型

操作 Cookie：

// 设置 Cookie
// Cookie 值必须是字符串类型，并且不支持分号、逗号以及空格，
// 所以有时需要先使用 encodeURIComponent() 进行编码，或者使用 JSON.stringify() 进行序列化
document.cookie = '键1=值1;键2=值2;键n=值n';

// 读取 Cookie
// 有时需要使用 decodeURIComponent() 或者 JSON.parse()
document.cookie

// 修改 Cookie
// 如果键不存在，就新增；否则就修改
document.cookie = '已经存储过的键=新值';

// 删除 Cookie
document.cookie = '要删除的键=任意值;max-age=0';

WebStorage

WebStorage 是 HTML5 新加的，WebStorage（Web 存储）分为 LocalStorage（本地存储）和 SessionStorage（会话存储）。

WebWorker

Tue, 01 Oct 2024 00:00:00 +0800

前言

先来聊聊单线程的Javascript

众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。但随着前端技术的发展，js能力远不止如此，当我们遇到需要大量计算的场景时（比如图像处理、视频解码等），js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验。为了解决单线程带来的这一弊端，Web Worker 应运而生。

1. Web Worker

1.1 `Web Worker` 是什么

Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力。

因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自然而然也提高了。

1.2 `Web Worker` 能干些什么

虽然 Worker 线程是在浏览器环境中被唤起，但是它与当前页面窗口运行在不同的全局上下文中，我们常用的顶层对象 window，以及 parent 对象在 Worker 线程上下文中是不可用的。另外，在 Worker 线程上下文中，操作 DOM 的行为也是不可行的，document对象也不存在。但是，location和navigator对象可以以可读方式访问。除此之外，绝大多数 Window 对象上的方法和属性，都被共享到 Worker 上下文全局对象 WorkerGlobalScope 中。同样，Worker 线程上下文也存在一个顶级对象 self。

详细信息请参考：Functions and classes available to Web Workers

2. Web Worker 使用

2.1 创建 `worker`

创建 worker 只需要通过 new 调用 Worker() 构造函数即可，它接收两个参数

Service Worker

Fri, 08 Nov 2024 00:00:00 +0800

引言

我们经常可以听到 Worker 这个名词，比如本文要介绍的 ServiceWorker 后面就带着一个 Worker 的单词，那么 Worker 实际上指的是什么呢？

在介绍 Worker 的定义之前，先来回忆一下浏览器的渲染原理。

在一个 tab 打开的时候，浏览器会给这个 tab 创建一个新的渲染进程（renderer process），如下图：

图1：Chrome 浏览器的多进程架构

图片来源：developer.chrome.com/blog/inside…

在每一个渲染进程中，都会有一个主线程（Main Thread），负责 JavaScript 的执行以及浏览器的渲染（JavaScript 的执行与 UI 渲染是一个互相阻塞的流程）。

图2：浏览器一帧的剖析

图片来源：aerotwist.com/blog/the-an…

如果 JavaScript 执行时间过久（比如超过 33.33 ms），那么一帧内留给 UI 渲染的时间不多，如果这时候网页有正在执行的动画，那么用户就会感受到卡顿。

10 FPS：能够达成基本的视觉残留（参考：定格动画至少需要 12 帧每秒以上）

30 FPS以下：让人感觉到明显的卡顿和不适感

30-50 FPS：因人而异

50-60 FPS：流畅

一个 Worker，指的是一个可以在后台独立执行 JavaScript 脚本。它存在于一个单独的 worker 线程，即使执行一些长任务也不会阻塞主线程响应用户操作（如鼠标点击、动画等）。

另外 Worker 也指使用 new Worker() 构造函数创建的一个对象，可以用在主线程与 worker 线程的通信

图3：worker 线程独立于主线程之外

图片来源：developer.chrome.com/blog/inside…

Worker 与主线程之间可以通过 postMessage 进行通信：

WebSocket

Fri, 08 Nov 2024 00:00:00 +0800

一、什么是WebSocket

WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。（维基百科）

WebSocket本质上一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。

WebSocket 协议在2008年诞生，2011年成为国际标准。现在最新版本浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket 的其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

为什么需要 WebSocket？

我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

因为 HTTP 协议有一个缺陷：通信只能由客户端发起，不具备服务器推送能力。

举例来说，我们想了解查询今天的实时数据，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

在 WebSocket 协议出现以前，创建一个和服务端进双通道通信的 web 应用，需要依赖HTTP协议，进行不停的轮询，这会导致一些问题：

服务端被迫维持来自每个客户端的大量不同的连接
大量的轮询请求会造成高开销，比如会带上多余的header，造成了无用的数据传输。

http协议本身是没有持久通信能力的，但是我们在实际的应用中，是很需要这种能力的，所以，为了解决这些问题，WebSocket协议由此而生，于2011年被IETF定为标准RFC6455，并被RFC7936所补充规范。

并且在HTML5标准中增加了有关WebSocket协议的相关api，所以只要实现了HTML5标准的客户端，就可以与支持WebSocket协议的服务器进行全双工的持久通信了。

WebSocket 与 HTTP 的区别

WebSocket 与 HTTP的关系图：

相同点： 都是一样基于TCP的，都是可靠性传输协议。都是应用层协议。

联系： WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

下面一张图说明了 HTTP 与 WebSocket 的主要区别：

设计模式

Tue, 01 Oct 2024 00:00:00 +0800

说到设计模式，大家想到的就是六大原则，23种模式。这么多模式，并非都要记住，但作为前端开发，对于前端出现率高的设计模式还是有必要了解并掌握的，浅浅掌握9种模式后，整理了这份文章。

那么，我们先了解六大原则

六大原则：

依赖倒置原则(Dependence Inversion Principle)：高层(业务层)不应该直接调用底层(基础层)模块
开闭原则(Open Close Principle)：单模块对拓展开放、对修改关闭
单一原则(Single Responsibility Principle)：单模块负责的职责必须是单一的
迪米特法则(Law of Demeter)：对外暴露接口应该简单
接口隔离原则(Interface Segregation Principle)：单个接口(类)都应该按业务隔离开
里氏替换原则(Liskov Substitution Principle)：子类可以替换父类

六大原则也可以用六个字替换：高内聚低耦合。

高层不直接依赖底层：依赖倒置原则

内部修改关闭，外部开放扩展：开闭原则

聚合单一功能：单一原则

低知识接口，对外接口简单：迪米特法则

耦合多个接口，不如隔离拆分：接口隔离原则

合并复用，子类可以替换父类：里氏替换原则

我们采用模式编写时，要尽可能遵守这六大原则

23 种设计模式分为“创建型”、“行为型”和“结构型”

前端九种设计模式

一、创建型

创建型从功能上来说就是创建元素，目标是规范元素创建步骤

1.构造器模式：抽象了对象实例的变与不变(变的是属性值，不变的是属性名)

// 需求：给公司员工创建线上基本信息
// 单个员工创建，可以直接使用创建
const obj = {
 name:'张三',
 age:'20',
 department:'人力资源部门'
}
// 可员工的数量过于多的时候，一个个创建不可行，那么就可以使用构造器模式
class Person {
 constructor(obj){
 this.name = obj.name
 this.age = obj.age
 this.department = obj.department
 }
}
const person1 = new Person(obj)

2. 工厂模式：为创建一组相关或相互依赖的对象提供一个接口，且无须指定它们的具体类

即隐藏创建过程、暴露共同接口。

// 需求：公司员工创建完信息后需要为每一个员工创建一个信息名片
class setPerson {
 constructor(obj) {
 this.pesonObj = obj
 }
 creatCard() {
 //创建信息名片
 }
 otherFynction(){

 }
}
class Person {
 constructor(obj) {
 return new setPerson(obj)
 }
}
const person = new Person()
const card = person.creatCard({
 name:'张三',
 age:'20',
 department:'人力资源部门'
})

3. 单例模式：全局只有一个实例，避免重复创建对象，优化性能

// 需求：判断一款应用的开闭状态，根据不同状态给出不同提示
class applicationStation {
 constructor() {
 this.state = 'off'
 }
 play() {
 if (this.state === 'on') {
 console.log('已打开')
 return
 }
 this.state = 'on'
 }
 shutdown() {
 if (this.state === 'off') {
 console.log('已关闭')
 return
 }
 this.state = 'off'
 }
}
window.applicationStation = new applicationStation()
// applicationStation.instance = undefined
// applicationStation.getInstance = function() {
// return function() {
// if (!applicationStation.instance) { // 如果全局没有实例再创建
// applicationStation.instance = new applicationStation()
// }
// return applicationStation.instance
// }()
// }
// application1和application2拥有同一个applicationStation对象
const application1 = window.applicationStation
const application2 = window.applicationStation

二、结构型

结构型从功能上来说就是给元素添加行为的，目标是优化结构的实现方式

JavaScript 面试题

Mon, 01 Jan 0001 00:00:00 +0000

共 407 道 JavaScript 面试题。答案默认折叠，便于先自行作答。

1. `requestAnimationFrame` 与 `requestIdleCallback` 在渲染优化中的执行时机差异？谁优先触发？

难度：3 · 类型：QA

题目要点

requestAnimationFrame 在浏览器即将进行下一帧渲染之前执行，用于动画与视觉更新，优先级高于渲染阶段后的任务。requestIdleCallback 只会在当前帧所有渲染任务完成且仍有剩余时间时触发，属于低优先级空闲调度机制。因此在同一帧中，rAF 必然先于 rIC 执行。rAF 用于保证帧同步，rIC 用于利用空闲时间执行非关键任务。

参考答案

这个问题本质是理解 浏览器一帧的调度模型。不搞清楚一帧里发生了什么，很容易回答成“谁快谁慢”这种表层结论。

核心结论先给出：

在有下一帧渲染需求的情况下，requestAnimationFrame 一定优先于 requestIdleCallback 执行。 requestIdleCallback 只会在当前帧还有“空闲时间”时才会触发。

下面从浏览器帧模型拆解。

一、浏览器一帧的基本流程

以 60fps 为例，一帧约 16.6ms。

一次完整渲染循环大致是：

执行宏任务（例如 setTimeout）
清空微任务队列
触发 requestAnimationFrame 回调
进行样式计算（Style）
布局计算（Layout）
绘制（Paint）
合成（Composite）
如果还有时间 → 执行 requestIdleCallback

需要明确一点：

rAF 是“下一帧渲染前”的回调
rIC 是“当前帧剩余时间”的回调

二、requestAnimationFrame 的执行时机

requestAnimationFrame 的设计目标是：

在浏览器即将进行下一次重绘之前执行回调。

特点：

每帧最多执行一次
与刷新率同步
在样式计算之前触发
如果标签页不可见，会暂停

执行时机可以理解为：

JavaScript on Last Stand

Let/Const

Var

var 的作用域

var 变量可以重新声明和修改

var 的变量提升

数据类型

前言

弱类型语言

null 还是 undefined

定义

类型判断

typeof原理

手写一个instanceof

模版字符串

模板字符串

基本用法

字符串插值

数据类型转换

前言

数据类型

类型转换

1.1 原始数据类型转Number

1.2 原始数据类型转String

1.3 原始数据类型转Boolean

默认参数

内存空间

一、栈数据结构

二、堆数据结构

三、队列

四、变量对象与基础数据类型

五、引用数据类型与堆内存

箭头函数

一、箭头函数的特点

1. 相比普通函数，箭头函数有更加简洁的语法。

2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。

3. 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误。

执行上下文

常见考点

解构赋值

解构赋值概念

数组解构

基本使用

设置默认值

剩余值处理

进阶用法

变量对象

变量对象（Variable Object）

展开运算符

让函数的 Apply 调用方式成为过去

合并数组

拷贝数组

将参数或 NodeList 转成数组

export/import

export，import 是什么

1 导出单个变量

2 导出多个变量

常见考点

1. export 的基本使用

作用域链与闭包

一、作用域与作用域链

二、闭包

全方位解读this

二、函数中的this

Promise

为什么要使用 Promise？

什么是 Promise？

Generator

聊聊 for of

你能学到什么

类数组对象的玄机

函数与函数式编程

一、函数声明、函数表达式、匿名函数与自执行函数

Async/Await

async/await用法

有什么用？

是怎么用？

函数柯里化

Class

Class 的基本语法

1. `export` 的基本使用

聊聊 `for of`

`apply` 和 `call`简介