js高级（coderwhy之个人笔记）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51868342/article/details/126315577

Day1

打开终端快捷：（ctrl+`）

正在上传…重新上传取消

在终端使用node运行js文件: 使用 node 文件名

快速打开vscode当前目录的终端:

正在上传…重新上传取消

闭包：

闭包定义：函数+访问变量

Javas中的函数+去访问外层变量==闭包

正在上传…重新上传取消

闭包作用：

存数据—>函数执行完不销毁

闭包函数的作用：访问外部的数据====JavaScript函数的优点（灵活）

This:

1全局作用域下：

// 在大多数情况下，this都在出现在函数中

// 全局作用域下

// this指：window（globalObject）

// log(this)==log(window)

console.log(this);

console.log(window);

// Node环境下：[] this指向空字符串（了解）

console.log(this)

正在上传…重新上传取消

2同个函数不同this指向

正在上传…重新上传取消

3四种this绑定规矩（重点）

规则一：独立函数绑定

正在上传…重新上传取消

规则二：

正在上传…重新上传取消

书接上回

正在上传…重新上传取消

Apply—call—bind函数调用

规则三：

Call-apply 绑定：指定的this()

正在上传…重新上传取消

Bind绑定

正在上传…重新上传取消

规则四：new绑定

正在上传…重新上传取消

绑定规则优先级

正在上传…重新上传取消

箭头函数：

正在上传…重新上传取消

箭头函数this绑定：

正在上传…重新上传取消

Day2对象

作用域：

正在上传…重新上传取消

With:语句：（了解一下）略

面向对象：

1创建对象：

正在上传…重新上传取消

2对对象属性的操作：

获取属性，赋值，删除，遍历
definProperty方法精准对对象操作

正在上传…重新上传取消

扩展（了解）：关于definproperty的参数二:属性

包括数据属性，存储属性

正在上传…重新上传取消

重点：创建对象：

法一：字面量

如上

法二:工厂模式（函数模式）：缺点无法获取最真实的对象类型

正在上传…重新上传取消

法三：构造函数（重点）

// 规范：(约定熟成)function 函数名（）函数名为大写或驼峰命名法=======构造函数

function Person(name,age,height,address){

this.name=name……..

this.eationg=function(){}

}

//new Person

var p1 = new Person("张三",18 ,1.99,"广州市")

正在上传…重新上传取消

案例分析：

1生成{}对象 2{}赋值给this 3执行代码体 4返回this

正在上传…重新上传取消

具体构造函数创建对象：

正在上传…重新上传取消

对象原型和函数原型（重点）

对象原型

正在上传…重新上传取消

函数原型（函数=<对象）

函数原型运行内存图

正在上传…重新上传取消

P1对象中-proto-==person函数原型对象

面向对象原型链和继承的实现：

Js中面向对象：

正在上传…重新上传取消

原型链：

正在上传…重新上传取消

顶部原型：来自（）

补充：Object是是所有函数（包括person）的父类---

正在上传…重新上传取消

继承：原理（重点）

实现继承:Function .prototype===Object .__proto

正在上传…重新上传取消

（1）原型链实现继承：

详细解读:

正在上传…重新上传取消

实现继承

正在上传…重新上传取消

优化继承：借助构造函数继承（解决三个弊端）

（2）构造函数实现继承{调用call、apply函数}

正在上传…重新上传取消

具体实现

正在上传…重新上传取消

疑惑：（解决）

正在上传…重新上传取消

-继承-对象之间的关系最简继承：

正在上传…重新上传取消

（3）原型式

正在上传…重新上传取消

1通过setPrototypeOf设置一个对象为另一个对象的原型（实现原型式继承函数）

正在上传…重新上传取消

2优化

（4）寄生式继承

(了解即可)-继承-对象（寄生式）继承：

寄生式原型是es6的新方法：create方法可以将一个对象指向另一个对象的原型

正在上传…重新上传取消

寄生式继承

正在上传…重新上传取消

（5）寄生组合式继承

最终方案：

正在上传…重新上传取消

抽离：封装Object为函数

正在上传…重新上传取消

图解：

正在上传…重新上传取消

小结：

1继承方法

* 1/js继承

原理都是：Stu.prototype =new Person()

es6之前的方法:通过setPrototypeOf 方法：设置 o 为Object的原型

了解在没有setPrototypeOf 方法时怎么继承 (了解)

通过es6新方法create 可以将一个对象作为(指向) 另一个对象的原型

2原型继承关系图解：

正在上传…重新上传取消

原型上的方法补充和总结：

(4条消息) JavaScript的原型方法_zyk_520的博客-优快云博客_javascript 原型方法

正在上传…重新上传取消

一、hasOwnProperty()

判断是否是对象的属性（非继承属性）,无法判断原型链上的属性；返回boolean值，true-是对象的属性；false-不是对象的属性

二、isPrototypeOf() 和instanceof 判断

判断一个对象是否是另一个对象的原型；

常见的面试题instanceof 和 typeOf的区别

三、Obeject.getPrototypeOf() / set PrototypeOf()

获取某个对象的原型对象。

es6之前的方法:通过setPrototypeOf 方法：设置 o 为Object的原型

四、in/ for in操作符

检测属性是存在于实例还是原型中。

注意：可以和hasOwnProperty()配合使用，判断属性是否是原型中的属性

Day3：es6

了解一下咯

前言：babeljs.io工具-将代码转化低级

正在上传…重新上传取消

例如es6转化-es5

在线官网：Babel · The compiler for next generation JavaScript (babeljs.io)

正在上传…重新上传取消

Es6语法(上）:类

1类的定义：

正在上传…重新上传取消

2类的声明和理解：

正在上传…重新上传取消

3类的使用

（1）类中的构造方法：

正在上传…重新上传取消

// 1类的声明+类中构造函数的声明（创建）

class Person {

// 类的构造方法

// 注意: 一个类只能有一个构造函数

// 0.在类的构造方法只能通过 constructor 方法（唯一）

// 1.在内存中创建一个对象 moni = {}

// 2.将类的原型prototype赋值给创建出来的对象 moni.__proto__ = Person.prototype

// 3.将对象赋值给函数的this: new绑定 this = moni

// 4.执行函数体中的代码

// 5.自动返回创建出来的对象

constructor(name, age) {

this.name = name

this.age = age

}

// 2调用（同function）

var p1 = new Person("why", 18)

var p2 = new Person("kobe", 30)

console.log(p1, p2)

// 小结和疑惑：为什么构造函数会使用类的方法尼？因为class这种模式在继承是很简单和方便的

（2）class中的方法使用：（实战）

1》在class中定义类

正在上传…重新上传取消

2》实战：（类的实例方法）

正在上传…重新上传取消

3》类的访问器方法：get、set

4》类的继承一（父类与子类）：继承的关键：extends和super的使用

正在上传…重新上传取消

5》了解类的继承二（创建类继承自内置类）

6》了解类的继承三（类的混入：使用js技巧实现混入）

Es6语法（中）：字面量/let、、

1字面增强写法：

正在上传…重新上传取消

属性+方法（即可）

正在上传…重新上传取消

2解构（重点）

使开发效率更高

（最常用的）案例：解构传递的function（）对象

正在上传…重新上传取消

解构：数组，对象（function），

具体解构看代码去：

1数组解构：（vue3中的map方法常用。。。）

正在上传…重新上传取消

2对象解构：

正在上传…重新上传取消

函数解构

正在上传…重新上传取消

3let/const基本使用：

Const:

正在上传…重新上传取消

//*const==(常量、衡量) 声明是常量：一、const声明后是不可修改的*/

const name="abc"

name="cba" //报错

//注意事项一：具体const本质上传递的值是不可修改

// 二、当如果传递的是一个引用类型（内存地址），可以通过引用找到对应的对象，去修改对应的属性

// 什么是引用类型？==》函数、对象

const obj ={

foo:"foo"

}

// obj={} //报错

obj.foo="aaa" //foo:"aaa"

let:和const区别：变量和常量的区别，用法一致

正在上传…重新上传取消

4（了解）作用域提升-var/let/const的区别

Var就有作用域提升

正在上传…重新上传取消

因为let/const没有作用域提升：作用域：为当前的块级作用

Var 和let/const区别

正在上传…重新上传取消

小结：var和let/const区别：

（1）const、let不能重复定义变量，var可以重复定义变量。
（2）const、let有块级作用域，var没有块级作用域。

let和const的区别：

（1）let设置变量，const设置常量(函数、对象、常量)

(const是设置常量，也就是不能改变。const定义的数值字符串的时候值不能改变。
const 定义的对象的时候，对象不能改变，但是对象的属性值可以改变。

（3）let的内存原理：栈内存

const的内存原理：堆内存

5、ES5作用域和ES6块级作用域

Es5作用域：

正在上传…重新上传取消

Es6块级作用域：

Var无效

// ES6的代码块级作用域

// 对let/const/function/class声明的类型是有效

{

let foo = "why"

function demo() {

console.log("demo function")

}

class Person {}

}

console.log(foo) // foo is not defined

demo()

var p = new Person() // Person is not defined

全打印不了

块级作用域使用场景：

If/switch/for块级代码 –自带块级作用域

定时器函数setTimout…………

6块级作用域补充：暂时性死区

var/let/const区别和块级作用域图解

正在上传…重新上传取消

Es6新增遍历方法：

For(….of…)

正在上传…重新上传取消

暂时性死区：在声明前变量是无法访问的（为什么const有变量-因为const可以声明对象（包含变量））

正在上传…重新上传取消

Es6语法（下）：字符串模板+es6函数（箭头函数）

1模板字符串的基本使用：

Tab上面的键：``+${拼接对象}

正在上传…重新上传取消

2标签字符串的使用（了解一下）rectify框架使用

正在上传…重新上传取消

3Es6函数补充：

Es5之前的默认值：

// Es5之前给函数默认值

// 缺点：

// 1写起来麻烦,还要使用||代码阅读性差

// 2有bug:如果传入（0，""）,log->打印不出来 log(aaa,bbb)

// function foo(m,n){

// m=m||"aaa" //m等于m,或“aaa” 但m没有值即等于 aaa(即m默认值==aaa)

// n=n||"bbb"

// console.log(m,n);

// }

// // foo()

// foo(0,"") //aaa,bbb

Es6函数默认值：

// 1.Es6可以给函数参数直接提供默认值

function foo(m="aaa",n="bbb"){

console.log(m,n);

}

foo(0,"")//0,""

// 2对象参数和默认值以及解构

function printInfo({name,age}={name:"why",age:18}){

console.log(name,age)

}

printInfo({name:"kobe",age:40})

// 另一种写法

function printInfo1({name="why",age=18}={}){

console.log(name,age)

}

printInfo1()

作业：给一个对象解构+默认值：

正在上传…重新上传取消

（了解）Es6函数剩余参数：

Es6args替代argument

正在上传…重新上传取消

Es6箭头函数补充：

正在上传…重新上传取消

4Es6中的展开运算符和浅拷贝：

1）什么是浅拷贝什么是深拷贝：

(4条消息) 面试题：深拷贝和浅拷贝(超级详细，有内存图)_田江的博客-优快云博客_深拷贝和浅拷贝面试题

2）例子es6展开运算符实现浅拷贝：

浅拷贝：将：info对象的内存地址拷贝一份到obj中（指向同一个地址），

正在上传…重新上传取消

5Es6对象symbol属性（了解一下）

前因：es6之前的对象属性名，添加相同对象属性名会覆盖掉原来的属性和值。

正在上传…重新上传取消

// 3.1在定义对象字面量时使用

// 3.2新增属性

console.log(obj[s1], obj[s2], obj[s3], obj[s4])//注意不能通过。语法获取：console.log(obj.s1)

其他了解一下

6新增数据结构Set使用和weakSet

0)别人的理解：(4条消息) 彻底弄懂ES6中的Map和Set_asteriaV的博客-优快云博客_es6 map set

1）介绍set和map是什么

正在上传…重新上传取消

Set去重：

Set结构转化为数组结构：两种方式

Set常见的方法：size/add/detete/clear/forEach (数组中的方法==)

2）set的基本使用：

(4条消息) ES6:Set数据结构的使用方法及使用set数组去重_奄奄一息的一条咸鱼的博客-优快云博客_set数据结构去重

正在上传…重新上传取消

set自带的方法：add/delte/has/clear

正在上传…重新上传取消

set的具体使用(去重+遍历)

正在上传…重新上传取消

set方法数组去重：推荐使用写法二—》（为啥因为写法一Array.from方法看不太懂）

（掌握）写法二：{set去重的方法（自带、这个结构输出的元素不能重复）}

const num = new Set([1,1,2,3,2,1]);

console.log(num); // 输出：{1, 2, 3} 重复的内容不会被输出

console.log(num.size); // 输出3，重复的内容不记为量为什么输出3？因为size方法是个数（不包含重复的）

// 利用扩展运算符，将set数据结果转换成数组形式

const newNum = [...num];

console.log(newNum); // 输出： [1, 2, 3]

遍历：

正在上传…重新上传取消

3）了解weakSet的基本使用:

正在上传…重新上传取消

7新增数据结构Map的使用和weakMap （使用为0%）

Map:

map和set的区别：map可以使用key来映射对象，set不能

正在上传…重新上传取消

Map的使用：

Map的常用方法：size/detete/clear/set/get/

// set ：设置“why"为”eee“---> key:value

// get(key) //通过key获取value

console.log(map2.get("why")) //"eee"

开发中唯一使用的map：将对象作为key

正在上传…重新上传取消

了解weakMap:

8（了解）es6响应式原理-vue3响应式的关系

正在上传…重新上传取消

ES6-ES12小结:

基础：类、let/const、模板字符串、解构+默认值、symbol属性

函数方法：类、

箭头函数

数组方法: (4条消息) js数组常用方法_on my-own的博客-优快云博客_js数组方法

es6新增的数据结构set方法和map方法

其他补充：浅拷贝……

Day4(复习)

前言：es7-es12略了

Promise、迭代器、async这些其实也是es6的知识

Proxy-Refect：

前言：proxy-Refect是什么呢？在那使用呢？

正在上传…重新上传取消

监听对象一：object.defineProperty（api）

面向对象（原型、原型链的一个api）同时也是vue2的响应式原理

正在上传…重新上传取消

复习一些obj.definProperty使用：

正在上传…重新上传取消

2监听对象二:Proxy

Proxy是Object.defineProperty的进阶( es6中新增的类)。同时也是vue3的响应式原理

正在上传…重新上传取消

1）proxy的具体使用:

正在上传…重新上传取消

1基本使用：类比obj.dp

正在上传…重新上传取消

2其他捕获器使用：

正在上传…重新上传取消

补充：obj.defineProperty和proxy作用和区别

// 3小结：obj.defineProperty和proxy作用和区别

//1》 obj-为了修改属性：可通过obj.defineProperty或proxy方法 {增删改查}

//2》区别：

// 通过Object.defineProperty会将数据属性描述符变成一个访问属性描述符（然后再进行操作修改）

// name: "why", // 数据属性描述符

// Object.defineProperty(obj, "name", {

// })

// 通过proxy代理就不会将一个对象中属性数据属性描述符变成一个访问属性描述符（直接通过捕获器实现）

2）proxy所有捕获器(了解)

正在上传…重新上传取消

3）proxy在函数中的调用方式：

正在上传…重新上传取消

3Refect （其实是java的知识-了解）

refect是什么？有什么用？---

比较object上的方法和reflect上的方法：

正在上传…重新上传取消

4vue2和vue3的响应式原理：

0)vue2和vue3原理

(4条消息) 三、【Vue3】——Vue2与Vue3响应式原理区别_YIFEI132的博客-优快云博客_vue2和vue3响应式的区别

(4条消息) 【前端面试题之Vue篇】Object.defineProperty()和Proxy来进行数据劫持有什么不同？_其实我叫二喵同学�的博客-优快云博客_前端面试proxy

1）响应式的实现：

正在上传…重新上传取消

2）优化响应式的实现-响应式依赖的收集

正在上传…重新上传取消

3）优化自动收集响应式对象：

正在上传…重新上传取消

4）最终优化重构类：

正在上传…重新上传取消

1（优化）数组-》类：

太长了p代码

2（优化）类-》自动监听对象类：

3（最终优化）自动监听对象类：-》重构

太长了p代码

5）vue2和vue3的响应式原理：

正在上传…重新上传取消

5小结：这章节掌握什么是proxy和object.defineProperty的区别，以及set/get，了解vue2-vue3的响应式原理即可（面试能回答即可）

Promise：（简写看vue2---手写promise）

0总结(面试题)

promsie理解：(5条消息) 前端Promise_yin_ping1101的博客-优快云博客_前端promise

promsie实战开发：你说你会Promise？那你解决一下项目中的这五个难题？ - 掘金 (juejin.cn)

1>理解什么是promise和基本使用

正在上传…重新上传取消

什么是异步

正在上传…重新上传取消

Es6之前异步操作处理：（了解）弊端大

正在上传…重新上传取消

1)什么是promise:

正在上传…重新上传取消

promise的作用：异步编程的使用----常见与网络请求、vue项目的异步编程（api+vuex+组件具体逻辑的编程）

2)Promise的基本使用：

Promise:原理如上同样是传递一个回调函数，但这个回调函数会立即执行，（上面的优化）

格式：

function requestData(url, ) {

return new Promise((resolve,reject)=>{

setTimeout(() => {

if (url === "coderwhy") {

// 成功

let names = ["abc", "cba", "nba"]

resolve(names) //1调用这个成功回调时

} else { // 否则请求失败

// 失败

let errMessage = "请求失败, url错误"

reject(errMessage) //2调用rejext失败回调时

}

}, 3000);

})

}

// main.js （简写。then）

const promise = requestData("coderwhy")

promise.then((res) => { //1.1当上面调用resolve时-返回

console.log("请求成功:", res) //promise.then(res)方法

}, (err) => {

console.log("请求失败:", err)

})

// // main.js (不简写)

// const promise = requestData("coderwhy")

// promise.then(() => {

// console.log("请求成功:", res)

// }

// promise .catch() => { //2.1调用rejext失败回调时-返回

// console.log("请求失败:", err) //promise.catch（）方法

// })

图解：

正在上传…重新上传取消

promise具体实现原理：

1成功回调：then（）方法

正在上传…重新上传取消

2失败回调：cath()方法

正在上传…重新上传取消

2>promise的回调和参数理解

关于promise回调的理解：（包括res/err）

res/err:形参

reject和resolve:也能传递参数—>通过res/err传递到异步

正在上传…重新上传取消

3>关于promise的其他补充

一：promise三个状态(了解)

正在上传…重新上传取消

二：promise的resolve参数

参数一：普通的值或者对象

resolve(参数)

* 1> 普通的值或者对象状态:pending -> fulfilled

正在上传…重新上传取消

参数二: 传入一个Promise

* 2> 传入一个Promise

* 那么当前的Promise的状态会由传入的(new)Promise来决定

* 相当于状态进行了移交

正在上传…重新上传取消

即：

正在上传…重新上传取消

参数三：传入一个对象

* 3> 传入一个对象, 并且这个对象有实现then方法

* 那么也会执行该then方法, 并且又该then方法决定后续状态

正在上传…重新上传取消

4>promise的类方法：

（0）promise的对象所有方法：

正在上传…重新上传取消

①：promise的对象方法.then

正在上传…重新上传取消

②：promise的对象方法.catch ：

正在上传…重新上传取消

③：promise的对象方法.finally：

正在上传…重新上传取消

④：promise类方法：resolve和reject：

正在上传…重新上传取消

小结：promise中的方法重要resolve/reject和 then/cath(其他了解)

5>手写promise和promise实战

简单总结手写Promise

一. Promise规范

Promises/A+

二. Promise类设计

class HYPromise {}

function HYPromise() {}

三. 构造函数的规划

class HYPromise {

   constructor(executor) {

// 定义状态

   // 定义resolve、reject回调

   // resolve执行微任务队列：改变状态、获取value、then传入执行成功回调

   // reject执行微任务队列：改变状态、获取reason、then传入执行失败回调

   

   // try catch

   executor(resolve, reject)

  }

}

四. then方法的实现

class HYPromise {

then(onFulfilled, onRejected) {

 // this.onFulfilled = onFulfilled// this.onRejected = onRejected

// 1.判断onFulfilled、onRejected，会给默认值

   

   // 2.返回Promise resolve/reject

   

   // 3.判断之前的promise状态是否确定

   // onFulfilled/onRejected直接执行（捕获异常） // 4.添加到数组中push(() => { 执行 onFulfilled/onRejected 直接执行代码})

    }

}

五. catch方法

class HYPromise {

   catch(onRejected) {

   return this.then(undefined, onRejected)

  }

}

六. finally

class HYPromise {

 finally(onFinally) {

   return this.then(() => {onFinally()}, () => {onFinally()})

}

七. resolve/reject

八. all/allSettled

核心：要知道new Promise的resolve、reject在什么情况下执行

all：

情况一：所有的都有结果
情况二：有一个reject

allSettled：

情况：所有都有结果，并且一定执行resolve

九.race/any

race:

情况：只要有结果

any:

情况一：必须等到一个resolve结果
情况二：都没有resolve，所有的都是reject

实战：略待补充

迭代器：（了解）

遍历容器

Es6语法遍历For(。。。。。of。。。。)

var arr = ['nick','freddy','mike','james'];

for(var item of arr){

console.log(item);

//nick ,freddy,mike,james

正在上传…重新上传取消

（了解）生成器

正在上传…重新上传取消

普通函数执行：

生成器控制函数执行：

正在上传…重新上传取消

生成器格式：

Function * ()

异常处理：略p代码：

一）异常处理

常见的方案：法1----3（了解）法四（掌握）

法123===法四的理解（法四的演变）

法一：

正在上传…重新上传取消

法二：

正在上传…重新上传取消

法三：（重点了解）

正在上传…重新上传取消

（了解即可）优化法三：（封装一个递归函数：实现自动调用）

正在上传…重新上传取消

优化三（使用npm包来实现函数调用）：npm install co

正在上传…重新上传取消

最终方案：法四（掌握）

// request.js

function requestData(url,) {

// 异步请求的代码会被放入到executor中

return new Promise((resolve, reject) => {

// 模拟网络请求

setTimeout(() => {

// 拿到请求的结果

resolve(url)

}, 3000);

})

}

// 第四钟方案:最终方案:async/await

async function getData() {

const res1 = await requestData("why")

const res2 = await requestData(res1 + "aaa")

const res3 = await requestData(res2 + "bbb")

const res4 = await requestData(res3 + "ccc")

console.log(res4);

}

getData()

二）错误处理：

01throw: “提示词“抛出异常

02最常用方式：

正在上传…重新上传取消

优化：

正在上传…重新上传取消

// 强调: 如果函数中已经抛出了异常, 那么后续的代码都不会继续执行了

03对抛出异常的处理

第一种：不处理抛出的异常

正在上传…重新上传取消

第二种：

正在上传…重新上传取消

真实开发：弹出异常

正在上传…重新上传取消

Async：

0async实战：

正在上传…重新上传取消

重点（res与返回值关系）res====return

1.Async 函数的执行：》》》》》调用一个promise函数（固定）

正在上传…重新上传取消

async函数和普通函数的区别一：返回值

2.1返回一个值（或没返回值默认）

正在上传…重新上传取消

2.2返回一个对象：return{ then:function(resolve,reject)}

正在上传…重新上传取消

2.3返回Promise

正在上传…重新上传取消

retrun===res

3．async函数和普通函数区别二:异常

普通函数异常：直接中断报错

Async函数异常：会作为异步函数promise的reject值（err）

正在上传…重新上传取消

4小结：

正在上传…重新上传取消

5async-await关键字使用：（复习）

正在上传…重新上传取消

表达式：跟generator异曲同工（原理一样）

1.表达式运行流程：（then的复习）

.Then(=>)这就是个格式问题：执行后面的代码

正在上传…重新上传取消

2跟上其他值

逻辑如res==return

Res==await

2.1常数：123

正在上传…重新上传取消

2.2对象{}è

正在上传…重新上传取消

2.3Promiseè

正在上传…重新上传取消

面试题：

promise和async

正在上传…重新上传取消

Day5:

进程和线程：

正在上传…重新上传取消

例如操作系统：

正在上传…重新上传取消

Mainsrcipt、微任务和宏任任务：（事件队列）

在了解什么是微任务和宏任务之前我们需要了解js是怎么执行函数，以及有异步操作怎么执行。

例如：

正在上传…重新上传取消

（一）事件队列：

mainSript

宏任务：

1. ajax 2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）

微任务：

1. Promise (aysnc) 2process.nextTick（Node.js） 3. Object.observe（已废弃；Proxy 对象替代）4. MutaionObserver

（二）宏任务、微任务是怎么执行的？

先执行mainSirpte—异步代码放队列中--

在执行任何宏任务之前，都必须保证微任务清空

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

正在上传…重新上传取消

面试题：（原理：宏任务之前微任务必须清空，宏任务包多个微任务

正在上传…重新上传取消

模块化：

正在上传…重新上传取消

CommonJS:导出与导入

正在上传…重新上传取消

// 使用另外一个模块导出的对象, 那么就要进行导入 require

// const { aaa, bbb } = require("./why.js")

const { name, age, sum } = require("./why.js")

// console.log(aaa)

// console.log(bbb)

导入

console.log(name)

console.log(age)

console.log(sum(20, 30))

EsModule:import导出导入：

第一种使用：html和js

Html文件：引用加上type属性

Foo.js

import { name, age } from "./foo.js"

console.log(name)

console.log(age)

第二种使用：js和js（improt、exprot）

最常用：

// 1.第一种方式: export 声明语句

// export const name = "why"

// export const age = 18

// export function foo() {

// console.log("foo function")

// }

// export class Person {

// }

// 2.第二种方式: export 导出和声明分开

const name = "why"

const age = 18

function foo() {

console.log("foo function")

}

export {

name,

age,

foo

}

// 1.导入方式一: 普通的导入

import { name, age, foo } from "./foo.js"

console.log(foo.name)

console.log(foo.age)

foo.foo()

const name = "main"

console.log(name)

console.log(age)

常见工具函数的导入导出方式：

思路：utils工具：其他具体工具à导入index。Jsà导出àmain。Jsà html

正在上传…重新上传取消

常用导出方式2

正在上传…重新上传取消

html

Npm包管理工具：npmàvue2(了解即可-其他会使用即可)

前言：webpack等都需要npm（但一般在vuecli使用）

正在上传…重新上传取消

使用： npm-init

npm-init-y

在vuecli中添加npm (vue create ..)

效果

正在上传…重新上传取消

属性:

正在上传…重新上传取消

基本命令：(掌握)

全局与项目

正在上传…重新上传取消

开发时依赖和开发安装时依赖

正在上传…重新上传取消

小结：npm/yan/cnpm

Cookie-Bom-dom：

1Storage

认识

正在上传…重新上传取消

存储的位置

正在上传…重新上传取消

Storage属性：

本地存储和会话存储的区别:

正在上传…重新上传取消

Storage属性：

正在上传…重新上传取消

使用：

小结：Storage的封装（工具类的封装）

（了解）后端：数据库处理（）增删减查

正在上传…重新上传取消

IndexDB：api使用

正在上传…重新上传取消

2cookie

Cookie的基本使用：(演示运行cookie-server服务器)node index.js

Cookie属性

正在上传…重新上传取消

domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。

3BOM：

具体js基础

认识：

正在上传…重新上传取消

Window的api（了解）

正在上传…重新上传取消

具体api查官方文档: Window - Web API 接口参考 | MDN (mozilla.org)

具体看js基础：

其他属性：

location属性

正在上传…重新上传取消

Hisotry属性：

// 跳转(不刷新网页)

history.pushState

正在上传…重新上传取消

4dom(even)：

具体看js基础

正在上传…重新上传取消

所有的架构都是一些小节点组成的à节点树（bignode.js）

官网：Node - Web API 接口参考 | MDN (mozilla.org)

evebTarget->Node

关于node的具体操作：(节点操作)

1常见属性:

nodeName

nodeType

nodeValue

正在上传…重新上传取消

2常见方法：

增删……

AppendChild()

cloneNode()

createElement()

。。。。。。

更多查官网

具体Dom(重点)Document：查文档

正在上传…重新上传取消

防抖函数和节流函数：

防抖：

正在上传…重新上传取消

节流：

正在上传…重新上传取消

疑难点：

原型链

（了解一下）错法：

将父类的原型赋值给子类

问题：（）当子类上传functionè 会上传到父类的原型上（x）

当多个子类时传递相同的方法不同的函数体时会冲突

正在上传…重新上传取消

拷贝：

浅拷贝：一人两号，本质上还是一个人

深拷贝：克隆，两人两号

扩展和补充：

Json

正在上传…重新上传取消

格式：

正在上传…重新上传取消

深拷贝和浅拷贝—事件总线：

Js高级（一周哦）

目录——————

V8:略

闭包和this:(345)

Js函数编程：略（678）

面向对象：（9，10，11）

Es6语法（12.13.15.16）

响应式原理：（18）略

响应式异步Promise(19.20.21)

导出导入详情：（25.26）快速过一下啦

Npm包工具使用（27，28）快速过一下

Cookie-bom-dom(30,31)

防抖函数和节流函数：使用

3，4，5，9，10，11

12，13，15，16，

19，20，21

27，28，

30，31

函数使用

Day1

打开终端快捷：（ctrl+`）

