溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS中一些重要的api實現(xiàn)分析

發(fā)布時間：2021-11-06 11:34:49 來源：億速云 閱讀：180 作者：iii 欄目：web開發(fā)

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

一、用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指向，相當于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;//謹記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ā)，則不予理睬，等當前定時器完成，才能啟動下一個定時器。

                      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)分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

                        向AI問一下細節(jié)

                        免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

                        AI
                        助
                        手