一、前言

本篇文章是記錄各種手寫實現(xiàn)JavaScript中的各種操作，如：new apply等，如果有你有更好的方法，記得告訴我哦。

二、實現(xiàn)

1. 實現(xiàn)一個new操作符

new的原理，大致分為四點：

1. 創(chuàng)建一個空的對象；

2. 讓此空對象的__proto__指向構(gòu)造函數(shù)的原型對象Constructor.prototype;

3. 綁定this,執(zhí)行構(gòu)造函數(shù);

4. 返回新對象；

function _New(func){
  let _tempObj = {};
  if(func.prototype !== null){
    _tempObj.__proto__ = func.prototype;
  }
 let obj = func.apply(_tempObj,Array.prototype.slice.call(arguments,1));
 return (typeof obj === "object") ? obj : _tempObj;
}

2. 實現(xiàn)一個call方法

call的核心其實是：

1. 將函數(shù)設(shè)置為對象的屬性；

2. 執(zhí)行&刪除此函數(shù)；

3. 指定this到函數(shù)并傳入給定參數(shù)執(zhí)行函數(shù)；

4. 如果不傳入?yún)?shù)，默認(rèn)指向為window；

簡單的
 var obj = {
  a:1,
  b:function(){
  console.log(this.a);
  }
 }
 obj.b();//1

Function.prototype.ncall = function(contex=window){
    contex.fn = this;
    let args = [...arguments].slice(1);
    let res = contex.fn(..args);
    delete contex.fn;
    return res;
    
}

apply的實現(xiàn)和call基本一樣，只是參數(shù)略有不同，如下代碼:

Function.prototype.napply = function(contex = window) {
  contex.fn = this;
  let res ;
  if(arguments[1]){
  //有參數(shù)
  res = contex.fn(...arguments[1]);
  }else{
  res = contex.fn();
  }
  delete context.fn;
  return res
}

bind的實現(xiàn)，會創(chuàng)建一個新函數(shù)。當(dāng)這個新函數(shù)被調(diào)用時，bind() 的第一個參數(shù)將作為它運行時的 this，之后的一序列參數(shù)將會在傳遞的實參前傳入作為它的參數(shù)。bind的實現(xiàn)會借助apply或者call;

Function.prototype.nbind = function(contex = window) {
if (typeof contex !== 'function'){throw Error('not a func')};
  let fn = this;
  newFunc = function(){};
  let arg = ...arguments[1];
  let resfunc = function(){
     fn.apply(this instanceof newFunc ? this : contex,args.concat(..arguments));
  }
if(this.prototype){
  newFunc.prototype = this.prototype;
}
  resfunc.prototype = new newFunc();
  return newFunc;  
}

bind的實現(xiàn)有一個難點，bind 返回的函數(shù)作為構(gòu)造函數(shù)的時候，bind 時指定的 this 值會失效，但傳入的參數(shù)依然生效.

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

具體參考

3. 實現(xiàn)一個instanceof方法

function ninstanceof(arg1,arg2){
 let proto = arg1.__proto__;
 let proto2 = arg2.prototype;
 while(true){
 if(proto == proto2) return true;
   if(proto == null) return false;
   proto = proto.__proto__;//深度繼續(xù)往上早；
 }
}

4. 實現(xiàn)一個js的深copy

function deepCopy(obj){
var r ;
  if(typeof obj == "object"){
      r = obj.constructor == Array ? [] : {};
      for (let i in obj){
      r[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
      }
   
  }else{
  r = obj;
  }
  return r;
}

5. 實現(xiàn)節(jié)流和防抖函數(shù)

節(jié)流：一段時間內(nèi)函數(shù)只執(zhí)行一次；

防抖：如果事件執(zhí)行時，又觸發(fā)了事件，那事件會重新執(zhí)行

//isDebounce 是否防抖
const throttle =  function(fn,delay, isDebounce){
  let timer ;
  let lastTimer = 0;
   return function(){
     if(isDebounce){
     //防抖
     if(timer) clearTimeout(timer);
     
    timer = setTimeout(() => {
  // Todo...
  fn();
}, delay)
     }else{
     //節(jié)流
     let now = new Date().getTime();
     if(now - lastTimer < delay)return;
     lastTimer = now;
     fn();
     }
   }
}

三、總結(jié)

函數(shù)柯里化和promise的原理，菜雞正在學(xué)習(xí)中，之后會補充到這。已上有什么錯誤，請及時聯(lián)系。