正在上传…重新上传取消

在终端使用node运行js文件: 使用 node 文件名

快速打开vscode当前目录的终端:

正在上传…重新上传取消

闭包：

闭包定义：函数+访问变量

Javas中的函数+去访问外层变量==闭包

正在上传…重新上传取消

闭包作用：

存数据—>函数执行完不销毁

闭包函数的作用：访问外部的数据====JavaScript函数的优点（灵活）

This:

1全局作用域下：

// 在大多数情况下，this都在出现在函数中

// 全局作用域下

// this指：window（globalObject）

// log(this)==log(window)

console.log(this);

console.log(window);

// Node环境下：[] this指向空字符串（了解）

console.log(this)

正在上传…重新上传取消

2同个函数不同this指向

正在上传…重新上传取消

3四种this绑定规矩（重点）

规则一：独立函数绑定

正在上传…重新上传取消

规则二：

正在上传…重新上传取消

书接上回

正在上传…重新上传取消

Apply—call—bind函数调用

规则三：

Call-apply 绑定：指定的this()

正在上传…重新上传取消

Bind绑定

正在上传…重新上传取消

规则四：new绑定

正在上传…重新上传取消

绑定规则优先级

正在上传…重新上传取消

箭头函数：

正在上传…重新上传取消

箭头函数this绑定：

