new操作符具体做了什么
- 创建一个新对象
- 新对象绑定原型
- 将构造函数的this指向新对象
谈下事件循环机制
- js运行代码进入执行执行栈
- 遇到setTimeout等内容会进入宏队列
- 遇到Promise等产生的异步会进入微任务队列
- 当前宏任务执行完成后会清空执行微任务队列
- 然后进入下一次循环去把宏任务队列的任务取出一个去执行
实现一个promise
核心三要点
- promise一共三个状态 pending resolved rejected 一旦更改不可逆转
- then catch会返回一个新的promise
- then catch在pending状态下会把回调存在队列中
class Promise {
value;
constructor(fn){
this.status = 'pending'
this.resolveCallbacks = []
this.rejectCallback = []
const handleResolve = (val) => {
if(this.stsatus !== 'pending)return;
this.value = val
this.status = 'resolved'
this.resolveCallbacks.forEach(fn=>fn())
}
const handleReject = (val) => {
if(this.stsatus !== 'pending)return;
this.value = val
this.status = 'rejected'
this.rejectCallback.forEach(fn=>fn())
}
try{
fn(handleResolve,handleReject)
}catch(error){
handleReject(error)
}
}
then(resolveFn, rejectFn){
const _resolveFn = typeof resolveFn === 'function' ? resolveFn : v=>v
const _rejectFn = typeof rejectFn === 'function' ? rejectFn : v=> throw v
return Promise((resolve, reject)=>{
try{
if(this.status==='resolve'){
connst v = _resolveFn(this.value)
resolve(v)
}
if(this.status==='rejected'){
const v = _rejectFn(this.value)
reject(v)
}
if(this.status==='pending'){
this.resolveCallbacks.push(()=>{
const v = _resolveFn(this.value)
resolve(v)
})
this.rejectCallback.push(_rejectFn)
}
}catch(error){
reject(error)
}
})
}
catch(rejectFn){
return this.then(null, rejectFn)
}
}
说下generator原理
- 执行generator函数放回的是一个对象， 里面有next之类的方法
- next 主要是获取value值， 获取value的方法， 主要通过swich/case
- generator会有一个储存上下文的对象，
- 第一次命中第一个case， 然后修改对象里的值，返回yield后面的值， 下次执行就会命中第二个case
介绍下盒子模型
- 盒模型主要分为，content、pading、border、和margin
- 垂直方向margin会重叠
- bfc 不会发生margin重叠
- flot也会参与计算高度
