一、JS理论内容
01.事件循环机制
02.JS闭包
// 1.什么是闭包?
外层函数的作用域 + 内层函数 = 闭包
// 优点
(1)可以共享作用域。
(2)可以解决一些问题。
// 缺点
(1)内存泄漏(仅限于ie浏览器,其他浏览器不存在内存泄漏。)
(2)占用内存资源。
03.原型链
1. 什么是原型链?
// 函数也是对象
(1) 构造函数既是一个函数,也是一个对象,Function是c++提供的函数,用于创建构造函数用的。(Function理解为创世神一般的存在)
// 只要是个对象,就有__proto__属性
(2) 每个对象都有一个原型对象,通过该'对象.__proto__'可以访问的到原型对象。
// 只要是个函数,就有prototype属性
(3) 每个函数有一个原型对象,通过'函数名.prototype'。(原型对象: 就是创造者的原型对象)
2. 一张图看懂原型链
3. 原型链使用场景
// 1.如果想让所有对象,都拥有同一个属性或方法,可以这样做。
Object.prototype.myMethod = function() {
console.log("该方法让所有调用者共享")
}
************************************************************************************
// 2.如果想让所有的函数,同时拥有一个方法,可以这样做:
Function.prototype.bind = function() {
console.log("这就是为什么函数能调用bind方法")
}
************************************************************************************
// 3.创建一个干净的对象,即:一个没有原型的对象。(调用Object.create(原型对象, [属性组成的对象]))
const obj = Object.create(null)
const user = {
name: '思密达',
age: 15
}
Object.serPrototyOf(user, obj) // 含义:把对象user的原型对象设置为obj。
************************************************************************************
// 4.一次性往原型上添加多个属性/方法
Star.prototype = {
constructor: Star, // 看过来,需要将原型对象的constructor属性加回去,才能保证原型链不断开。
sing: function(){},
dance: function(){}
}
03.Promise
1. Promise的机制
两个阶段,三个状态(单词pending、fulfilled、rejected要背出来)
2. Promise的链式调用规则
(1) 情况1:pro1执行完,pro2对pro1进行了处理,就看pro2自身的处理结果。
(2) 情况2:pro1执行完,但是pro2没有对pro1进行处理,那么pro2的状态和pro1一致。
3. Promise常用api
方法名 | 含义 |
---|---|
Promise.resolve(data) | 直接返回一个完成状态的任务 |
Promise.reject(reason) | 直接返回一个拒绝状态的任务 |
Promise.all(任务数组) | 必须全部成功,结果才是成功。但凡有一个没成功,最终就是失败。 |
Promise.any(任务数组) | 只要有一个成功,结果就是成功。只有全部失败,结果才是失败。 |
Promise.allSettled(任务数组) | 必须全部是已决状态,不能是pending状态,但凡有一个是pending,结果就是失败。 |
Promise.race(任务数组) | 看任务数组中,不管对错,哪一个先有结果,最终状态和先有结果的那个状态一致。 |
4. async和await(语法糖)
1. 你是如何理解Promise?(面试)
(1)先谈回调函数:在没有Promise之前,是用回调函数来解决异步操作的。
缺点: 不是真正的异步代码,存在回调地狱问题。
(2)再谈Promise的优缺点。
优点:是真正的异步代码,不存在回调地狱问题。
2. Promise如何捕获错误?(面试)
(1) 使用catch方法。
(2) 使用 try-catch机制。
3. Promise的all和race方法有什么区别?(面试)
4. setTimeout、Promise、async/await有什么区别?
setTimeout是宏任务,Promise是微任务,async/await是Promise+generator的语法糖。
04.new操作符发生了什么
// 原理
function create(fn, ...args) {
// 先创建一个空对象。
let obj = {}
// 把空对象的原型,指向构造函数的原型。
Object.setPrototype(obj, fn.prototype)
// 把空对象作为构造函数的上下文。(改变this指向)
let result = fn.apply(obj, args)
// 对构造函数有返回值的处理判断
return result instanceof Object ? result : obj
}
// 举例:
function Foo() {
this.name = '张三'
return 123
}
console.log( new Foo() ) // 空
function Foo() {
this.name = '张三'
return {1, 2, 3}
}
console.log( new Foo() ) // {1, 2, 3}
function Foo() {
this.name = '张三'
return [1, 2, 3]
}
console.log( new Foo() ) // [1, 2, 3]
05.回流、重绘
1. 什么是回流? 就是重新计算DOM节点的大小、位置。(耗费性能)
// 1.引起回流的情况
(1)修改DOM的几何信息的大小、位置。(例如:width、height、margin、padding)
(2)读取DOM的几何信息的大小、位置。(例如:clientWidth、clientHeight)
// 2.浏览器对回流的优化:如果发生了连续回流,就只会回流一次。
dom.style.width = '100px'
dom.style.height = '200px'
dom.s