正在上传…重新上传取消

Day2对象

作用域：

正在上传…重新上传取消

With:语句：（了解一下）略

面向对象：

1创建对象：

正在上传…重新上传取消

2对对象属性的操作：

获取属性，赋值，删除，遍历
definProperty方法精准对对象操作

正在上传…重新上传取消

扩展（了解）：关于definproperty的参数二:属性

包括数据属性，存储属性

正在上传…重新上传取消

重点：创建对象：

法一：字面量

如上

法二:工厂模式（函数模式）：缺点无法获取最真实的对象类型

正在上传…重新上传取消

法三：构造函数（重点）

// 规范：(约定熟成)function 函数名（）函数名为大写或驼峰命名法=======构造函数

function Person(name,age,height,address){

this.name=name……..

this.eationg=function(){}

}

//new Person

var p1 = new Person("张三",18 ,1.99,"广州市")

正在上传…重新上传取消

案例分析：

1生成{}对象 2{}赋值给this 3执行代码体 4返回this

正在上传…重新上传取消

具体构造函数创建对象：

正在上传…重新上传取消

对象原型和函数原型（重点）

对象原型

正在上传…重新上传取消

函数原型（函数=<对象）

函数原型运行内存图

正在上传…重新上传取消

P1对象中-proto-==person函数原型对象

