笔记2一. this的绑定规则 1.1. 绑定规则默认绑定隐式绑定显式绑定 new绑定 1.2. 显式绑定 app

一. this的绑定规则

1.1. 绑定规则

默认绑定
隐式绑定
显式绑定
new绑定

1.2. 显式绑定

apply/call
bind

1.3. 内置函数的规则

经验

1.4. 规则的优先级

new
bind
apply/call
隐式绑定
默认绑定

1.5. 规则之外的情况

undefined/null
间接函数引用(了解)

二. 箭头函数的使用

2.1. 箭头函数的写法

基本写法
优化写法
- 只有一个参数时, 可以省略()
- 只有一行代码时, 可以省略{}
- 只要一行代码时, 表达式的返回值会作为箭头函数默认返回值, 所以可以省略return
- 如果箭头函数默认返回的是对象, 在省略{}的时候, 对象必须使用()包裹 () => ({name: "why"})

2.2. 箭头函数中的this

箭头函数是没有绑定this
this的查找规则:
- 去上层作用域中查找this
- 直到找到全局this

2.3. 箭头函数this应用

模拟网络请求
不好理解: 回调(好好理解一下)
- 函数传来传去

day 2

一. this的面试题

四种绑定规则
箭头函数不绑定this

二. debug华为商城

三. 浏览器的运行原理

3.1. 输入URL网页的请求显示的过程

3.2. 网页的渲染过程

HTML解析 -> DOM Tree
CSS解析 -> CSSOM Tree
生成 Render Tree
进行layout布局
进行paint绘制

3.3. 回流和重绘

如果需要重新布局
- 修改DOM
- 修改尺寸/位置
- ....
重绘
- 颜色/样式
回流一定会引起重绘, 尽量避免回流
- 一次性修改样式
- 减少DOM的操作
- 不要getComputedStyle获取位置和尺寸
- 可以使用绝对定位
- ....

3.4. 合成composite

默认文档流中的内容都是最终放到一个合成图层中
某些特殊的CSS属性, 会生成新的合成图层:
- position: fexied
- transform 3D
- will-change
- opacity在执行动画
- animation/transition执行transform

3.5. defer和async

script 会阻塞DOM Tree构建, 需要先下载/执行
defer
- 不会阻塞DOM Tree构建
- DOM Tree构建完成, 并且在DOMContentLoaded事件之前
- 保证多个defer的script顺序
- 从性能的角度最好放到head中
- defer对于script元素没有外部引用, 无效
async
- 独立下载独立运行

四. JavaScript的运行原理

4.1. V8引擎执行代码的流程

4.2. V8引擎其他内容补充

核心3个模块
词法分析/语法分析

4.3. ECMA文档的版本问题

day3

一. 深入JS执行原理

1.1. 全局对象的创建

1.2. 执行全局代码

1.3. 执行函数代码

1.4. 作用域作用域链

二. JS的内存管理

2.1. 内存管理的理解

2.2. GC实现算法

引用计数
标记清除(可达性)
V8本身的优化:
- 标记整理
- 分带处理
- 增量收集
- 闲时收集

2.3. 闭包的概念理解

2.4. 闭包的内存流程

2.5. 闭包的内存泄漏

day4

一. 函数增强

1.1. 函数对象的属性

name
length

1.2. arguments转数组

三种方式
箭头函数不绑定arguments

1.3. 剩余rest参数

function foo(...args) {}
args数组

1.4. 纯函数的使用

纯函数的概念:
- 确定的输入一定产生确定的输出
- 执行过程中不能副作用
实际开发中应用:
- react/redux
没有必要每一个函数都是纯函数

1.5. 柯里化的过程

什么是柯里化
柯里化函数
两个案例:
- logInfo
- makeAdder
柯里化优势:
- 职责单一
- 参数复用
自动柯里化的函数封装

1.6. 组合函数的使用

多个函数组合在一起, 以此调用
封装组合函数

二. 额外知识

2.1. with

2.2. eval

2.3. 严格模式

什么是严格模式?
如何开启严格模式:
- 文件开启
- 函数开启
严格模式的限制:
- 举一些例子

三. 对象增强

3.1. 属性描述符

3.2. 数据属性描述符

configurable
enumerable
writable
value

3.3. 存储属性描述符

configurable
enumerable
get
set

3.4. 定义多个属性描述符

Object.defineProperties(obj, {})

3.5. 额外方法的补充

day5

一. 原型的理解

1.1. 对象的原型

任何对象都有自己默认的原型(隐式原型)
作用: 在当前对象查找某一个属性时, 如果找不到, 会在原型上面查找
获取原型:
- __proto__
- Object.getPrototypeOf(obj)

1.2. 函数的原型

任何一个函数(非箭头函数), 都有自己的prototype属性(函数的显式原型)
获取原型:
- prototype
作用:
- 当通过new操作符调用函数时, 创建一个新的对象
- 这个新的对象的隐式原型会指向这个函数的显式原型
- obj.__proto__ = F.prototype

