国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript的call/apply/bind方法/函數原生實現

gecko23 / 1895人閱讀

摘要:方法簡介在中,函數中的指向往往在調用時才可確定,而提供了方法讓我們得以顯示綁定函數的指向。它們的第一個參數是一個對象,它們會把這個對象綁定到調用他們的函數內的。

call/apply/bind方法簡介

在JavaScript中,函數中this的指向往往在調用時才可確定,而JavaScript提供了call/apply/bind方法讓我們得以顯示綁定函數的this指向。
它們的第一個參數是一個對象,它們會把這個對象綁定到調用他們的函數內的this。因為你可以直接指定 this 的綁定對象,因此我們稱之為顯式綁定。

//用例
var a = { q: 1 };
var b = { q: 2 };
var c = { q: 3 };
function cs(s) {
    console.log(this.q)
}
cs.bind(a)();//1
cs.call(b);//2
cs.apply(c);//3
tips
var s = new fn.myBind({ a: 2333 })();//報錯!!,運算優先級:屬性訪問>帶參new>函數調用>無參new
var s = new (fn.myBind({ a: 2333 }))();//正確姿勢
自定義Call方法實現

參數從arguments[1]開始,func.myCall(obj:Object[,agr1:any[,agr2:any[...]]])

if (!Function.prototype.myCall) {
    Function.prototype.myCall = function (targetThis) {
        //targetThis默認為windows(嚴格模式不允許)
        targetThis = targetThis || window;
        //利用對象調用指定this
        targetThis.fn = this;
        //收集參數
        var agrs = [];
        //因為arguments[0]===targetThis,故從下標1開始
        for (var ge = 1, len = arguments.length; ge < len; ge++) {
            agrs.push("arguments[" + ge + "]");
        }
        //利用eval展開參數 并執行函數
        var result = eval("targetThis.fn(" + agrs + ")");
        //刪除附加對象的屬性以消除副作用
        delete targetThis.fn;
        //返回結果
        return result;
    }
}
自定義apply方法實現

參數放在數組里func.call(obj:Object[,agr:Array])

if (!Function.prototype.myApply) {
    Function.prototype.myApply = function (targetThis, arrAgrs) {
        //targetThis默認為windows(嚴格模式不允許)
        targetThis = targetThis || window;
        //利用對象調用指定this
        targetThis.fn = this;
        var agrs = [];
        //收集參數數組
        for (var ge = 0, len = arrAgrs.length; ge < len; ge++) {
            agrs.push("arrAgrs[" + ge + "]");
        }
        //利用eval展開參數 并執行函數
        var result = eval(" targetThis.fn(" + agrs + ")");
        //刪除附加對象的屬性以消除副作用
        delete targetThis.fn;
        //返回結果
        return result;
    }
}

自定義bind方法實現

參數從arguments[1]開始,func.myCall(obj:Object[,agr1:any[,agr2:any[...]]])

//考慮參數合并以及new優先級和原型繼承
if (!Function.prototype.myBind) {
    Function.prototype.myBind = function (targetThis) {
        //若非函數對象來調用本方法,報異常
        if (typeof this !== "function") {
            throw new TypeError(
                "Function.prototype.bind error"
            );
        }
        //收集參數
        var bindArgs = Array.prototype.slice.call(arguments, 1),
            originFunction = this,//保存原始this(原始函數)
            fnProto = function () { },//利用空函數間接鏈接prototype以應對new時的原型繼承
            fnBounding = function () {
                //考核new操作this綁定優先
                return originFunction.apply(
                    (
                        this instanceof fnProto ? this : targetThis
                    ),
                    bindArgs.concat(
                        Array.prototype.slice.call(arguments)
                    )
                )
            };
        fnProto.prototype = this.prototype;//鏈接原型
        //new一個fnProto以實現簡潔繼承原型,防止對fnBounding.prototype的操作污染originFunction原型prototype
        fnBounding.prototype = new fnProto();
        return fnBounding;
    };
}


軟綁定

bind之后可以再bind或call/apply

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function (obj) {
        var fn = this;
        // 捕獲所有 bindArgs 參數
        var bindArgs = [].slice.call(arguments, 1);
        var fnBounding = function () {
            return fn.apply(
                (!this || this === (window || global)) ?
                    obj : this,
                curried.concat.apply(bindArgs , arguments)
            );
        };
        fnBounding .prototype = Object.create(fn.prototype);//鏈接原型
        return fnBounding ;
    };
}

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

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

相關文章

  • 可能遇到假面試題:不用callapply方法模擬實現ES5bind方法

    摘要:來自朋友去某信用卡管家的做的一道面試題,用原生模擬的方法,不準用和方法。他們的用途相同,都是在特定的作用域中調用函數。不同之處在于,方法傳遞給調用函數的參數是逐個列出的,而則是要寫在數組中。 本文首發我的個人博客:前端小密圈,評論交流送1024邀請碼,嘿嘿嘿?。 來自朋友去某信用卡管家的做的一道面試題,用原生JavaScript模擬ES5的bind方法,不準用call和bind方法。 ...

    李世贊 評論0 收藏0
  • 可能遇到假面試題:不用callapply方法模擬實現ES5bind方法

    摘要:來自朋友去某信用卡管家的做的一道面試題,用原生模擬的方法,不準用和方法。他們的用途相同,都是在特定的作用域中調用函數。不同之處在于,方法傳遞給調用函數的參數是逐個列出的,而則是要寫在數組中。 本文首發我的個人博客:前端小密圈,評論交流送1024邀請碼,嘿嘿嘿?。 來自朋友去某信用卡管家的做的一道面試題,用原生JavaScript模擬ES5的bind方法,不準用call和bind方法。 ...

    ConardLi 評論0 收藏0
  • JS中callapplybind方法詳解

    摘要:不能應用下的等方法。首先我們可以通過給目標函數指定作用域來簡單實現方法保存,即調用方法的目標函數考慮到函數柯里化的情況,我們可以構建一個更加健壯的這次的方法可以綁定對象,也支持在綁定的時候傳參。原因是,在中,多次是無效的。 bind 是返回對應函數,便于稍后調用;apply 、call 則是立即調用 。 apply、call 在 javascript 中,call 和 apply 都是...

    zombieda 評論0 收藏0
  • JS基礎篇--callapplybind方法詳解

    摘要:首先我們可以通過給目標函數指定作用域來簡單實現方法保存,即調用方法的目標函數考慮到函數柯里化的情況,我們可以構建一個更加健壯的這次的方法可以綁定對象,也支持在綁定的時候傳參。原因是,在中,多次是無效的。而則會立即執行函數。 bind 是返回對應函數,便于稍后調用;apply 、call 則是立即調用 。 apply、call 在 javascript 中,call 和 apply 都是...

    lastSeries 評論0 收藏0

發表評論

0條評論

gecko23

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<