面向对象原型链和继承的实现：

Js中面向对象：

正在上传…重新上传取消

原型链：

正在上传…重新上传取消

顶部原型：来自（）

补充：Object是是所有函数（包括person）的父类---

正在上传…重新上传取消

继承：原理（重点）

实现继承:Function .prototype===Object .__proto

正在上传…重新上传取消

（1）原型链实现继承：

详细解读:

正在上传…重新上传取消

实现继承

正在上传…重新上传取消

优化继承：借助构造函数继承（解决三个弊端）

（2）构造函数实现继承{调用call、apply函数}

正在上传…重新上传取消

具体实现

正在上传…重新上传取消

疑惑：（解决）

正在上传…重新上传取消

-继承-对象之间的关系最简继承：

正在上传…重新上传取消

（3）原型式

正在上传…重新上传取消

1通过setPrototypeOf设置一个对象为另一个对象的原型（实现原型式继承函数）

正在上传…重新上传取消

2优化

（4）寄生式继承

(了解即可)-继承-对象（寄生式）继承：

寄生式原型是es6的新方法：create方法可以将一个对象指向另一个对象的原型

正在上传…重新上传取消

寄生式继承

正在上传…重新上传取消

（5）寄生组合式继承

最终方案：

正在上传…重新上传取消

抽离：封装Object为函数