1.3. 构造函数正确的写法

function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.running = function() {}

var p1 = new Person()
p1.running()

1.4. 显式原型上的constructor

constructor默认指向函数对象本身

1.5. 重写显式原型

Person.prototype = {
    
}
// 注意: constructor

二. ES5中的继承

2.1. 面向对象的三大特性

抽象
封装
继承
多态

2.2. 原型链的概念

原型对象和原型对象之间可以形成链条
- 沿着我们的演练查找对应的属性

2.3. 原型实现继承

function Person() {}
function Student() {}

Student.prototype = new Person()

2.4. 借用构造函数

function Student() {
    Person.call(this, ....)
}

2.5. 原型式/寄生式思想

2.6. 寄生组合式继承

function inherit(Subtype, Supertype) {
    Subtype.prototype = createObject(Supertype.prototype)
}

function Person() {}
function Student() {}

inherit(Student, Person)

2.7. Object是最终的父类

2.8. 对象判断方法补充

hasOnnProperty
in/for in
instanceOf
obj.isPrototypeOf(info)

day6

一. 原型关系图(理解)

function Person() {}
function Object() {}
function Function() {}

二. ES6类的使用(掌握)

2.1. class定义类

2.2. class类中的内容

constructor方法
实例方法
访问器方法
静态方法 static

2.3. class的extends

extends关键字
super关键字
- 方式一: 构造方法 super()
  - 一定在使用this之前以及返回对象之前先调用super
  - 构造函数的首行
- 方式二: 实例方法super.method
- 方式三: 静态方法super.staticMethod

2.4. 继承自内置类

对内置类进行扩展
Array.prototype.xxx

2.5. 类的混入Mixin

三. babel ES6转ES5源码(不强制要求)

3.1. 只写一个class类的源码

3.2. class的继承extends源码

day7

一. 面向对象的补充

1.1. 多态

严格意义的多态
JavaScript的多态
- 到处都是多态

1.2. 对象字面量的增强

属性的增强
方法的增强
计算属性名

1.3. 数组和对象的解构

基本使用
顺序
默认值
...
对象重命名

二. apply/call/bind实现

2.1. apply和call的实现

2.2. apply和call的封装

2.3. bind函数的实现

三. 额外知识补充

3.1. 新ECMA文档术语

3.2. var/let/const用法

3.2.1. let/const的基本使用

基本使用
注意事项: 不能重复定义

3.2.2. let/const有没有作用域提升

标识符在词法环境被创建时, 会被创建出来, 但是不能访问
作用域提升, 在作用域内, 可以被提前访问

3.2.3. 暂时性死区TDZ

3.2.4. 不会添加window

Global environment record:
- 合成的record
- window
- 声明式环境记录对象

3.2.5. 块级作用域和应用

let/const/class/function会形成块级作用域
let的块级作用域的应用
- btnEl的for循环

day8

一. ES6中的知识

1.1. 模板字符串

基本用法
标签模板字符串

1.2. 函数的增强

默认参数
剩余参数
箭头函数的注意事项

1.3. 展开运算符

对象字符串创建也可以使用展开运算符

1.4. 引用赋值/浅拷贝/深拷贝(重要)

1.5. 数字的连接符_

1.6. Symbol符号使用

Symbol() 独一无二
Symbol(description)
Symbol.for
Symbol.keyFor

1.7. Set/WeakSet

内容不能重复
WeakSet和Set区别
- 只能存放对象
- 对对象是弱引用

1.8. Map/WeakMap

key可以是对象类型
WeakMap和Map区别
- key必须是对象
- 对对象是弱引用

二. ES7~ES11知识点

2.1. ES7知识点

includes
**

2.2. ES8知识点

Object.values()
Object.entries()
String - padStart/padEnd
trailing commas

2.3. ES10知识点

flat/flatMap
Object.fromEntries
trimStart/trimEnd

2.4. ES11知识点

BigInt -> n
空值合并运算符 ??
可选链的使用 ?.
- 函数调用也需要

day9

一. ES12和ES13知识点

1.1. ES12知识点

FinalizationRegistry
WeakRef
- objRef.deref()
逻辑赋值运算符
- ||=
- ??=
- &&=
replaceAll

1.2. ES13知识点

at
Object.hasOwn
- Object.prototype.hasOwnProperty
class成员
- public instance fields
- public static fields
- private instance fields
- private static fields
- static block

二. Proxy和Reflect

2.1. Proxy

2.1.1. Object.defineProperty

和Proxy区别

2.1.2. Proxy基本使用

new Proxy(target, handler)
操作Proxy对象

2.1.3. Proxy捕获器

set
get
has
deleteProperty
....

2.1.4. apply/construct

2.2. Reflect

