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

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

一、用ES5實現數組的map方法

核心要點:

1.回調函數的參數有哪些，返回值如何處理。

2.不修改原來的數組。

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實現數組的reduce方法

核心要點:

1、初始值不傳怎么處理

2、回調函數的參數有哪些，返回值如何處理。

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

三、實現call/apply

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

//實現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;}

四、實現Object.create方法(常用)

function create(proto) { 
   function F() {};
       F.prototype = proto;
     return new F();
 }

五、實現bind方法

核心要點:

1.對于普通函數，綁定this指向

2.對于構造函數，要保證原函數的原型對象上的屬性不能丟失

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

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

六、實現new關鍵字

核心要點:

1. 創建一個全新的對象，這個對象的__proto__要指向構造函數的原型對象

2. 執行構造函數

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

七、實現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);
      }
    }

八、實現單例模式

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

九、實現數組的flat

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

JS數組扁平化(flat)方法總結

十、實現防抖功能

核心要點:

如果在定時器的時間范圍內再次觸發，則重新計時。

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

十一、實現節流功能

核心要點:

如果在定時器的時間范圍內再次觸發，則不予理睬，等當前定時器完成，才能啟動下一個定時器。

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

十二、用發布訂閱模式實現EventEmit

十三、實現深拷貝

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

深拷貝終極探索。

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")) {      // 對數組做特殊處理      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實現分析”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

文章名稱：JS中一些重要的api實現分析-創新互聯
轉載來源：http://vcdvsql.cn/article34/djhcse.html

成都網站建設公司_創新互聯，為您提供網站導航、網站營銷、網站收錄、品牌網站設計、ChatGPT、品牌網站制作

廣告

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