正在上传…重新上传取消

图解：

正在上传…重新上传取消

小结：

1继承方法

* 1/js继承

原理都是：Stu.prototype =new Person()

es6之前的方法:通过setPrototypeOf 方法：设置 o 为Object的原型

了解在没有setPrototypeOf 方法时怎么继承 (了解)

通过es6新方法create 可以将一个对象作为(指向) 另一个对象的原型

2原型继承关系图解：

正在上传…重新上传取消

原型上的方法补充和总结：

(4条消息) JavaScript的原型方法_zyk_520的博客-优快云博客_javascript 原型方法

正在上传…重新上传取消

一、hasOwnProperty()

判断是否是对象的属性（非继承属性）,无法判断原型链上的属性；返回boolean值，true-是对象的属性；false-不是对象的属性

二、isPrototypeOf() 和instanceof 判断

判断一个对象是否是另一个对象的原型；

常见的面试题instanceof 和 typeOf的区别

三、Obeject.getPrototypeOf() / set PrototypeOf()

获取某个对象的原型对象。

es6之前的方法:通过setPrototypeOf 方法：设置 o 为Object的原型

四、in/ for in操作符

检测属性是存在于实例还是原型中。

注意：可以和hasOwnProperty()配合使用，判断属性是否是原型中的属性

Day3：es6

了解一下咯

前言：babeljs.io工具-将代码转化低级

正在上传…重新上传取消

例如es6转化-es5

在线官网：Babel · The compiler for next generation JavaScript (babeljs.io)

正在上传…重新上传取消

