前端手写面试必问

谁借莪１个温暖的怀抱￠ 2022-09-06 14:24 253阅读 0赞

## 手写instance ##

function instance_of(L, R) { //L 表示左表达式，R 表示右表达式 
    
        var O = R.prototype;   // 取 R 的显示原型 
    
        L = L.__proto__;  // 取 L 的隐式原型
    
        while (true) {     
    
            if (L === null)      
    
                 return false;   
    
            if (O === L)  // 当 O 显式原型 严格等于 L隐式原型 时，返回true
    
                 return true;   
    
            L = L.__proto__;  
    
        }
    
    }

## call ##

Function.prototype.myCall = function (obj,...args) { 
    	    var obj = obj || window;   //可能没有传输This的值
    	    obj.fn = this;    //这里的this是调用call的方法，将该方法加入this对象上
    	   	coonst result = obj.fn(...args);
    	  	delete obj.fn;   //将新加的方法删除，当做什么都没发生～
    	  	return result;
    	};
    	var foo = { 
        	value: 1
    	};
    	function show(a, b) { 
    	    console.log(this.value);
    	    console.log(a + b);
    	};
    	show.setCall(foo, 1, 2); // 1 3

## bind ##

Function.prototype.bind = function (obj) { 
    	    var _this = this; // 保存调用bind的函数
    	    var obj = obj || window; // 确定被指向的this，如果obj为空，执行作用域的this就需要顶上喽
    	    return function(){ 
    	        return _this.apply(arguments); // 修正this的指向
    	    }
    	};

## axios ##

class Axios { 
        constructor() { 
    
        }
    
        request(config) { 
            return new Promise(resolve => { 
                const { url = '', method = 'get', data = { }} = config;
                // 发送ajax请求
                console.log(config);
                const xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.onload = function() { 
                    console.log(xhr.responseText)
                    resolve(xhr.responseText);
                }
                xhr.send(data);
            })
        }
    }
    
    // 定义get,post...方法，挂在到Axios原型上
    const methodsArr = ['get', 'delete', 'head', 'options', 'put', 'patch', 'post'];
    methodsArr.forEach(met => { 
        Axios.prototype[met] = function() { 
            console.log('执行'+met+'方法');
            // 处理单个方法
            if (['get', 'delete', 'head', 'options'].includes(met)) {  // 2个参数(url[, config])
                return this.request({ 
                    method: met,
                    url: arguments[0],
                    ...arguments[1] || { }
                })
            } else {  // 3个参数(url[,data[,config]])
                return this.request({ 
                    method: met,
                    url: arguments[0],
                    data: arguments[1] || { },
                    ...arguments[2] || { }
                })
            }
    
        }
    })
    
    
    // 工具方法，实现b的方法或属性混入a;
    // 方法也要混入进去
    const utils = { 
      extend(a,b, context) { 
        for(let key in b) { 
          if (b.hasOwnProperty(key)) { 
            if (typeof b[key] === 'function') { 
              a[key] = b[key].bind(context);
            } else { 
              a[key] = b[key]
            }
          }
          
        }
      }
    }
    
    
    // 最终导出axios的方法-》即实例的request方法
    function CreateAxiosFn() { 
        let axios = new Axios();
    
        let req = axios.request.bind(axios);
        // 混入方法， 处理axios的request方法，使之拥有get,post...方法
        utils.extend(req, Axios.prototype, axios)
        return req;
    }
    
    // 得到最后的全局变量axios
    let axios = CreateAxiosFn();

## new ##

function _new(fn,...rest){ 
      var obj = { }
      obj.__proto__ = fn.prototype;
      //将thisObj作为fn的this，继承其属性，并获取返回结果为result
      const result = fn.apply(obj,rest);
      //根据result对象的类型决定返回结果
      return typeof result === "object" ? result : obj;
    }

## promise ##

class Promise{ 
      constructor(executor){ 
        this.state = 'pending';			//默认的状态，进行中
        this.value = null;				//成功后携带的值
        this.reason = null;				//失败后携带的原因
    	this.onFulfilledCallbacks = []
      	this.onRejectedCallbacks = []
      	
        function resolve(value) { 
          if (this.state === 'pending') { 
            this.state = 'fulfilled';
            this.value = value;
            this.onFulfilledCallbacks.forEach(item => item(this.value))
          }
        };
    
        function reject(reason) { 
          if (this.state === 'pending') { 
            this.state = 'rejected';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(item => item(this.reason))
          }
        };
    
        try{ 
          executor(resolve, reject);		//构造
        } catch (err) { 
          reject(err);
        }
      }
      //then函数根据state来进行后续的回调函数操作
      then(onFulfilled,onRejected) { 		
        if (this.state === 'fulfilled') { 
    	    return new Promise((resolve, reject) => { 
    	      try { 
    	        let f = onFulfilled(self.value)
    	        if (f instanceof Promise) { 
    	          f.then(resolve, reject)
    	        } else { 
    	          resolve(f)
    	        }
    	      } catch (err) { 
    	        reject(err)
    	      }
    	    })
        };
        if (this.state === 'rejected') { 
          	return new Promise((resolve, reject) => { 
    	      try { 
    	        let j = onRejected(self.reason)
    	        if (j instanceof Promise) { 
    	          j.then(resolve, reject)
    	        } else { 
    	          resolve(j)
    	        }
    	      } catch (err) { 
    	        reject(err)
    	      }
    	    })
        };
        if (this.state === 'pending') { 
    	  	return new Promise((resolve, reject) => { 
    	      self.onFulfilledCallbacks.push(() => { 
    	        let f = onFulfilled(self.value)
    	        if (f instanceof Promise) { 
    	          f.then(resolve, reject)
    	        } else { 
    	          resolve(f)
    	        }
    	      })
    	      self.onRejectedCallbacks.push(() => { 
    	        let j = onRejected(self.reason)
    	        if (j instanceof Promise) { 
    	          j.then(resolve, reject)
    	        } else { 
    	          resolve(j)
    	        }
    	      })
    	    })
        }
      }
    }

# promise.all #

// 手写Promise.all()
        Promise.property.all = function (iterators) { 
            const promises = Array.from(iterators);
            const len = promises.length;
            let count = 0;
            let resultList = [];
            return new Promise((resolve,reject)=>{ 
                promises.forEach((p,index) =>{ 
                    Promise.resolve(p)
                .then((result)=>{ 
                    count++;
                    resultList[index] = result;
                    if(count === len){ 
                        resolve(resultList);
                    },
                    (err)=>{ 
    					reject(err);				
    				}
            })
            .catch(e=>{ 
                reject(e);
            })
            })
            })
        }

## 柯里化 ##