手寫call, apply, bind

call, apply, bind這三個改變this指向的函數(shù)經(jīng)常被用到瑰排,無論是開發(fā)還是面試贯要。了解其實現(xiàn)原理,是一名合格的前端程序員必備技能椭住。

  • 如果還不知道call, apply, bind的基本用法崇渗,請先自行百度

動手需知

在自行實現(xiàn)這幾個方法前,你得知道幾個基本的知識點:

call的實現(xiàn)

call的關鍵兩點: 1、改變上下文指向户魏; 2驶臊、傳入多個參數(shù)挪挤。

Function.propoType.myCall = function(content){
  // call方法只能是方法才能調(diào)用
  if(typeof this !== "function"){
   throw new TypeError("Error");
  }
  // 如果沒有指定上下文,默認是全局對象window
  // 不要寫成this.window关翎。當this指向發(fā)生變化扛门,可能找不到全局對象window
  content = content || window;
  let fn = Symbol(content);          // 避免屬性重復
  let args = [...arguments].slice(1)
  //改變this指向
  content[fn] = this; //給content添加一個方法 指向this
  let result = content[fn](...args);  //傳入?yún)?shù)
  delete content[fn];                     // 刪除fn 方法,一個中間變量用完刪除
  return result;
} 

apply 的實現(xiàn)

apply的關鍵兩點:1笤休、改變上下文指向尖飞; 2、傳入?yún)?shù)數(shù)組店雅。
在實現(xiàn)原理上基本和call差不多政基,主要是參數(shù)的區(qū)別。

Function.propoType.myApply = function(content){
  // apply方法只能是方法才能調(diào)用
  if(typeof this !== "function"){
   throw new TypeError("Error");
  }
  // 如果沒有指定上下文闹啦,默認是全局對象window
  // 不要寫成this.window沮明。當this指向發(fā)生變化,可能找不到全局對象window
  content = content || window;
  let fn = Symbol(content);          // 避免屬性重復
  let args = [...arguments][1];      // 記住傳入的是數(shù)組G戏堋<鼋 !
 //改變this指向
  content[fn] = this; //給content添加一個方法 指向this
  let result ; 
  if(args){
     result = content[fn](...args);  //傳入?yún)?shù)
  }else{
    result = content[fn]();  //傳入?yún)?shù)
  }
  delete content[fn];                     // 刪除fn 方法琳袄,一個中間變量用完刪除
  return result;
} 

bind 的實現(xiàn)

bind 的關鍵幾點:1江场、改變上下文指向;2窖逗、傳入多個參數(shù)址否;3、返回的是函數(shù)的方法名碎紊,不會立即執(zhí)行佑附。

Function.propoType.myBind = function(content){
    self = this;
  // bind方法只能是方法才能調(diào)用
  if(typeof this !== "function"){
   throw new TypeError("Error");
  }
  // 可以支持柯里化傳參,保存參數(shù)
  args = [...arguments].slice(1);
  function Fn (){
 // 考慮需要綁定的函數(shù)可能是構(gòu)造函數(shù)仗考,this不會被綁定音同,但是參數(shù)仍然會傳遞。
      if(this instanceof Fn){
          return self(...args.concat(...arguments));//構(gòu)造函數(shù)直接傳參
      }else{
          return self.apply(content,args.concat(...arguments));// apply傳的是數(shù)組
     }
  }
  return Fn;
}

執(zhí)行:

let Person = {
    name: 'Tom',
    say(x, y) {
        //console.log(this)
        console.log(`我叫${this.name}${x}${y}`)
    }
}
Person1 = {
    name: 'Tom1'
}
Person.say.myCall(Person1, ' call你干嘛', ' 哈哈哈');
Person.say.myApply(Person1, [' apply你干嘛', ' 哈哈哈',]);
Person.say.myBind(Person1, ' bind你干嘛', ' 哈哈哈kk')()

執(zhí)行結(jié)果:


結(jié)果

結(jié)果完美呈現(xiàn)秃嗜,以上便是call, apply, bind的簡單實現(xiàn)权均。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市痪寻,隨后出現(xiàn)的幾起案子螺句,更是在濱河造成了極大的恐慌,老刑警劉巖橡类,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異芽唇,居然都是意外死亡顾画,警方通過查閱死者的電腦和手機取劫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來研侣,“玉大人谱邪,你說我怎么就攤上這事∈睿” “怎么了惦银?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長末誓。 經(jīng)常有香客問我扯俱,道長,這世上最難降的妖魔是什么喇澡? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任迅栅,我火速辦了婚禮,結(jié)果婚禮上晴玖,老公的妹妹穿的比我還像新娘读存。我一直安慰自己,他們只是感情好呕屎,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布让簿。 她就那樣靜靜地躺著,像睡著了一般秀睛。 火紅的嫁衣襯著肌膚如雪尔当。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天琅催,我揣著相機與錄音居凶,去河邊找鬼。 笑死藤抡,一個胖子當著我的面吹牛侠碧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播缠黍,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼弄兜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了瓷式?” 一聲冷哼從身側(cè)響起替饿,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贸典,沒想到半個月后视卢,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡廊驼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年据过,在試婚紗的時候發(fā)現(xiàn)自己被綠了惋砂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡绳锅,死狀恐怖西饵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鳞芙,我是刑警寧澤眷柔,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站原朝,受9級特大地震影響驯嘱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜竿拆,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一宙拉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丙笋,春花似錦谢澈、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至怠肋,卻和暖如春敬鬓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笙各。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工钉答, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人杈抢。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓数尿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惶楼。 傳聞我的和親對象是個殘疾皇子右蹦,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容