Es6语法(上）:类

1类的定义：

正在上传…重新上传取消

2类的声明和理解：

正在上传…重新上传取消

3类的使用

（1）类中的构造方法：

正在上传…重新上传取消

// 1类的声明+类中构造函数的声明（创建）

class Person {

// 类的构造方法

// 注意: 一个类只能有一个构造函数

// 0.在类的构造方法只能通过 constructor 方法（唯一）

// 1.在内存中创建一个对象 moni = {}

// 2.将类的原型prototype赋值给创建出来的对象 moni.__proto__ = Person.prototype

// 3.将对象赋值给函数的this: new绑定 this = moni

// 4.执行函数体中的代码

// 5.自动返回创建出来的对象

constructor(name, age) {

this.name = name

this.age = age

}

// 2调用（同function）

var p1 = new Person("why", 18)

var p2 = new Person("kobe", 30)

console.log(p1, p2)

// 小结和疑惑：为什么构造函数会使用类的方法尼？因为class这种模式在继承是很简单和方便的

（2）class中的方法使用：（实战）

1》在class中定义类

正在上传…重新上传取消

2》实战：（类的实例方法）

正在上传…重新上传取消

3》类的访问器方法：get、set

4》类的继承一（父类与子类）：继承的关键：extends和super的使用

正在上传…重新上传取消

5》了解类的继承二（创建类继承自内置类）

6》了解类的继承三（类的混入：使用js技巧实现混入）

Es6语法（中）：字面量/let、、

1字面增强写法：

正在上传…重新上传取消

属性+方法（即可）

正在上传…重新上传取消

2解构（重点）

使开发效率更高

（最常用的）案例：解构传递的function（）对象

正在上传…重新上传取消

解构：数组，对象（function），

具体解构看代码去：

1数组解构：（vue3中的map方法常用。。。）

正在上传…重新上传取消

2对象解构：

正在上传…重新上传取消

函数解构

正在上传…重新上传取消

3let/const基本使用：

Const:

正在上传…重新上传取消

//*const==(常量、衡量) 声明是常量：一、const声明后是不可修改的*/

const name="abc"

name="cba" //报错

//注意事项一：具体const本质上传递的值是不可修改

// 二、当如果传递的是一个引用类型（内存地址），可以通过引用找到对应的对象，去修改对应的属性

// 什么是引用类型？==》函数、对象

const obj ={

foo:"foo"

}

// obj={} //报错

obj.foo="aaa" //foo:"aaa"

let:和const区别：变量和常量的区别，用法一致

正在上传…重新上传取消

4（了解）作用域提升-var/let/const的区别

Var就有作用域提升

正在上传…重新上传取消

因为let/const没有作用域提升：作用域：为当前的块级作用

Var 和let/const区别

正在上传…重新上传取消

小结：var和let/const区别：

（1）const、let不能重复定义变量，var可以重复定义变量。
（2）const、let有块级作用域，var没有块级作用域。

let和const的区别：

（1）let设置变量，const设置常量(函数、对象、常量)

(const是设置常量，也就是不能改变。const定义的数值字符串的时候值不能改变。
const 定义的对象的时候，对象不能改变，但是对象的属性值可以改变。

（3）let的内存原理：栈内存

const的内存原理：堆内存

5、ES5作用域和ES6块级作用域

Es5作用域：

正在上传…重新上传取消

Es6块级作用域：

Var无效

// ES6的代码块级作用域

// 对let/const/function/class声明的类型是有效

{

let foo = "why"

function demo() {

console.log("demo function")

}

class Person {}

}

console.log(foo) // foo is not defined

demo()

var p = new Person() // Person is not defined

全打印不了

块级作用域使用场景：

If/switch/for块级代码 –自带块级作用域

定时器函数setTimout…………

6块级作用域补充：暂时性死区

var/let/const区别和块级作用域图解

正在上传…重新上传取消

Es6新增遍历方法：

For(….of…)

正在上传…重新上传取消

暂时性死区：在声明前变量是无法访问的（为什么const有变量-因为const可以声明对象（包含变量））

正在上传…重新上传取消

Es6语法（下）：字符串模板+es6函数（箭头函数）

1模板字符串的基本使用：

Tab上面的键：``+${拼接对象}

正在上传…重新上传取消

2标签字符串的使用（了解一下）rectify框架使用

正在上传…重新上传取消

3Es6函数补充：

Es5之前的默认值：

// Es5之前给函数默认值

// 缺点：

// 1写起来麻烦,还要使用||代码阅读性差

// 2有bug:如果传入（0，""）,log->打印不出来 log(aaa,bbb)

// function foo(m,n){

// m=m||"aaa" //m等于m,或“aaa” 但m没有值即等于 aaa(即m默认值==aaa)

// n=n||"bbb"

// console.log(m,n);

// }

// // foo()

// foo(0,"") //aaa,bbb

Es6函数默认值：

// 1.Es6可以给函数参数直接提供默认值

function foo(m="aaa",n="bbb"){

console.log(m,n);

}

foo(0,"")//0,""

// 2对象参数和默认值以及解构

function printInfo({name,age}={name:"why",age:18}){

console.log(name,age)

}

printInfo({name:"kobe",age:40})

// 另一种写法

function printInfo1({name="why",age=18}={}){

console.log(name,age)

}

printInfo1()

作业：给一个对象解构+默认值：

正在上传…重新上传取消

（了解）Es6函数剩余参数：

Es6args替代argument

正在上传…重新上传取消

Es6箭头函数补充：

正在上传…重新上传取消

4Es6中的展开运算符和浅拷贝：

1）什么是浅拷贝什么是深拷贝：

(4条消息) 面试题：深拷贝和浅拷贝(超级详细，有内存图)_田江的博客-优快云博客_深拷贝和浅拷贝面试题

2）例子es6展开运算符实现浅拷贝：

浅拷贝：将：info对象的内存地址拷贝一份到obj中（指向同一个地址），

正在上传…重新上传取消

5Es6对象symbol属性（了解一下）

前因：es6之前的对象属性名，添加相同对象属性名会覆盖掉原来的属性和值。

正在上传…重新上传取消

// 3.1在定义对象字面量时使用

// 3.2新增属性

console.log(obj[s1], obj[s2], obj[s3], obj[s4])//注意不能通过。语法获取：console.log(obj.s1)

其他了解一下

6新增数据结构Set使用和weakSet

0)别人的理解：(4条消息) 彻底弄懂ES6中的Map和Set_asteriaV的博客-优快云博客_es6 map set

1）介绍set和map是什么

正在上传…重新上传取消

Set去重：

Set结构转化为数组结构：两种方式

Set常见的方法：size/add/detete/clear/forEach (数组中的方法==)

2）set的基本使用：

(4条消息) ES6:Set数据结构的使用方法及使用set数组去重_奄奄一息的一条咸鱼的博客-优快云博客_set数据结构去重

正在上传…重新上传取消

set自带的方法：add/delte/has/clear

正在上传…重新上传取消

set的具体使用(去重+遍历)

正在上传…重新上传取消

set方法数组去重：推荐使用写法二—》（为啥因为写法一Array.from方法看不太懂）

（掌握）写法二：{set去重的方法（自带、这个结构输出的元素不能重复）}

const num = new Set([1,1,2,3,2,1]);

console.log(num); // 输出：{1, 2, 3} 重复的内容不会被输出

console.log(num.size); // 输出3，重复的内容不记为量为什么输出3？因为size方法是个数（不包含重复的）

// 利用扩展运算符，将set数据结果转换成数组形式

const newNum = [...num];

console.log(newNum); // 输出： [1, 2, 3]

遍历：

正在上传…重新上传取消

3）了解weakSet的基本使用:

正在上传…重新上传取消

7新增数据结构Map的使用和weakMap （使用为0%）

Map:

map和set的区别：map可以使用key来映射对象，set不能

正在上传…重新上传取消

Map的使用：

Map的常用方法：size/detete/clear/set/get/

// set ：设置“why"为”eee“---> key:value

// get(key) //通过key获取value

console.log(map2.get("why")) //"eee"

开发中唯一使用的map：将对象作为key

正在上传…重新上传取消

了解weakMap:

8（了解）es6响应式原理-vue3响应式的关系

正在上传…重新上传取消

ES6-ES12小结:

基础：类、let/const、模板字符串、解构+默认值、symbol属性

函数方法：类、

箭头函数

数组方法: (4条消息) js数组常用方法_on my-own的博客-优快云博客_js数组方法

es6新增的数据结构set方法和map方法

其他补充：浅拷贝……

Day4(复习)

前言：es7-es12略了

Promise、迭代器、async这些其实也是es6的知识

Proxy-Refect：

前言：proxy-Refect是什么呢？在那使用呢？

正在上传…重新上传取消

监听对象一：object.defineProperty（api）

面向对象（原型、原型链的一个api）同时也是vue2的响应式原理

正在上传…重新上传取消

复习一些obj.definProperty使用：

正在上传…重新上传取消

2监听对象二:Proxy

Proxy是Object.defineProperty的进阶( es6中新增的类)。同时也是vue3的响应式原理

正在上传…重新上传取消

1）proxy的具体使用:

正在上传…重新上传取消

1基本使用：类比obj.dp

正在上传…重新上传取消

2其他捕获器使用：

正在上传…重新上传取消

补充：obj.defineProperty和proxy作用和区别

// 3小结：obj.defineProperty和proxy作用和区别

//1》 obj-为了修改属性：可通过obj.defineProperty或proxy方法 {增删改查}

//2》区别：

// 通过Object.defineProperty会将数据属性描述符变成一个访问属性描述符（然后再进行操作修改）

// name: "why", // 数据属性描述符

// Object.defineProperty(obj, "name", {

// })

// 通过proxy代理就不会将一个对象中属性数据属性描述符变成一个访问属性描述符（直接通过捕获器实现）

2）proxy所有捕获器(了解)

正在上传…重新上传取消

3）proxy在函数中的调用方式：

正在上传…重新上传取消

3Refect （其实是java的知识-了解）

refect是什么？有什么用？---

比较object上的方法和reflect上的方法：

正在上传…重新上传取消

4vue2和vue3的响应式原理：

0)vue2和vue3原理

(4条消息) 三、【Vue3】——Vue2与Vue3响应式原理区别_YIFEI132的博客-优快云博客_vue2和vue3响应式的区别

(4条消息) 【前端面试题之Vue篇】Object.defineProperty()和Proxy来进行数据劫持有什么不同？_其实我叫二喵同学�的博客-优快云博客_前端面试proxy

1）响应式的实现：

正在上传…重新上传取消

2）优化响应式的实现-响应式依赖的收集

正在上传…重新上传取消

3）优化自动收集响应式对象：

正在上传…重新上传取消

4）最终优化重构类：

正在上传…重新上传取消

1（优化）数组-》类：

太长了p代码

2（优化）类-》自动监听对象类：

3（最终优化）自动监听对象类：-》重构

太长了p代码

5）vue2和vue3的响应式原理：

正在上传…重新上传取消

5小结：这章节掌握什么是proxy和object.defineProperty的区别，以及set/get，了解vue2-vue3的响应式原理即可（面试能回答即可）

Promise：（简写看vue2---手写promise）

0总结(面试题)

promsie理解：(5条消息) 前端Promise_yin_ping1101的博客-优快云博客_前端promise

promsie实战开发：你说你会Promise？那你解决一下项目中的这五个难题？ - 掘金 (juejin.cn)

1>理解什么是promise和基本使用

正在上传…重新上传取消

什么是异步

正在上传…重新上传取消

Es6之前异步操作处理：（了解）弊端大

正在上传…重新上传取消

1)什么是promise:

