看看这些前端面试题，带你搞定高频知识点（八）

function foo(){
	var a=2;
	function bar(){ //覆盖foo()内部作用域的闭包
		console.log(a++);
	}
	return bar;
}
var bar = foo(); //foo执行创建一个执行上下文环境，由于bar引用了其内部变量，也就是bar持有foo本次执行上下文的引用，foo本次的执行上下文不会被销魂
bar();//2
bar();//3
var fn = foo(); //foo执行创建一个新的执行上下文环境，fn持有了foo本次执行上下文的引用
fn();//2

//使用形式，绑定时候throttle函数就会执行,所以this是window
window.addEventListener('scroll',throttle(()=>{},500))


function throttle(callback,wait){
	let pre = new Date();
	//这里的this是window
	return function(...args){
		//这里的this是绑定的DOM
		const now = new Date();
		if(now-pre>=wait){
			callback.apply(this,args);
			pre = now;
		}
	}
}



function throttle(callback,delay){
	let timer = null;
	//这里的this是window
	return function(...args){
		if(timer){//说明已经触发了
			return;
		}
		timer = setTimeout(()=>{
			callback.apply(this,args);
			timer = null;
		},delay)
	}
}

function debounce(callback,delay){
	let timer = null;
	//这里的this是window
	return function(){
		if(timer){//说明已经触发了
			clearTimeout(timer);
		}
		timer = setTimeout(()=>{
			callback.apply(this,arguments);
			timer = null;
		},delay)
	}
}

//立即执行
function debounce(func,delay) {
  let timeout;
  return function (...args) {
      if (timeout) clearTimeout(timeout);
      const callNow = !timeout;
      timeout = setTimeout(() => {
          timeout = null;
      }, delay)
      if (callNow) func.apply(this, args)
  }
}

//subject 被观察者
class Subject {
  constructor() {
    this.observerList = [];
  }
  addObserver(observer) {
    this.observerList.push(observer);
  }
  removeObserver(observer) {
    const index = this.observerList.findIndex(o => o.name === observer.name);
    this.observerList.splice(index, 1);
  }
  notifyObservers(message) {
    const observers = this.observeList;
    observers.forEach(observer => observer.notified(message));
  }
}

//Observer 观察者
class Observer {
  constructor(name, subject) {
    this.name = name;
    if (subject) {
      subject.addObserver(this);
    }
  }
  notified(message) {
    console.log(this.name, 'got message', message);
  }
}

//使用
const subject = new Subject();
const observerA = new Observer('observerA', subject);
const observerB = new Observer('observerB');
subject.addObserver(observerB);
subject.notifyObservers('Hello from subject');
subject.removeObserver(observerA);
subject.notifyObservers('Hello again');

//事件调度中心
class PubSub {
	  constructor() {
        // 存储格式: warTask: [], routeTask: []
        // {订阅事件:[回调1,回调2...],订阅事件2:[回调1,回调2..]}
        this.events = {}
   	  }
   	  // 订阅方法 订阅哪个类型type就把对应的回调函数放入
      subscribe(type, cb) { 
       	 if (!this.events[type]) {
            this.events[type] = [];
        }
        this.events[type].push(cb);
     }
     // 发布方法
    publish(type, ...args) {
        if (this.events[type]) {
            this.events[type].forEach(cb => cb(...args))
        }
    }
	// 取消订阅方法 的某一个类型的某一个回调
    unsubscribe(type, cb) {
        if (this.events[type]) {
            const cbIndex = this.events[type].findIndex(e=> e === cb)
            if (cbIndex != -1) {
                this.events[type].splice(cbIndex, 1);
            }
        }
        if (this.events[type].length === 0) {
            delete this.events[type];
        }
    }
}

//测试
let pubsub = new PubSub();
//订阅
pubsub.subscribe('warTask', function (taskInfo){
    console.log("宗门殿发布战斗任务，任务信息:" + taskInfo);
})
pubsub.subscribe('routeTask', function (taskInfo) {
    console.log("宗门殿发布日常任务，任务信息:" + taskInfo);
});
pubsub.subscribe('allTask', function (taskInfo) {
    console.log("宗门殿发布五星任务，任务信息:" + taskInfo);
});
//发布
pubsub.publish('warTask', "猎杀时刻");
pubsub.publish('allTask', "猎杀时刻");
pubsub.publish('routeTask', "种树浇水");
pubsub.publish('allTask', "种树浇水");

//循环引用:b中引用了c，c中又有b
obj = {
b:['a','f'],
c:{h:20}
}
obj.b.push(obj.c);
obj.c.j = obj.b;
b:['a','f',{h:20,j:[]}],
c:{h:20,j:['a','f',[]]}
function deepClone1(target) {
    //通过数组创建JSON格式的字符串
    let str = JSON.stringify(target);
    //将JSON格式的字符串转换为JS数据
    let data = JSON.parse(str);
    return data;
}

//map存放已经拷贝过的对象，key为需要拷贝的对象，value为拷贝后的对象
function deepClone(target,map=new Map()){
	//1.判断是否是引用类型
	if(typeof target === 'object' && target !==null ){
		if(map.has(target))return map.get(target); //说明已经拷贝过了
		let isArr = Array.isArray(target);
		let res = isArr?[]:{};
		map.set(target,res)
		if(isArr){//拷贝的是数组
			target.forEach((item,index) => {
				res[index] = deepClone(item,map);
			});	
		}else{//拷贝的是对象
			Object.keys(target).forEach(key=>{
				res[key]=deepClone(target[key],map);
			})
		} 
		return res; //返回的是一个数组或对象
	}else{
		return target;
	}
}


//测试
console.log(deepClone([1,[1,2,[3,4]]]))