新的ECMA代码执行描述
在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：
- 执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；
- 执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；
- 变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；
- 全局对象：Global Object，全局执行上下文关联的VO对象；
- 激活对象：Activation Object，函数执行上下文关联的VO对象；
- 作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；
在新的ECMA代码执行描述中（ES5以及之上），对于代码的执行流程描述改成了另外的一些词汇：
- 基本思路是相同的，只是对于一些词汇的描述发生了改变；
- 执行上下文栈和执行上下文也是相同的
词法环境（Lexical Environments）
词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；
- 一个词法环境是由环境记录（Environment Record）和一个外部词法环境（outer Lexical Environment）组成；
- 一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；
也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；
- 那么执行上下文会关联哪些词法环境呢
LexicalEnvironment和VariableEnvironment
VariableEnvironment用于处理var和function声明的标识符：
环境记录（Environment Record）
在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。
- 声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。
- 对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来。
新ECMA描述内存图
let/const基本使用
在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const
- let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
- 但是let、const确确实实给JavaScript带来一些不一样的东西；
let关键字：
- 从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；
const关键字：
- const关键字是constant的单词的缩写，表示常量、衡量的意思；
- 它表示保存的数据一旦被赋值，就不能被修改；
- 但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；
注意：
- 另外let、const不允许重复声明变量；
let/const作用域提升
let、const和var的另一个重要区别是作用域提升：
- 我们知道var声明的变量是会进行作用域提升的；
- 但是如果我们使用let声明的变量，在声明之前访问会报错；
那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？
- 事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
- 这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；
// 1.var 声明的变量会进行作用域的提升
console.log(message);
var message = "Hello World";
// 2.let/const声明的变量: 没有作用域提升
// 有提前创建出来,但是不能访问
// console.log(address)
console.log(info);
let address = "广州市";
const info = {};
暂时性死区 (TDZ)
我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的
- 从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）
使用术语 “temporal” 是因为区域取决于执行顺序（时间），而不是编写代码的位置；
// 1.暂时性死区
/*
function foo() {
console.log(bar, baz);
console.log("Hello World");
console.log("你好世界");
let bar = "bar";
let baz = "baz";
}
foo(); */
// 2.暂时性死区和定义的位置没有关系,和代码执行的顺序有关系
/* function foo() {
console.log(message);
}
let message = "Hello World";
foo();
console.log(message); */
// 3.暂时性死区形成之后,在该区域内直观标识符不能访问
let message = "Hello World";
function foo() {
console.log(message);
let message = "哈哈哈";
}
foo();
let/const有没有作用域提升呢？
从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。
- 那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？
事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；
- 作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
- 在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；
所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。
Window对象添加属性
我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：
- 但是let、const是不会给window上添加任何属性的。
那么我们可能会想这个变量是保存在哪里呢？
// 1.var 定义的变量是会默认添加到window上的
/* var message = "hello world";
var address = "广州市";
console.log(window.message);
console.log(window.address); */
/* let message = "你好世界";
const address = "广州市";
console.log(window.message);
console.log(window.address); */
// 3.let/var 分别声明变量
var message = "你好世界";
let address = "广州市";
var的块级作用域
JavaScript只会形成两个作用域：全局作用域和函数作用域。
ES5中放到一个代码中定义的变量，外面是可以访问的：
let/const的块级作用域
在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：
但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：
- 这是因为引擎会对函数的声明进行特殊的处理，允许像var一样在外界直接访问
块级作用域的应用
我来看一个实际的案例：获取多个按钮监听点击
使用let来实现：
// 1.形成的词法环境
/* var message = "Hello World";
var age = 19;
function foo() {}
let address = "广州市";
{
var height = 1.66;
let title = "教师";
let info = "了解真相";
} */
// 2.监听按钮的点击
const btnEls = document.querySelectorAll("button");
/* for (var i = 0; i < btnEls.length; i++) {
var btnEl = btnEls[i];
// btnEl.index = i;
(function(m){
btnEl.onclick = function () {
console.log(`点击了${m}按钮`);
};
}(i))
} */
for (let i = 0; i < btnEls.length; i++) {
var btnEl = btnEls[i];
btnEl.onclick = function () {
console.log(`点击了${i}按钮`);
};
}
var、let、const的选择
那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？
对于var的使用：
- 我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
- 其实是JavaScript在设计之初的一种语言缺陷；
- 当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
- 但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；
对于let、const：
- 对于let和const来说，是目前开发中推荐使用的；
- 我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
- 只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
- 这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；
字符串模板基本使用
在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：
- 首先，我们会使用符号来编写字符串，称之为模板字符串；
- 其次，在模板字符串中，我们可以通过
${expression}来嵌入动态的内容；
标签模板字符串使用
模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
我们一起来看一个普通的JavaScript的函数：
如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：
- 模板字符串被拆分了；
- 第一个元素是数组，是被模块字符串拆分的字符串组合；
- 后面的元素是一个个模块字符串传入的内容
const name = "why";
const age = 15;
// 1.基本用法
const info = `myu name is ${name}, age is ${age}`;
console.log(info);
// 2.标签模板字符串的用法
function foo(...args) {
console.log("参数:", args);
}
foo("why", 13, 1.65);
foo`my name is ${name}, age is ${age}`;
React的styled-components库
函数的默认参数
在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：
- 传入了参数，那么使用传入的参数；
- 没有传入参数，那么使用一个默认值；
而在ES6中，我们允许给函数一个默认值
// 注意默认参数是不会对 null 进行处理的
function foo(arg1 = "我是默认值", arg2 = "我也是默认值") {
// 默认值写法1
// arg1 = arg1 ? arg1 : "我是默认值";
// 默认值写法2
// arg1 = arg1 || "我是默认值";
// 2.严谨的写法
// arg1 = arg1 === undefined || arg1 === null ? "我是默认值" : arg1;
// ES6之后新增语法: ??
// arg1 = arg1 ?? "我是默认值";
// 3.简便的写法: 默认参数
console.log(arg1);
}
foo(123, 321);
foo();
foo(0);
foo("");
foo(false);
foo(null);
foo(undefined);
函数默认值的补充
默认值也可以和解构一起来使用：
另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：
- 但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；
另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。
// 1.有默认参数的形参尽量写在后面
// 2.有默认参数的形参,是不会计算在length'之内(并且后面所有的参数都不会计算在length之内)
// 3.剩余参数也是放在后面(默认参数放在剩余参数之前)
function foo(age, name = "why", ...args) {
console.log(name, age);
}
foo(17, "abc", "cba", "nba");
console.log(foo.length);
// 1.解构
const obj = { name: "why" };
const { name = "what" } = obj;
// 2.函数的默认值是一个对象
/* function foo(obj = {name: "why" ,age:13}) {
console.log(obj.name,obj.age);
} */
/*
function foo({ name, age } = { name: "why", age: 13 }) {
console.log(name, age);
} */
function foo({ name = "why", age = 13 } = {}) {
console.log(name, age);
}
foo();
函数的剩余参数
ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：
- 如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；
那么剩余参数和arguments有什么区别呢？
- 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
- arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
- arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；
注意：剩余参数必须放到最后一个位置，否则会报错。
函数箭头函数的补充
在前面我们已经学习了箭头函数的用法，这里进行一些补充：
- 箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；
- 箭头函数也不绑定this、arguments、super参数；
// 1.function 定义的对象是有两个原型的
function foo() {}
console.log(foo.prototype); // new foo() => f.__proto__ === foo.prototype
console.log(foo.__proto__); // foo.__proto__ === Function.prototype
// 2.箭头函数是没有显式原型的
var bar = () => {};
console.log(bar.__proto__ === Function.prototype);
// 没有显式原型
/* console.log(bar.prototype);
var b = new bar(); */
展开语法
展开语法(Spread syntax)：
- 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
- 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；
展开语法的场景：
- 在函数调用时使用；
- 在数组构造时使用；
- 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；
注意：展开运算符其实是一种浅拷贝；
// 1.基本
const names = ["abc", "cba", "nba", "mba"];
const str = "hello";
const newNames = [...names, "aaa", "bbb"];
console.log(newNames);
function foo(name1, name2, ...args) {
console.log(name1, name2, args);
}
foo(...names);
foo(...str);
// ES9(2018)
const obj = {
name: "why",
age: 16,
};
// foo(...obj); 错误用法 // 在函数调用时,用展开运算符,将对应展开数据,进行迭代
// 可迭代对象: 数组/string/arguments
const info = {
...obj,
height: 1.67,
address: "广州",
};
console.log(info);
引用赋值/浅拷贝/深拷贝
const obj = {
name: "why",
age: 16,
height: 1.74,
friend: {
name: "curry",
},
};
// 1.引用赋值
// const info1 = obj;
// 2.浅拷贝
/*
const info2 = {
...obj,
};
info2.name = "what";
console.log(obj.name);
console.log(info2.name);
// info2.friend.name = "jack";
console.log(obj.friend.name);
console.log(info2.friend.name);
*/
// 3.深拷贝
// 方式一:借助第三方库
// 方式二:自己实现
// 方式三:利用现有js机制JSON,实现深拷贝
const info3 = JSON.parse(JSON.stringify(obj));
console.log(info3.friend.name);
info3.friend.name = "fuck";
console.log(info3.friend.name);
console.log(obj.friend.name);
数值的表示
在ES6中规范了二进制和八进制的写法：
另外在ES2021新增特性：数字过长时，可以使用_作为连接符
// 1.进制
console.log(100);
console.log(0b100); // binary
console.log(0o100); // octonary
console.log(0x100); // hexadecimal
// 2.长数字的表示
const money = 100_0000_0000_0000;
Symbol的基本使用
Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。
那么为什么需要Symbol呢？
- 在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
- 比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
- 比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
- 比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；
Symbol就是为了解决上面的问题，用来生成一个独一无二的值。
- Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；
- 也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；
Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；
我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；
Symbol作为属性名
我们通常会使用Symbol在对象中表示唯一的属性名：
/*
// ES6 之前
var obj = {
name: "why",
};
// 添加新的属性 name
function foo(obj) {
obj.why = function () {};
}
foo(obj);
obj.name = "what"; */
// ES6之后可以使用Symbol生成一个独一无二的值
const s1 = Symbol();
const obj = {
[s1]: "aaa",
};
console.log(obj);
const s2 = Symbol();
obj[s2] = "bbb";
console.log(obj);
function foo(obj) {
const sKey = Symbol();
obj[sKey] = function () {};
delete obj[sKey];
}
相同值的Symbol
前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？
- 我们可以使用Symbol.for方法来做到这一点；
- 并且我们可以通过Symbol.keyFor方法来获取对应的key
const s1 = Symbol(); // aaa
const s2 = Symbol(); // bbb
// 1.加入对象中
const obj = {
name: "what",
age: 18,
[s1]: "aaa",
[s2]: "bbb",
};
const obj1 = {};
obj1[s1] = "aaa";
obj1[s2] = "bbb";
const obj2 = {};
Object.defineProperty(obj2, s1, {
value: "aaa",
});
// 2.获取 Symbol对应的key
console.log(Object.keys(obj));
console.log(Object.getOwnPropertySymbols(obj));
const symbolKeys = Object.getOwnPropertySymbols(obj);
for (const key of symbolKeys) {
console.log(obj[key]);
}
// 3.description
const s3 = Symbol("ccc");
console.log(s3.description);
const s4 = Symbol(s3.description);
console.log(s3 === s4);
// 如果相同的key,通过Symbol.for 可以生成相同的 Symbol 值
const s5 = Symbol.for(s3.description);
const s6 = Symbol.for(s3.description);
console.log(s5 === s6);
// 获取传入的key
console.log(Symbol.keyFor(s5));
Set的基本使用
在ES6之前，我们存储数据的结构主要有两种：数组、对象。
- 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
- 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。
Set的常见方法
Set常见的属性：
- size：返回Set中元素的个数；
Set常用的方法：
- add(value)：添加某个元素，返回Set对象本身；
- delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断set中是否存在某个元素，返回boolean类型；
- clear()：清空set中所有的元素，没有返回值；
- forEach(callback, [, thisArg])：通过forEach遍历set；
另外Set是支持for of的遍历的
// 1.创建Set
const set = new Set();
console.log(set);
// 2.添加元素
set.add(19);
set.add(22);
set.add(24);
set.add(24);
set.add(24);
const info = {};
const obj = {};
set.add(info);
set.add(obj);
set.add(obj);
console.log(set);
// 3.应用场景: 数组的去重
const names = ["abc", "cba", "nba", "cba", "nba"];
const newNamesSet = new Set(names);
const newNames = Array.from(newNamesSet);
/* const newNames = [];
for (const item of names) {
if (!newNames.includes(item)) {
newNames.push(item);
}
} */
console.log(newNames);
// 4.Set的其他属性和方法
// 属性
console.log(set.size);
// 方法
set.add(100);
console.log(set);
set.delete(obj);
console.log(set);
console.log(set.has(info));
// set.clear();
// console.log(set);
set.forEach((item) => console.log(item));
// 5.set支持for...of
for (const item of set) {
console.log(item);
}
WeakSet使用
和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
那么和Set有什么区别呢？
- 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
- 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
WeakSet常见的方法：
- add(value)：添加某个元素，返回WeakSet对象本身；
- delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
WeakSet的应用
注意：WeakSet不能遍历
- 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
- 所以存储到WeakSet中的对象是没办法获取的；
那么这个东西有什么用呢？
- 事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；
// 1. Weak Reference 和 Strong Reference
let obj1 = { name: "what" };
let obj2 = { name: "why" };
let obj3 = { name: "whose" };
let arr = [obj1, obj2, obj3];
obj1 = null;
obj2 = null;
obj3 = null;
const set = new Set(arr);
arr = null;
// 2.WeakSet
// 2.1 和set的区别:只能存放对象类型
const weakSet = new WeakSet();
weakSet.add(obj1);
weakSet.add(obj2);
weakSet.add(obj3);
// 2.1 和set的区别:对对象的引用是弱引用
// 3.WeakSet的应用
const pWeakSet = new WeakSet();
class Person {
constructor() {
pWeakSet.add(this);
}
running() {
if (!pWeakSet.has(this)) {
console.log("type is error: 调用的方式不对");
return;
}
console.log("running~");
}
}
const p = new Person();
const runFn = p.running;
runFn();
const obj = { run: runFn };
obj.run();
Map的基本使用
另外一个新增的数据结构是Map，用于存储映射关系。
但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
- 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
- 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
那么我们就可以使用Map
Map的常用方法
Map常见的属性：
- size：返回Map中元素的个数；
Map常见的方法：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
- clear()：清空所有的元素；
- forEach(callback, [, thisArg])：通过forEach遍历Map；
Map也可以通过for of进行遍历
WeakMap的使用
和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
那么和Map有什么区别呢？
- 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
- 区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
WeakMap常见的方法有四个：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
const info = { name: "why" };
const info2 = { name: "why" };
// 1.对象的局限性: 不可以使用复杂类型作为key
const obj = {
address: "广州市",
[info]: "呵呵呵呵",
[info2]: "呵呵呵呵",
};
console.log(obj);
// 2.Map映射类型
const map = new Map();
map.set(info, "sss");
map.set(info2, "aaa");
console.log(map);
// 3.Map常见属性和方法
console.log(map.size);
map.set(info, "ccc");
console.log(map);
console.log(map.get(info));
// map.delete(info);
console.log(map);
console.log(map.has(info2));
// map.clear();
console.log(map);
// forEach方法
map.forEach((item) => console.log("map ", item));
// for...of 遍历
for (const item of map) {
const [key, value] = item;
console.log(key, value);
}
WeakMap的应用
注意：WeakMap也是不能遍历的
- 没有forEach方法，也不支持通过for of的方式进行遍历；
那么我们的WeakMap有什么作用呢？
let obj1 = { name: "why" };
let obj2 = { name: "what" };
const weakMap = new WeakMap();
// 1.weakMap的基本使用
weakMap.set(obj1, "aaa");
weakMap.set(obj2, "bbb");
obj1 = null;
obj2 = null;
Q.E.D.