正在上传…重新上传取消

promise的作用：异步编程的使用----常见与网络请求、vue项目的异步编程（api+vuex+组件具体逻辑的编程）

2)Promise的基本使用：

Promise:原理如上同样是传递一个回调函数，但这个回调函数会立即执行，（上面的优化）

格式：

function requestData(url, ) {

return new Promise((resolve,reject)=>{

setTimeout(() => {

if (url === "coderwhy") {

// 成功

let names = ["abc", "cba", "nba"]

resolve(names) //1调用这个成功回调时

} else { // 否则请求失败

// 失败

let errMessage = "请求失败, url错误"

reject(errMessage) //2调用rejext失败回调时

}

}, 3000);

})

}

// main.js （简写。then）

const promise = requestData("coderwhy")

promise.then((res) => { //1.1当上面调用resolve时-返回

console.log("请求成功:", res) //promise.then(res)方法

}, (err) => {

console.log("请求失败:", err)

})

// // main.js (不简写)

// const promise = requestData("coderwhy")

// promise.then(() => {

// console.log("请求成功:", res)

// }

// promise .catch() => { //2.1调用rejext失败回调时-返回

// console.log("请求失败:", err) //promise.catch（）方法

// })

图解：

正在上传…重新上传取消

promise具体实现原理：

1成功回调：then（）方法

正在上传…重新上传取消

2失败回调：cath()方法

正在上传…重新上传取消

2>promise的回调和参数理解

关于promise回调的理解：（包括res/err）

res/err:形参

reject和resolve:也能传递参数—>通过res/err传递到异步

正在上传…重新上传取消

3>关于promise的其他补充

一：promise三个状态(了解)

正在上传…重新上传取消

二：promise的resolve参数

参数一：普通的值或者对象

resolve(参数)

* 1> 普通的值或者对象状态:pending -> fulfilled

正在上传…重新上传取消

参数二: 传入一个Promise

* 2> 传入一个Promise

* 那么当前的Promise的状态会由传入的(new)Promise来决定

* 相当于状态进行了移交

正在上传…重新上传取消

即：

正在上传…重新上传取消

参数三：传入一个对象

* 3> 传入一个对象, 并且这个对象有实现then方法

* 那么也会执行该then方法, 并且又该then方法决定后续状态

正在上传…重新上传取消

4>promise的类方法：

（0）promise的对象所有方法：

正在上传…重新上传取消

①：promise的对象方法.then

正在上传…重新上传取消

②：promise的对象方法.catch ：

正在上传…重新上传取消

③：promise的对象方法.finally：

正在上传…重新上传取消

④：promise类方法：resolve和reject：

正在上传…重新上传取消

小结：promise中的方法重要resolve/reject和 then/cath(其他了解)

5>手写promise和promise实战

简单总结手写Promise

一. Promise规范

Promises/A+

二. Promise类设计

class HYPromise {}

function HYPromise() {}

三. 构造函数的规划

class HYPromise {

   constructor(executor) {

// 定义状态

   // 定义resolve、reject回调

   // resolve执行微任务队列：改变状态、获取value、then传入执行成功回调

   // reject执行微任务队列：改变状态、获取reason、then传入执行失败回调

   

   // try catch

   executor(resolve, reject)

  }

}

四. then方法的实现

class HYPromise {

then(onFulfilled, onRejected) {

 // this.onFulfilled = onFulfilled// this.onRejected = onRejected

// 1.判断onFulfilled、onRejected，会给默认值

   

   // 2.返回Promise resolve/reject

   

   // 3.判断之前的promise状态是否确定

   // onFulfilled/onRejected直接执行（捕获异常） // 4.添加到数组中push(() => { 执行 onFulfilled/onRejected 直接执行代码})

    }

}

五. catch方法

class HYPromise {

   catch(onRejected) {

   return this.then(undefined, onRejected)

  }

}

六. finally

class HYPromise {

