JS底层原理方向
this指向问题
谁调用就指向谁,就近原则,且箭头函数没有作用域,指向上一级
// 谁调用,指向谁
const obj = {
name:'flx',
myFn(){
console.log('obj',this)
}
}
obj.myFn()
// 谁调用,指向谁,就近原则
const obj2 = {
name:'flx',
obj3:{
name:'cxy',
fn(){
console.log(this)
}
}
}
obj2.obj3.fn()
// 箭头函数this没有作用域,指向上一级
var arrowId = 10;
function arrowFn(){
setTimeout(()=>{
console.log(this.arrowId)
},1000)
}
arrowFn({arrowId:100}) // 此时打印的是10
// 改变箭头函数的指向
arrowFn.apply({arrowId:100}) // 此时打印的是100
发布订阅模式
就像微信公众号,大家订阅了A公众号,当A公众号发布文章的时候,大家会接收到文章。
- 需要一个
缓存列表
,用于缓存订阅的方法事件 - 需要
订阅方法
和移除订阅
的方法,两个参数分别是key和function
发布
方法,从列表中找到对应的方法并执行。
class Observer {
constructor() {
// 消息队列
this.message = {};
}
// 向消息队列添加内容'$on'
$on(type, callback) {
// 判断有没有这个属性(时间类型)
if (!this.message[type]) {
// 如果没有这个属性,就初始化一个空的数组
this.message[type] = [];
}
// 如果有这个属性,就往他的后面push一个新的callback
this.message[type].push(callback);
}
// 删除消息队列里的内容
$off(type, callback) {
// 判断是否有订阅,即消息队列里是否有type这个类型的事件,没有的话就直接return
if (!this.message[type]){
return;
}
// 判断是否有callback这个参数
if (!callback) {
// 如果没有callback,就是删掉整个事件
this.message[type] = undefined;
}
// 如果有callback,就仅仅删除掉callback这个消息(过滤掉这个方法)
this.message[type] = this.message[type].filter((item) => item !== callback);
}
// 触发消息队列里的内容
$emit(type) {
//判断是否有订阅
if(!this.message[type]){
return;
}
//如果有订阅,那就对‘type’事件做一个轮询(for循环)
this.message[type].forEach(item=>{
//挨个执行每一个消息的回调函数callback
item();
})
}
}
const myobs = new Observer();
myobs.$on('buy', handler);
function handler(){
console.log('handler方法执行了');
}
setTimeout(()=>{
myobs.$emit('buy');
},2000)
手写Promise丐版
function MyPromise(executer){
//1.定义所需要的变量
let self = this;
// pendding fullfilled rejected
self.status = 'pendding';
// 接收resolve()的值
self.successValue = null;
// 接受reject()的值
self.failValue = null;
// 2. promise里面的两个回调函数 resolve、reject
function myResolve(value){
self.successValue = value
self.status = 'fullfilled';
}
function myReject(value){
self.failValue = value
self.status = 'rejected';
}
// 3. 添加执行器
executer(myResolve,myReject)
}
// 4 把then方法,挂载到原型链上
MyPromise.prototype.myThen = function(onFullfilled,onRejected){
let self = this;
console.log('执行了mythen里面的方法')
onFullfilled(self.successValue)
onRejected(self.failValue)
}
let testMyPromise = new MyPromise((myResolve,myReject)=>{
console.log('testMyPromise执行了')
myResolve('myResolve参数传到then里面')
})
testMyPromise.myThen(resp=>{
console.log('testMyPromise.myThen')
console.log(resp)},
err=>{})