JS中一些重要的api實現(xiàn)分析-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“JS中一些重要的api實現(xiàn)分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JS中一些重要的api實現(xiàn)分析”吧!

創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站設(shè)計、成都做網(wǎng)站， 我們的網(wǎng)頁設(shè)計師為您提供的解決方案。

一、用ES5實現(xiàn)數(shù)組的map方法

核心要點:

1.回調(diào)函數(shù)的參數(shù)有哪些，返回值如何處理。

2.不修改原來的數(shù)組。

Array.prototype.MyMap = function(fn, context){  
var arr = Array.prototype.slice.call(this);//由于是ES5所以就不用...展開符了
  var mappedArr = [];
    for (var i = 0; i < arr.length; i++ ){ 
       if(!arr.hasOwnProperty(i))continue;
           mappedArr.push(fn.call(context, arr[i], i, this));
             }
               return mappedArr;
               }

二、用ES5實現(xiàn)數(shù)組的reduce方法

核心要點:

1、初始值不傳怎么處理

2、回調(diào)函數(shù)的參數(shù)有哪些，返回值如何處理。

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

三、實現(xiàn)call/apply

思路: 利用this的上下文特性。

//實現(xiàn)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);//重點代碼，利用this指向，相當(dāng)于context.caller(...args)  delete context[fn];  return res;}

四、實現(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ù)的原型對象上的屬性不能丟失

Function.prototype.bind = function(context, ...args) {
    let self = this;//謹(jǐn)記this表示調(diào)用bind的數(shù)    
    let fBound = function() { 
    //this instanceof fBound為true表示構(gòu)造函數(shù)的情況。new func.bind(obj)
            return self.apply(this instanceof fBound ? this : context || window, args);
    }
      fBound.prototype = Object.create(this.prototype);//保證原函數(shù)的原型對象上的屬性不丟失
          return fBound;
   }

大家平時說的手寫bind，其實就這么簡單：）

六、實現(xiàn)new關(guān)鍵字

核心要點:

1. 創(chuàng)建一個全新的對象，這個對象的__proto__要指向構(gòu)造函數(shù)的原型對象

2. 執(zhí)行構(gòu)造函數(shù)

3. 返回值為object類型則作為new方法的返回值返回，否則返回上述全新對象

       function myNew(fn, ...args) {
    let instance = Object.create(fn.prototype);
    let res = fn.apply(instance, args);
    return typeof res === 'object' ? res: instance;
    }

七、實現(xiàn)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);
      }
    }

八、實現(xiàn)單例模式

核心要點: 用閉包和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);
  }

九、實現(xiàn)數(shù)組的flat

方式其實很多，之前我做過系統(tǒng)整理，有六種方法，請參考：

JS數(shù)組扁平化(flat)方法總結(jié)

十、實現(xiàn)防抖功能

核心要點:

如果在定時器的時間范圍內(nèi)再次觸發(fā)，則重新計時。

const debounce = (fn, delay) => { 
 let timer = null;
   return (...args) => { 
      clearTimeout(timer); 
     timer = setTimeout(() => { 
          fn.apply(this, args);
       }, 
      delay);
      };
    };

十一、實現(xiàn)節(jié)流功能

核心要點:

如果在定時器的時間范圍內(nèi)再次觸發(fā)，則不予理睬，等當(dāng)前定時器完成，才能啟動下一個定時器。

const throttle = (fn, delay = 500) => {
  let flag = true;
    return (...args) => {    
    if (!flag) return;    
    flag = false;    
    setTimeout(() => {      
    fn.apply(this, args);      
    flag = true;   
     }, delay);
     };
    };

十二、用發(fā)布訂閱模式實現(xiàn)EventEmit

十三、實現(xiàn)深拷貝

以下為簡易版深拷貝，沒有考慮循環(huán)引用的情況和Buffer、Promise、Set、Map的處理，如果一一實現(xiàn)，過于復(fù)雜，面試短時間寫出來不太現(xiàn)實，如果有興趣可以去這里深入實現(xiàn):

深拷貝終極探索。

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")) {      // 對數(shù)組做特殊處理      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);};

到此，相信大家對“JS中一些重要的api實現(xiàn)分析”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：JS中一些重要的api實現(xiàn)分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://muchs.cn/article34/djhcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站營銷、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計、ChatGPT、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)