點擊上方 "程序員小樂"關(guān)注公眾號, 星標或置頂一起成長
每天凌晨00點00分, 第一時間與你相約
每日英文
As we grow up, we don't lose friends. We just learn who the real ones are.
隨著年齡的增長周蹭，我們并不是失去了一些朋友擦酌，而是我們懂得了誰才是真正的朋友惰瓜。
每日掏心話
一直以為玲躯，有些東西是永遠無法從生命中剝離的沟饥。仿佛一個厚厚的繭秒裕，當我們試著撕開那層膠著的束縛時瞒渠，總是不斷退卻技潘。
來自：神三元 | 責(zé)編：樂樂
正文
在面試中，常常會遇到一些手寫XXX之類的面試題分飞，因此好好總結(jié)一下悴务，對于鞏固我們的原生js的基礎(chǔ)是非常必要的。
盡管在網(wǎng)上已經(jīng)有了非常多的總結(jié)文章譬猫，但在我看來有一個普遍的問題讯檐，那就是把原理性的東西過于復(fù)雜化了。如果站在面試官的角度染服，他的目的是在最短的時間內(nèi)考察出面試者對于JS語言的理解程度别洪，但是在看了網(wǎng)站的諸多總結(jié)文章后我發(fā)現(xiàn)其中的代碼有很大一部分是做意義不大的操作，比如實現(xiàn)一個簡單的防抖柳刮，只要是核心的流程展示即可挖垛，至于其他的一些等模式則沒有必要再去深挖，一大堆的if-else讓人看上去也眼花繚亂秉颗，甚至誤導(dǎo)別人直接去背代碼痢毒，另外，核心的邏輯都能展示出來站宗，再去橫向的實現(xiàn)其他的類似情況恐怕也不是什么問題了闸准。
在以下的整理中，建議大家先照的核心要點自己寫一遍梢灭，然后對照下面的代碼夷家，復(fù)習(xí)效果更好。本文的目的就在于以最簡潔的代碼幫你從第一性原理的角度理解api的內(nèi)部運作流程敏释，凡是對于我們理解api沒有幫助的的邊界情況都不做處理库快。
一、用ES5實現(xiàn)數(shù)組的map方法
核心要點:
1.回調(diào)函數(shù)的參數(shù)有哪些钥顽，返回值如何處理义屏。
2.不修改原來的數(shù)組。
二、用ES5實現(xiàn)數(shù)組的reduce方法
核心要點:
1闽铐、初始值不傳怎么處理
2蝶怔、回調(diào)函數(shù)的參數(shù)有哪些，返回值如何處理兄墅。
三踢星、實現(xiàn)call/apply
思路: 利用this的上下文特性。
四隙咸、實現(xiàn)Object.create方法(常用)
function create(proto) { function F() {}; F.prototype = proto; return new F(); }
五沐悦、實現(xiàn)bind方法
核心要點:
1.對于普通函數(shù)，綁定this指向
2.對于構(gòu)造函數(shù)五督，要保證原函數(shù)的原型對象上的屬性不能丟失
大家平時說的手寫bind藏否，其實就這么簡單：）
六、實現(xiàn)new關(guān)鍵字
核心要點:
創(chuàng)建一個全新的對象充包，這個對象的proto要指向構(gòu)造函數(shù)的原型對象
執(zhí)行構(gòu)造函數(shù)
返回值為object類型則作為new方法的返回值返回副签，否則返回上述全新對象
七、實現(xiàn)instanceof的作用
核心要點：原型鏈的向上查找误证。
八继薛、實現(xiàn)單例模式
核心要點: 用閉包和Proxy屬性攔截
九、實現(xiàn)數(shù)組的flat
方式其實很多愈捅，之前我做過系統(tǒng)整理，有六種方法慈鸠，請參考：
JS數(shù)組扁平化(flat)方法總結(jié)
十蓝谨、實現(xiàn)防抖功能
核心要點:
如果在定時器的時間范圍內(nèi)再次觸發(fā)，則重新計時青团。
十一譬巫、實現(xiàn)節(jié)流功能
核心要點:
如果在定時器的時間范圍內(nèi)再次觸發(fā)，則不予理睬督笆，等當前定時器完成芦昔，才能啟動下一個定時器。
十二娃肿、用發(fā)布訂閱模式實現(xiàn)EventEmit
參考我的另一篇文章:
基于"發(fā)布-訂閱"的原生JS插件封裝中的手寫發(fā)布訂閱部分咕缎。
十三、實現(xiàn)深拷貝
以下為簡易版深拷貝料扰，沒有考慮循環(huán)引用的情況和Buffer凭豪、Promise、Set晒杈、Map的處理嫂伞，如果一一實現(xiàn)，過于復(fù)雜，面試短時間寫出來不太現(xiàn)實帖努，如果有興趣可以去這里深入實現(xiàn):
深拷貝終極探索撰豺。
十四、實現(xiàn)Promise
重點難點拼余，比較復(fù)雜污桦，請參考我的另一篇步步拆解文章:
我如何實現(xiàn)Promise
十五、使用ES5實現(xiàn)類的繼承效果
也是重點知識姿搜，我之前做過詳細拆解寡润，有五個版本，如果每一版本都能說清楚舅柜，能夠很好的體現(xiàn)自己對于原型鏈的理解梭纹，文章地址:
ES5實現(xiàn)繼承的那些事。
歡迎在留言區(qū)留下你的觀點致份，一起討論提高变抽。如果今天的文章讓你有新的啟發(fā)，學(xué)習(xí)能力的提升上有新的認識氮块，歡迎轉(zhuǎn)發(fā)分享給更多人绍载。
猜你還想看
