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=>{})