前端面試中的各種方法實現
阿新 • • 發佈:2019-01-07
最近在面試,面試官動不動就讓寫一個原生方法的實現,那咱們就在這裡寫一下常見的一些實現:
1.bind
Function.prototype.bind2 = function (context) {
var self = this;
return function () {
self.apply(context);
}
}
2.promise
class Promise { result: any; callbacks = []; failbacks = []; constructor(fn) { fn(this.resolve.bind(this), this.reject.bind(this)); } resolve(res) { if (this.callbacks.length > 0) this.callbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this)); } reject(res) { this.callbacks = []; if (this.failbacks.length > 0) this.failbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this)); } catch(fn) { this.failbacks.push(fn); } then(fn) { this.callbacks.push(fn); return this; } }
3.new的實現
function create() { // 建立一個空的物件 let obj = new Object() // 獲得建構函式 let Con = [].shift.call(arguments) // 連結到原型 obj.__proto__ = Con.prototype // 繫結 this,執行建構函式 let result = Con.apply(obj, arguments) // 確保 new 出來的是個物件 return typeof result === 'object' ? result : obj }
4.函式防抖
// func是使用者傳入需要防抖的函式 // wait是等待時間 const debounce = (func, wait = 50) => { // 快取一個定時器id let timer = 0 // 這裡返回的函式是每次使用者實際呼叫的防抖函式 // 如果已經設定過定時器了就清空上一次的定時器 // 開始一個新的定時器,延遲執行使用者傳入的方法 return function(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this, args) }, wait) } }
5.函式節流
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
6.深拷貝
function deepClone(obj) {
let result = typeof obj.splice === "function" ? [] : {};
if (obj && typeof obj === 'object') {
for (let key in obj) {
if (obj[key] && typeof obj[key] === 'object') {
result[key] = deepClone(obj[key]);//如果物件的屬性值為object的時候,遞迴呼叫deepClone,即在吧某個值物件複製一份到新的物件的對應值中。
} else {
result[key] = obj[key];//如果物件的屬性值不為object的時候,直接複製引數物件的每一個鍵值到新的物件對應的鍵值對中。
}
}
return result;
}
return obj;
}
7.extends實現
//子類 extends 父類
Function.prototype.extends = function(func, options){
for(var key in func.prototype){
this.prototype[key] = func.prototype[key];
}
for(var name in options){
this.prototype[name] = options[name];
}
}
總結:以上是面試過程中常見的方法實現,只是簡單的實現,面試的各位可以看下準備下。