2.2.1. Object方法存在问题

2.2.2. 演示Reflect -> 返回值

2.2.3. Reflect和Proxy一起使用

1.不直接操作原对象
2.有返回值
3.改变访问器中的this指向

2.2.4. Reflect的construct用法

三. Promise使用

3.1. 异步代码存在困境

3.2. 使用Promise解决

3.3. Promise三种状态

3.4. resolve不同的值

3.5. then和catch方法补充

day10

一. Promise细节补充

1.1. 实例方法

1.1.1. then方法的返回新Promise

then中的回调来决定

1.1.2. catch方法的返回新Promise

catch执行, 前面某一个Promise reject执行
catch返回值, catch传入的回调来决定

1.1.3. finally方法(ES9)

1.2. 类方法

1.2.1. all

等到所有的Promise有resolve结果, 拿到数组
如果过程中有一个reject, 那么all promise为reject

1.2.2. allSettled

等到所有的Promise都有结果, 拿到数组: [{ status: , value/reason }]

1.2.3. race

竞赛: 有一个有结果, 不管这个结果是fulfilled还是rejected

1.2.3. any

任意: 等到一个fulfilled, 如果都不是fulfilled生成一个错误对象

二. 迭代器Iterator

2.1. 什么是迭代器, 创建迭代器

本身是对象
实现next方法
- 返回 { done: false/true, value: value/undefined }

2.2. 什么是可迭代对象

函数: [Symbol.iterator]
返回: 迭代器

2.3. 迭代器类型

数组/String/Set/Map/argumetns/NodeList

2.4. 可迭代对象的特性

JavaScript特殊语法: for of/spread syntax/yield* /解构
构造方法传值: new Set()
特殊的方法: Array.from/Promise.all()

2.5. 自定义类的可迭代对象

class {
    
    [Symbol.iterator]() {
        
    }
}

2.6. 迭代器的中断执行(了解)

三. 生成器Generator

3.1. 生成器函数和生成器对象

生成器函数:
- function *
- 返回生成器对象
- 内部可以通过yield控制函数的执行
生成器对象: 特殊的迭代器

3.2. 生成器的返回值和参数

3.3. 提前结束return/throw(了解)

3.4. generator替代iterator

createArray方法中
createRange方法
语法:
- yield*
自定义类中的替代

class {
    *[Symbol.iterator]() {
        yield* 可迭代对象
    }
}

day11

一. generator异步处理

1.1. 处理一 - 回调地狱

1.2. 处理二 - Promise链式

1.3. 处理三 - generator+yield

1.4. 处理四 - await/async

1.5. 封装自动执行生成器函数工具

二. async/await

2.1. 异步函数async

2.2. 异步函数返回值

普通值: 包裹Promise
Promise
thenable

2.3. async中使用await

await 表达式 -> Promise
await后续的代码等到Promise有resolve结果时, 才继续执行

三. 事件循环/队列

3.1. 进程和线程

3.2. JavaScript单线程

3.3. 事件队列/循环

3.4. 宏任务/微任务

如何调度:
- 在执行下一个宏任务之前, 会清空微任务队列

3.5. 面试题: Promise/async/await

四. 异常处理

4.1. 异常的应用场景

4.2. throw抛出异常

number/string/boolean
自定义对象
new Error()

4.3. 捕获异常

try {
    
} catch(error) {

} finally {
    
}

day12

一. Storage

1.1. Storage的基本使用

1.2. Session和Local的区别

1.3. Storage的常见属性和方法

length
key()
getItem
setItem
removeItem
clear

1.4. 封装Cache

二. 正则表达式

2.1. 认识正则和JS创建

字符串匹配的利器
创建正则:
- new
- //

2.2. 正则常见的方法

正则方法
- exec
- test
字符串方法
- match
- matchAll
- search
- replace
- replaceAll
- split

2.3. 正则规则(自己总结)

2.4. 练习案例

2.4.1. 歌词解析(重要)

2.4.2. 时间格式化

三. 防抖基本使用

3.1. 认识防抖

搭建案例

3.2. underscore实现防抖

通过CDN引入文件
_.debounce(fn, 2000)

day13

一. 防抖和节流

1.1. 防抖实现

基本实现
this和参数的绑定
立即执行
取消功能
返回值

1.2. 节流实现

基本实现
this和参数的绑定
立即执行
尾部执行
取消功能
返回值

二. 深拷贝和事件总线

2.1. 深拷贝

引用赋值/浅拷贝/深拷贝的区别和关系
JSON实现深拷贝
实现深拷贝
- 基本实现(递归)
- 数组类型
- 其他类型处理
  - Set
  - 函数
  - Symbol
    - key
    - value
- 循环引用
  - WeakMap

2.2. 事件总线

class HYEventBus
方法
- on(eventName, eventFn)
- emit(eventName, ...args)
- off(eventName, eventFn)