您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript函數(shù)的call、apply以及bind方法的實例用法”,在日常操作中,相信很多人在JavaScript函數(shù)的call、apply以及bind方法的實例用法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript函數(shù)的call、apply以及bind方法的實例用法”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
1、相同點
都能夠改變目標函數(shù)執(zhí)行時內(nèi)部 this 的指向
方法的第一個參數(shù)用于指定函數(shù)執(zhí)行時內(nèi)部的 this 值
支持向目標函數(shù)傳遞任意個參數(shù)
若不向方法的第一個參數(shù)傳值或者傳遞 undefined、null,則在 JavaScript 正常模式下,目標函數(shù)內(nèi)部的 this 指向 window 對象,嚴格模式下,分別指向 undefined、null。
2、區(qū)別
apply() 方法可接收兩個參數(shù),而 call() 和 bind() 方法則可接收多個參數(shù)。
apply() 方法向目標函數(shù)傳遞參數(shù)時只需將參數(shù)數(shù)組或 arguments 對象作為方法的第二個參數(shù)即可,而 call() 和 bind() 方法則需要將傳參逐個列舉在方法的一個參數(shù)后面。
調(diào)用 call() 和 apply() 方法時會立即執(zhí)行目標函數(shù),而 bind() 方法則不會,它將返回一個新函數(shù)——目標函數(shù)的拷貝,該函數(shù)內(nèi)部的 this 指向 bind() 方法的第一個參數(shù),之后執(zhí)行新函數(shù)相當于執(zhí)行了目標函數(shù)。
只有 bind() 方法實現(xiàn)了函數(shù)柯里化,因此可以分兩次向目標函數(shù)傳遞參數(shù)。
調(diào)用 call() 方法會立即執(zhí)行目標函數(shù),同時改變函數(shù)內(nèi)部 this 的指向。this 指向由方法的第一個參數(shù)決定,后面逐個列舉的任意個參數(shù)將作為目標函數(shù)的參數(shù)一一對應(yīng)傳入。
對于開頭總結(jié)中相同點的最后一點,示例如下:
/* 正常模式 */ let obj = { sum(a, b) { console.log(this) return a + b } } // 執(zhí)行 sum 函數(shù)的 apply、bind 方法,打印的 this 同下 obj.sum.call() // 打印 window obj.sum.call(undefined, 1, 2) // 打印 window obj.sum.call(null, 1, 2) // 打印 window
/* 嚴格模式 */ 'use strict' // 執(zhí)行 sum 函數(shù)的 apply、bind 方法,打印的 this 同下 obj.sum.call() // 打印 undefined obj.sum.call(undefined, 1, 2) // 打印 undefined obj.sum.call(null, 1, 2) // 打印 null
1、關(guān)鍵點
myCall() 方法被添加在 Function 原型對象上,目標函數(shù)調(diào)用該方法時,myCall() 方法內(nèi)部的 this 將指向目標函數(shù)。
將目標函數(shù)作為 context 對象的方法來執(zhí)行,由此目標函數(shù)內(nèi)部的 this 將指向 context 對象。.
從 context 對象中刪除目標函數(shù)
使用擴展運算符 ... 處理傳入目標函數(shù)的參數(shù)
2、call()、apply()、bind() 方法的模擬實現(xiàn)中,對于不傳第一個參數(shù)或者傳遞 undefined、null 時,這里在 JS 正常模式和嚴格模式下做了統(tǒng)一處理,即目標函數(shù)內(nèi)部的 this 均指向 window 對象。
3、代碼如下
Function.prototype.myCall = function (context, ...args) { if (context === undefined || context === null) { context = window } // 下面這行為核心代碼 context.fn = this const result = context.fn(...args) delete context.fn return result } let obj1 = { basicNum: 1, sum(a, b) { console.log(this) return this.basicNum + a + b } } let obj2 = { basicNum: 9 } console.log(obj1.sum.call(obj2, 2, 3)) // 14 console.log(obj1.sum.myCall(obj2, 2, 3)) // 14
調(diào)用 apply() 方法會立即執(zhí)行目標函數(shù),同時改變函數(shù)內(nèi)部 this 的指向。this 指向由方法的第一個參數(shù)決定,第二個參數(shù)是一個參數(shù)數(shù)組或 arguments 對象,各數(shù)組元素或 arguments 對象表示的各參數(shù)將作為目標函數(shù)的參數(shù)一一對應(yīng)傳入。
1、關(guān)鍵點
myApply() 方法被添加在 Function 原型對象上,目標函數(shù)調(diào)用該方法時,myApply() 方法內(nèi)部的 this 將指向目標函數(shù)。
將目標函數(shù)作為 context 對象的方法來執(zhí)行,由此目標函數(shù)內(nèi)部的 this 將指向 context 對象。
從 context 對象中刪除目標函數(shù)
使用擴展運算符 ... 處理傳入目標函數(shù)的參數(shù)
2、代碼如下
Function.prototype.myApply = function (context, args) { if (context === undefined || context === null) { context = window } // 下面這行為核心代碼 context.fn = this const result = context.fn(...args) delete context.fn return result } console.log(obj1.sum.apply(obj2, [2, 3])) // 14 console.log(obj1.sum.myApply(obj2, [2, 3])) // 14
調(diào)用 bind() 方法將返回一個新函數(shù)——目標函數(shù)的拷貝,該函數(shù)內(nèi)部的 this 指向方法的第一個參數(shù),后面逐個列舉的任意個參數(shù)將作為目標函數(shù)的參數(shù)一一對應(yīng)傳入。之后執(zhí)行新函數(shù)相當于執(zhí)行了目標函數(shù)。
bind() 方法實現(xiàn)了函數(shù)柯里化,因此可以分兩次向目標函數(shù)傳遞參數(shù),第一次的參數(shù)列舉在 bind() 方法首參后面,第二次的參數(shù)列舉在新函數(shù)中。
1、關(guān)鍵點
myBind() 方法被添加在 Function 原型對象上,目標函數(shù)調(diào)用該方法時,myBind() 方法內(nèi)部的 this 將指向目標函數(shù)。
將目標函數(shù)作為 context 對象的方法來執(zhí)行,由此目標函數(shù)內(nèi)部的 this 將指向 context 對象。
從 context 對象中刪除目標函數(shù)
使用擴展運算符 ... 處理傳入目標函數(shù)的初始參數(shù)、后續(xù)參數(shù)。
2、代碼如下
Function.prototype.myBind = function (context, ...initArgs) { if (context === undefined || context === null) { context = window } // 緩存 this 值 const _this = this return function (...args) { // 下面這行為核心代碼 context.fn = _this const result = context.fn(...initArgs, ...args) delete context.fn return result } } console.log(obj1.sum.bind(obj2, 2)(3)) // 14 console.log(obj1.sum.myBind(obj2, 2)(3)) // 14
到此,關(guān)于“JavaScript函數(shù)的call、apply以及bind方法的實例用法”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。