手寫call apply bind

這個筆記是自己練習(xí)時的記錄砖茸,僅供參考

1.call

Function.prototype.mycall = function(context,...args){
    //驗(yàn)證context是否存在殴穴,不存在指向window
    let ctx = context || window;
    //判斷args是否存在,不存在賦值為空數(shù)組
    args = args?args:[]
    //在指定的上下文中加一個新的屬性方法并將參數(shù)傳遞進(jìn)去货葬,最后執(zhí)行
    let func = Symbol(); // 確保這個屬性是唯一的
    ctx[func] = this; //將調(diào)用mycall的方法定義在ctx[func]上
    let result = ctx[func](...args); //以對象形式調(diào)用this,這個時候方法的this指向ctx
    delete ctx[func];//刪除這個方法震桶,避免對傳入的對象造成污染征绎,添加了這個方法
    return result;
}
function a(...params){
    console.log(this.scope+":"+params);
}
var b = {
    scope:"bObject"
};
a.mycall(b,1,2);
a.call(b,1,2,3);
console.log(b);

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


result.png

2.apply

Function.prototype.myapply = function(context,args){
    //驗(yàn)證context是否存在人柿,不存在則綁定到window
    let ctx = context || window;
    //判斷args是否為空
    args = args ? args:[];
    //聲明一個唯一的值
    let func =Symbol();
    ctx[func] = this; // 將調(diào)用myapply的函數(shù)綁定到屬性func上
    let res = ctx[func](args); //這里func函數(shù)執(zhí)行的this就在ctx上
    delete ctx[func];
    return res;
}
function testApply(params){
    console.log(this.scope1+":"+params)
}
var c ={
    scope1:"cObject"
};
testApply.myapply(c,[1,2,3]);
testApply.apply(c,[1,2,3]);
console.log(c);

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


result1.png

3.bind

Function.prototype.mybind = function (context, ...args) {
    let ctx = context || window;
    args = args ? args : [];
    let func = this; // 這個this指的是調(diào)用mybind的函數(shù)凫岖,將它先存起來
    //返回值是一個函數(shù),這個函數(shù)的this已經(jīng)指向了ctx
    return function newFun(...newFunArgs) {
        //當(dāng)返回的這個函數(shù)作為構(gòu)造函數(shù)的時候歼指,進(jìn)行原型繼承
        if (this instanceof newFun) {
            return new func(...args, ...newFunArgs);
        }
        return func.myapply(ctx, [...args, ...newFunArgs]);
    }
}
function a(...params) {
    console.log(this.scope + ":" + params);
}
var b = {
    scope: "bObject"
};
const z = a.mybind(b, 1, 2);
console.log(z);
//如果將bind后的新函數(shù)使用new甥雕,this會改變,
const w = new z();
console.log(w);

執(zhí)行結(jié)果:
result2.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市呵哨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拒炎,老刑警劉巖挨务,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谎柄,死亡現(xiàn)場離奇詭異,居然都是意外死亡朝巫,警方通過查閱死者的電腦和手機(jī)劈猿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門潮孽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來筷黔,“玉大人佛舱,你說我怎么就攤上這事∶迹” “怎么了凰棉?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵撒犀,是天一觀的道長。 經(jīng)常有香客問我或舞,道長,這世上最難降的妖魔是什么胆筒? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任仆救,我火速辦了婚禮矫渔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顿痪。我一直安慰自己油够,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布撕阎。 她就那樣靜靜地躺著碌补,像睡著了一般棉饶。 火紅的嫁衣襯著肌膚如雪镇匀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天幸缕,我揣著相機(jī)與錄音发乔,去河邊找鬼雪猪。 笑死,一個胖子當(dāng)著我的面吹牛只恨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纵菌,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼咱圆,長吁一口氣:“原來是場噩夢啊……” “哼功氨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起杠览,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤纵势,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后软舌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牛曹,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年鸳玩,在試婚紗的時候發(fā)現(xiàn)自己被綠了演闭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡窝革,死狀恐怖吕座,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情漆诽,我是刑警寧澤史侣,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布魏身,位于F島的核電站,受9級特大地震影響税朴,放射性物質(zhì)發(fā)生泄漏家制。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一觅廓、第九天 我趴在偏房一處隱蔽的房頂上張望涵但。 院中可真熱鬧,春花似錦瞳脓、人聲如沸澈侠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至审姓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間次坡,已是汗流浹背画畅。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工轴踱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人淫僻。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓雳灵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悯辙。 傳聞我的和親對象是個殘疾皇子琳省,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評論 2 360

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