201908-前端筆記-手動實現apply和call、bind

Betta 發布于2019-08-26 14:05 / 2912人閱讀

摘要：刪除方法，返回。處理參數，返回一個閉包判斷是否為構造函數調用，如果是則調用調用當前函數如果不是，則用，將和參數傳入參考

apply

Function.prototype.myApply = function(context,args){
    // 如果是調用自己，則返回undefined
    if(this===Function.prototype) return false;
    
    context=context || window;

    var fn = Symbol(),
    result;
    
    context[fn]=this;
    
    if(Array.isarray(args)){
        result = context[fn](...args);
    }else{
        result = context[fn]();
    }
    
    delete context[fn];
    return result;
}

1.如果是調用自己，則返回undefined
2.判斷context是否存在，不存在則調用window
3.新增一個Symbol屬性，賦值給context
4.將當前函數賦值給這個屬性
5.判斷傳參是否數組
6.如果是，則將其余的參數傳入執行方法。如果否，則直接調用方法。
7.刪除方法，返回。

call

Function.prototype.myCall= function(context=window,...args){
    if(this === Function.prototype) return undefined;
    
    context= context || window
    
    var fn = Symbol(),
    result;
    
    context[fn] = this;
    
    result = context[fn](...args)
    delete context[fn]
    return result;
}

1.如果是調用自己，則返回undefined
2.判斷context是否存在，不存在則調用window
3.新增一個Symbol屬性，賦值給context
4.將當前函數賦值給這個屬性
5.將其余的參數傳入執行方法
6.刪除方法，返回。

bind

Function.prototype.myBind = function(context=window,...args){
    if(this === Function.prototype) return undefined;
    
    const _this = this ;
    
    return function F(...args2){
        if(this instanceof F){
            return new _this(...args,...args2)
        }
        _this.apply(context,args.concat(...args2))
    }
}

1.處理參數，返回一個閉包
2.判斷是否為構造函數調用，如果是則調用new調用當前函數
3.如果不是，則用apply，將context和args參數傳入

參考

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply apply與call的區別 linux和redis筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110017.html

Javascript中this與閉包學習筆記

摘要：但是在調用函數值執行之后并沒有達到我們想要的效果。解析在這里我們為每一個的事件綁定了一個匿名函數，這個匿名函數就形成了一個閉包。這樣我們就為每個的事件的匿名函數，都保存下了自己閉包變量。博客原址理解 Javascript中的this 基于不同的調用方式this的指向也會有所不同，調用方式大致有如下幾種：調用方式表達式構造函數調用 new Foo(); 對象方法...

pinecone 2019-08-22 10:34 評論0 收藏0
【進階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

摘要：在嚴格模式下調用函數則不影響默認綁定。回調函數丟失綁定是非常常見的。因為直接指定的綁定對象，稱之為顯示綁定。調用時強制把的綁定到上顯示綁定無法解決丟失綁定問題。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第三期，本周的主題是this全面解析，今天是第9天。本計劃一共28期，每期重點攻克一個面試重...

xavier 2019-08-23 13:47 評論0 收藏0
JavaScript MVC 學習筆記（四）類的使用(下)

摘要：基于函數進行調用的，用來確保函數是在指定的值所在的上下文中調用的。添加私有函數目前上面為類庫添加的屬性都是公開的，可以被隨時修改。以基于的富應用開發為主要學習資料。控制類庫的作用域在類和實例中都添加proxy函數，可以在事件處理程序之外處理函數的時候保持類的作用域。下面是不用proxy的辦法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 評論0 收藏0
【前端工程師手冊】JavaScript之this的筆記

摘要：函數別名是全局對象的屬性顯式綁定一個小栗子和第一個參數是一個對象，它們會把這個對象綁定到，接著在調用函數時指定這個。今天總結一下this。誤解熟悉Java或者其他語言的同學看到this會想當然的認為this指向函數本身，然而在JavaScript中并不是這樣子。 function func(){ console.log(this.index) } func.index ...

roland_reed 2019-08-22 17:32 評論0 收藏0
JS學習筆記 - 代碼復用

摘要：本文章記錄本人在學習中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。但是在開發的過程中，并不是所有的代碼復用都會使用到繼承。而且整個代碼都無法按照預期來運行。為了修復綁定對象與方法之間的關系。本文章記錄本人在學習 JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。 js 中復用代碼說道代碼復用，一般都會涉及到對...

cheng10 2019-08-21 10:35 評論0 收藏0