在面試中，常常會遇到一些手寫XXX之類的面試題，因此好好總結一下，對于鞏固我們的原生js的基礎是非常必要的。
盡管在網上已經有了非常多的總結文章，但在我看來有一個普遍的問題，那就是把原理性的東西過于復雜化了。如果站在面試官的角度，他的目的是在最短的時間內考察出面試者對于JS語言的理解程度，但是在看了網站的諸多總結文章后我發現其中的代碼有很大一部分是做意義不大的操作，比如實現一個簡單的防抖，只要是核心的流程展示即可，至于其他的一些等模式則沒有必要再去深挖，一大堆的if-else讓人看上去也眼花繚亂，甚至誤導別人直接去背代碼，另外，核心的邏輯都能展示出來，再去橫向的實現其他的類似情況恐怕也不是什么問題了。
在以下的整理中，建議大家先照的核心要點自己寫一遍，然后對照下面的代碼，復習效果更好。本文的目的就在于以最簡潔的代碼幫你從第一性原理的角度理解api的內部運作流程，凡是對于我們理解api沒有幫助的的邊界情況都不做處理。
一、用ES5實現數組的map方法
核心要點:
1.回調函數的參數有哪些，返回值如何處理。
2.不修改原來的數組。
Array.prototype.MyMap = function(fn, context){
var arr = Array.prototype.slice.call(this);//由于是ES5所以就不用...展開符了
var mAppedArr = [];
for (var i = 0; i < arr.length; i++ ){
mappedArr.push(fn.call(context, arr[i], i, this));
}
return mappedArr;
}
二、用ES5實現數組的reduce方法
核心要點:
1、初始值不傳怎么處理
2、回調函數的參數有哪些，返回值如何處理。
Array.prototype.myReduce = function(fn, initialValue) {
var arr = Array.prototype.slice.call(this);
var res, startIndex;
res = initialValue ? initialValue : arr[0];
startIndex = initialValue ? 0 : 1;
for(var i = startIndex; i < arr.length; i++) {
res = fn.call(null, res, arr[i], i, this);
}
return res;
}
三、實現call/apply
思路: 利用this的上下文特性。
//實現apply只要把下一行中的...args換成args即可
Function.prototype.myCall = function(context = window, ...args) {
let func = this;
let fn = Symbol("fn");
context[fn] = func;
let res = context[fn](...args "fn");//重點代碼，利用this指向，相當于context.caller(...args)
delete context[fn];
return res;
}
四、實現Object.create方法(常用)
function create(proto) {
function F() {};
F.prototype = proto;
F.prototype.constructor = F;
return new F();
}
五、實現bind方法
核心要點:
1.對于普通函數，綁定this指向
2.對于構造函數，要保證原函數的原型對象上的屬性不能丟失
Function.prototype.bind = function(context, ...args) {
let self = this;//謹記this表示調用bind的函數
let fBound = function() {
//this instanceof fBound為true表示構造函數的情況。如new func.bind(obj)
return self.apply(this instanceof fBound ? this : context || window, args);
}
fBound.prototype = Object.create(this.prototype);//保證原函數的原型對象上的屬性不丟失
return fBound;
}
大家平時說的手寫bind，其實就這么簡單：）
六、實現new關鍵字
核心要點:
- 創建一個全新的對象，這個對象的__proto__要指向構造函數的原型對象執行構造函數返回值為object類型則作為new方法的返回值返回，否則返回上述全新對象
function myNew(fn, ...args) {
let instance = Object.create(fn.prototype);
let res = fn.apply(instance, args);
return typeof res === 'object' ? res: instance;
}
七、實現instanceof的作用
核心要點：原型鏈的向上查找。
function myInstanceof(left, right) {
let proto = Object.getPrototypeOf(left);
while(true) {
if(proto == null) return false;
if(proto == right.prototype) return true;
proto = Object.getPrototypeof(proto);
}
}
八、實現單例模式
核心要點: 用閉包和Proxy屬性攔截
function proxy(func) {
let instance;
let handler = {
constructor(target, args) {
if(!instance) {
instance = Reflect.constructor(fun, args);
}
return instance;
}
}
return new Proxy(func, handler);
}
九、實現數組的flat
方式其實很多，之前我做過系統整理，有六種方法，請參考：
JS數組扁平化(flat)方法總結[1]
十、實現防抖功能
核心要點:
如果在定時器的時間范圍內再次觸發，則重新計時。
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
十一、實現節流功能
核心要點:
如果在定時器的時間范圍內再次觸發，則不予理睬，等當前定時器完成，才能啟動下一個定時器。
const throttle = (fn, delay = 500) => {
let flag = true;
return (...args) => {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, args);
flag = true;
}, delay);
};
};
十二、實現深拷貝
以下為簡易版深拷貝，沒有考慮循環引用的情況和Buffer、Promise、Set、Map的處理，如果一一實現，過于復雜，面試短時間寫出來不太現實，如果有興趣可以去這里深入實現:
深拷貝終極探索[2]。
const clone = parent => {
// 判斷類型
const isType = (target, type) => `[object ${type}]` === Object.prototype.toString.call(target)
// 處理正則
const getRegExp = re => {
let flags = "";
if (re.global) flags += "g";
if (re.ignoreCase) flags += "i";
if (re.multiline) flags += "m";
return flags;
};
const _clone = parent => {
if (parent === null) return null;
if (typeof parent !== "object") return parent;
let child, proto;
if (isType(parent, "Array")) {
// 對數組做特殊處理
child = [];
} else if (isType(parent, "RegExp")) {
// 對正則對象做特殊處理
child = new RegExp(parent.source, getRegExp(parent));
if (parent.lastIndex) child.lastIndex = parent.lastIndex;
} else if (isType(parent, "Date")) {
// 對Date對象做特殊處理
child = new Date(parent.getTime());
} else {
// 處理對象原型
proto = Object.getPrototypeOf(parent);
// 利用Object.create切斷原型鏈
child = Object.create(proto);
}
for (let i in parent) {
// 遞歸
child[i] = _clone(parent[i]);
}
return child;
};
return _clone(parent);
};