 finally(onFinally) {

   return this.then(() => {onFinally()}, () => {onFinally()})

}

七. resolve/reject

八. all/allSettled

核心：要知道new Promise的resolve、reject在什么情况下执行

all：

情况一：所有的都有结果
情况二：有一个reject

allSettled：

情况：所有都有结果，并且一定执行resolve

九.race/any

race:

情况：只要有结果

any:

情况一：必须等到一个resolve结果
情况二：都没有resolve，所有的都是reject

实战：略待补充

迭代器：（了解）

遍历容器

Es6语法遍历For(。。。。。of。。。。)

var arr = ['nick','freddy','mike','james'];

for(var item of arr){

console.log(item);

//nick ,freddy,mike,james

正在上传…重新上传取消

（了解）生成器

正在上传…重新上传取消

普通函数执行：

生成器控制函数执行：

正在上传…重新上传取消

生成器格式：

Function * ()

异常处理：略p代码：

一）异常处理

常见的方案：法1----3（了解）法四（掌握）

法123===法四的理解（法四的演变）

法一：

正在上传…重新上传取消

法二：

正在上传…重新上传取消

法三：（重点了解）

正在上传…重新上传取消

（了解即可）优化法三：（封装一个递归函数：实现自动调用）

正在上传…重新上传取消

优化三（使用npm包来实现函数调用）：npm install co

正在上传…重新上传取消

最终方案：法四（掌握）

// request.js

function requestData(url,) {

// 异步请求的代码会被放入到executor中

return new Promise((resolve, reject) => {

// 模拟网络请求

setTimeout(() => {

// 拿到请求的结果

resolve(url)

}, 3000);

})

}

// 第四钟方案:最终方案:async/await

async function getData() {

const res1 = await requestData("why")

const res2 = await requestData(res1 + "aaa")

const res3 = await requestData(res2 + "bbb")

const res4 = await requestData(res3 + "ccc")

console.log(res4);

}

getData()

二）错误处理：

01throw: “提示词“抛出异常

02最常用方式：

正在上传…重新上传取消

优化：

正在上传…重新上传取消

// 强调: 如果函数中已经抛出了异常, 那么后续的代码都不会继续执行了

03对抛出异常的处理

第一种：不处理抛出的异常

正在上传…重新上传取消

第二种：

正在上传…重新上传取消

真实开发：弹出异常

正在上传…重新上传取消

Async：

0async实战：

正在上传…重新上传取消

重点（res与返回值关系）res====return

1.Async 函数的执行：》》》》》调用一个promise函数（固定）

正在上传…重新上传取消

async函数和普通函数的区别一：返回值

2.1返回一个值（或没返回值默认）

正在上传…重新上传取消

2.2返回一个对象：return{ then:function(resolve,reject)}

正在上传…重新上传取消

2.3返回Promise

正在上传…重新上传取消

retrun===res

3．async函数和普通函数区别二:异常

普通函数异常：直接中断报错

Async函数异常：会作为异步函数promise的reject值（err）

正在上传…重新上传取消

4小结：

正在上传…重新上传取消

5async-await关键字使用：（复习）

正在上传…重新上传取消

表达式：跟generator异曲同工（原理一样）

1.表达式运行流程：（then的复习）

.Then(=>)这就是个格式问题：执行后面的代码

正在上传…重新上传取消

2跟上其他值

逻辑如res==return

Res==await

2.1常数：123

正在上传…重新上传取消

2.2对象{}è

正在上传…重新上传取消

2.3Promiseè

正在上传…重新上传取消

面试题：

promise和async

正在上传…重新上传取消

Day5:

进程和线程：

正在上传…重新上传取消

例如操作系统：

正在上传…重新上传取消

Mainsrcipt、微任务和宏任任务：（事件队列）

在了解什么是微任务和宏任务之前我们需要了解js是怎么执行函数，以及有异步操作怎么执行。

例如：

正在上传…重新上传取消

（一）事件队列：

mainSript

宏任务：

1. ajax 2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）

微任务：

1. Promise (aysnc) 2process.nextTick（Node.js） 3. Object.observe（已废弃；Proxy 对象替代）4. MutaionObserver

（二）宏任务、微任务是怎么执行的？

先执行mainSirpte—异步代码放队列中--

在执行任何宏任务之前，都必须保证微任务清空

正在上传…重新上传取消

面试题：（原理：宏任务之前微任务必须清空，宏任务包多个微任务

正在上传…重新上传取消

模块化：

正在上传…重新上传取消

CommonJS:导出与导入

正在上传…重新上传取消

// 使用另外一个模块导出的对象, 那么就要进行导入 require

// const { aaa, bbb } = require("./why.js")

const { name, age, sum } = require("./why.js")

// console.log(aaa)

// console.log(bbb)

导入

console.log(name)

console.log(age)

console.log(sum(20, 30))

EsModule:import导出导入：

第一种使用：html和js

Html文件：引用加上type属性

Foo.js

import { name, age } from "./foo.js"

console.log(name)

console.log(age)

第二种使用：js和js（improt、exprot）

最常用：

// 1.第一种方式: export 声明语句

// export const name = "why"

// export const age = 18

// export function foo() {

// console.log("foo function")

// }

// export class Person {

// }

// 2.第二种方式: export 导出和声明分开

const name = "why"

const age = 18

function foo() {

console.log("foo function")

}

export {

name,

age,

foo

}

// 1.导入方式一: 普通的导入

import { name, age, foo } from "./foo.js"

console.log(foo.name)

console.log(foo.age)

foo.foo()

const name = "main"

console.log(name)

console.log(age)

常见工具函数的导入导出方式：

思路：utils工具：其他具体工具à导入index。Jsà导出àmain。Jsà html

正在上传…重新上传取消

常用导出方式2

正在上传…重新上传取消

html

Npm包管理工具：npmàvue2(了解即可-其他会使用即可)

前言：webpack等都需要npm（但一般在vuecli使用）

正在上传…重新上传取消

使用： npm-init

npm-init-y

在vuecli中添加npm (vue create ..)

效果

正在上传…重新上传取消

属性:

正在上传…重新上传取消

基本命令：(掌握)

全局与项目

正在上传…重新上传取消

开发时依赖和开发安装时依赖

正在上传…重新上传取消

小结：npm/yan/cnpm

Cookie-Bom-dom：

1Storage

认识

正在上传…重新上传取消

存储的位置

正在上传…重新上传取消

Storage属性：

本地存储和会话存储的区别:

正在上传…重新上传取消

Storage属性：

正在上传…重新上传取消

使用：

小结：Storage的封装（工具类的封装）

（了解）后端：数据库处理（）增删减查

正在上传…重新上传取消

IndexDB：api使用

正在上传…重新上传取消

2cookie

Cookie的基本使用：(演示运行cookie-server服务器)node index.js

Cookie属性

正在上传…重新上传取消

domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。

3BOM：

具体js基础

认识：

正在上传…重新上传取消

Window的api（了解）

正在上传…重新上传取消

具体api查官方文档: Window - Web API 接口参考 | MDN (mozilla.org)

具体看js基础：

其他属性：

location属性

正在上传…重新上传取消

Hisotry属性：

// 跳转(不刷新网页)

history.pushState

正在上传…重新上传取消

4dom(even)：

具体看js基础

正在上传…重新上传取消

所有的架构都是一些小节点组成的à节点树（bignode.js）

官网：Node - Web API 接口参考 | MDN (mozilla.org)

evebTarget->Node

关于node的具体操作：(节点操作)

1常见属性:

nodeName

nodeType

nodeValue

正在上传…重新上传取消

2常见方法：

增删……

AppendChild()

cloneNode()

createElement()

。。。。。。

更多查官网

具体Dom(重点)Document：查文档

正在上传…重新上传取消

防抖函数和节流函数：

防抖：

正在上传…重新上传取消

节流：

正在上传…重新上传取消

疑难点：

原型链

（了解一下）错法：

将父类的原型赋值给子类

问题：（）当子类上传functionè 会上传到父类的原型上（x）

当多个子类时传递相同的方法不同的函数体时会冲突

正在上传…重新上传取消

拷贝：

浅拷贝：一人两号，本质上还是一个人

深拷贝：克隆，两人两号

扩展和补充：

Json

正在上传…重新上传取消

格式：

正在上传…重新上传取消

深拷贝和浅拷贝—事件总线：

未完待续。。。。。。。。。。。。。。。。。。

js高级（coderwhy之个人笔记）

Day1

闭包：

This:

箭头函数：

Day2对象

作用域：

With:语句：（了解一下）略

面向对象：

Day3：es6

Es6语法(上）:类

Es6语法（中）： 字面量/let、、

Es6语法（下）： 字符串模板+es6函数（箭头函数）

ES6-ES12小结:

Day4(复习)

Proxy-Refect：

Promise：（简写看vue2---手写promise）

迭代器：（了解）

异常处理：略p代码：

Async：

面试题：

Day5:

进程和线程：

Mainsrcipt、微任务和宏任任务：（事件队列）

模块化：

Npm包管理工具：npmàvue2(了解即可-其他会使用即可)

Cookie-Bom-dom：

防抖函数和节流函数：

疑难点：

扩展和补充：

Json

深拷贝和浅拷贝—事件总线：

Js高级（一周哦）

Day1

闭包：

This:

箭头函数：

Day2对象

作用域：

With:语句：（了解一下）略

面向对象：

Day3：es6

Es6语法(上）:类

Es6语法（中）： 字面量/let、、

Es6语法（下）： 字符串模板+es6函数（箭头函数）

ES6-ES12小结:

Day4(复习)

Proxy-Refect：

Promise：（简写看vue2---手写promise）

迭代器：（了解）

异常处理：略p代码：

Async：

面试题：

Day5:

进程和线程：

Mainsrcipt、微任务和宏任任务：（事件队列）

模块化：

Npm包管理工具：npmàvue2(了解即可-其他会使用即可)

Cookie-Bom-dom：

防抖函数和节流函数：

疑难点：

扩展和补充：

Json

深拷贝和浅拷贝—事件总线：

Es6语法（中）：字面量/let、、

Es6语法（下）：字符串模板+es6函数（箭头函数）

Es6语法（中）：字面量/let、、

Es6语法（下）：字符串模板+es6函数（箭头函数）