看看這些前端面試題，帶你搞定高頻知識點（八）

let answer;
function fn(){
	//如果此時沒有將變數變數提升到這裡，answer應該取外層answer的值
	console.log(answer); //Uncaught ReferenceError: Cannot access 'answer' before initialization
	let answer=42;
}

//變數提升先於函數提升,提升後被函數宣告function覆蓋,所以就算換了順序也是function
function a(){
}
var a ;
console.log(typeof a); //function


var f1 = function () {
    console.log(1);
}
function f1 () {
    console.log(2);
}
f1() ; //1
//變數提升後
var f1;//變數提升
function f1(){};//函數提升
f1 = function () {
    console.log(1);
}
f1() ;

var a = 10;  
function aaa() {
    alert(a);
}
function bbb() {
    var a = 20;
    aaa();
}
bbb();

var foo = 1;
function bar () {
    console.log(foo);
    var foo = 10;
    console.log(foo);
}

bar();

//變數提升後
var foo = 1;
function bar () {
	var foo = undefined;
    console.log(foo); //undefined
    foo = 10;
    console.log(foo);//10
}

bar();

(function(){
  var a = 1;
  console.log('內部a:', a);
})();

var __const = function __const(data, value) {
	this.data = value // 把要定義的data掛載到某個物件，並賦值value
	Object.defineProperty(this，data, { // 利用Object.defineProperty的能力劫持當前物件，並修改其屬性描述符
		enumerable: false,
		configurable: false,
		get: function () {
			return value
		},
		set: function (data) {
		if (data !== value) { // 當要對當前屬性進行賦值時，則丟擲錯誤！
			throw new TypeError('Assignment to constant variable.')	
		} else {
			return value
		}
		}
		})
	}
	//然後和立即執行函數結合
	(function(){
	 	var obj = {}
		_const.call(obj,'a',10)
	})()
	//當執行完畢後，全域性上就不會有obj，也不會有obj.a這個變數，進而實現了塊級作用域的功能

function a(){
  a.name ='aaa';
  return this.name;
}
var b = {
  a,
  name:'bbb',
  getName:function(){
    return this.name;
  }
}
var c =b.getName;
console.log(a()); //this指向window,window上沒有name,所以輸出undefined
console.log(b.a()); //b.a 是function,b呼叫a函數，所以this指向b，所以輸出'bbb'
console.log(b.getName);//通過b呼叫getName，所以getName指向b,所以輸出'bbb'
console.log(c());//c是function，this指向window，window上沒有name,所以輸出undefined

//從第二個引數開始依次傳入，所以接收時使用rest引數
Function.prototype.call=function(obj,...args){
	obj = obj || window;
	args = args ? args : [];
	//給obj新增一個獨一無二的屬性以免覆蓋原有屬性
    const key = Symbol()
	obj[key] = this;
	const res = obj[key](...args);
	delete obj[key];
	return res;	
}

Function.prototype.apply=function(obj,args){
	obj = obj || window;
	args = args ? args : [];
	//給obj新增一個獨一無二的屬性以免覆蓋原有屬性
    const key = Symbol()
	obj[key] = this;
	const res = obj[key](...args);
	delete obj[key];
	return res;	
}

Function.prototype.bind=function(obj,...args){
	obj = obj || window;
	args = args ? args : [];
	return (...args2) => {
		return this.apply(obj,[...args,...args2])
	}
}

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;
		}
	}
}


/*
使用setTimeout實現
第一次需要延遲delay後觸發
*/
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]]]))