如何改變函數(shù)的this指向
本篇內容介紹了“如何改變函數(shù)的this指向”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
成都創(chuàng)新互聯(lián)公司主營寧河網站建設的網絡公司,主營網站建設方案,重慶APP開發(fā),寧河h5小程序開發(fā)搭建,寧河網站營銷推廣歡迎寧河等地區(qū)企業(yè)咨詢
如果是函數(shù)聲明，那么函數(shù)內部的this指向全局對象或者調用該函數(shù)的對象。
箭頭函數(shù)的this綁定的是父級作用域內的this
使用call，apply，bind可以綁定this指向。其中bind是永久改變this指向并且不會立即執(zhí)行。apply，call臨時改變this指向并且立即執(zhí)行。
apply，call不同之處在于調用的參數(shù)形式：
call（thisArg, arg1?, arg2?, arg3?…）第一個參數(shù)代表this指向，剩下的參數(shù)就是原函數(shù)的參數(shù)。
apply（thisArg, argArray?）第一個參數(shù)代表this指向，第二個參數(shù)是以數(shù)組的形式傳遞參數(shù)。
/* bind, call, apply調用示例 */
var obj = {
x: 'obj',
getX: function（） {
// 注意這里不能使用箭頭函數(shù)
return this.x;
}
};
// 調用 obj 對象上的函數(shù)屬性， this就會綁定為obj
// 'obj'
console.log（obj.getX（））;
var x = 'window';
function target（a, b, c） {
console.log（a, b, c）;
return this.x;
}
/* bind */
// undefined undefined undefined
// 'window'
console.log（target（））;
const targetBound = target.bind（obj, 1）; // 此時targetBound就是一個改變了this指向的target
// 1 2 3
// 'obj'
console.log（targetBound（2, 3））;
/* call */
// 4 5 6
// 'obj'
console.log（target.call（obj, 4, 5, 6））;
/* apply */
// 7 8 9
// 'obj'
console.log（target.apply（obj, [7, 8, 9]））;
自定義實現(xiàn)call，apply，bind
這三個函數(shù)都有很強的錯誤處理功能，假如傳入的thisArg是一個基本類型，也會被使用包裝類替換，雖然不會報錯，但是不推薦這樣寫，盡量傳遞復雜類型的變量作為thisArg。
自定義實現(xiàn)myBind，myCall，myApply
// 先定義一個函數(shù)將任意類型都轉換成對象，用于指向this
function anyToObj（value） {
// symbol, bigint 就不判斷了，直接在default中
switch （typeof value） {
case 'boolean':
return new Boolean（value）;
case 'number':
return new Number（value）;
case 'string':
return new String（value）;
case 'undefined':
return this;
case 'object':
if （value === null） return this; // 這里的this就指向了全局對象
return value;
default:
return value;
}
}
/* myBind */
Function.prototype.myBind = function （thisArg, …argArray） {
// 防止出現(xiàn) const myBind = Function.prototype.myBind; myBind（）;
if （typeof this !== 'function'） {
throw new TypeError（'myBind must be called on a function'）;
}
const that = this; // this 就指向 f.myBind（） 的 f
const thatArg = anyToObj（thisArg）; // 處理一下thisArg
const myBound = function （…args） {
// 指定唯一的鍵
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = that; // 將 that 函數(shù)賦值給一個對象的屬性
let ret;
if （this instanceof myBound） {
// 調用 myBind 之后返回的是 myBound，假如調用 new myBound（），就會進這個分支
ret = new thatArg.tempKey（…argArray.concat（args））;
} else {
// 這里是調用 myBound（），這樣調用 tempKey 方法里的 this 就指向了 thatArg
ret = thatArg.tempKey（…argArray.concat（args））;
}
// 不會對對象造成污染
delete thatArg.tempKey;
return ret;
};
return myBound;
};
/* myCall */
// 與 myBind 相比直接調用了
Function.prototype.myCall = function （thisArg, …argArray） {
if （typeof this !== 'function'） {
throw new TypeError（'myCall must be called on a function'）;
}
const thatArg = anyToObj（thisArg）;
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = this;
const ret = thatArg.tempKey（…argArray）;
delete thatArg.tempKey;
return ret;
};
/* myApply */
// 與 myCall 相比，第二個參數(shù)希望是數(shù)組形式，多了個 CreateListFromArrayLike 用于轉化 argArray
Function.prototype.myApply = function （thisArg, argArray） {
if （typeof this !== 'function'） {
throw new TypeError（'myApply must be called on a function'）;
}
const CreateListFromArrayLike = function （val） {
// 同樣缺乏 bigint 的處理，直接放在 default 中
switch （typeof val） {
case 'string':
case 'number':
case 'boolean':
case 'symbol':
throw new TypeError（'CreateListFromArrayLike called on non-object'）;
case 'object':
if （Array.isArray（val）） return val;
if （val === null） return [];
return Array.from（val）;
default:
return [];
}
};
// 檢測 argArray 的類型
const tempArgArray = CreateListFromArrayLike（argArray）;
const thatArg = anyToObj（thisArg）;
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = this;
const ret = thatArg.tempKey（…tempArgArray）;
delete thatArg.tempKey;
return ret;
};
// 這樣 myBind，myCall，myApply就完成了，下面進行測試
var obj = {
x: 'obj',
getX: function（a, b, c） {
console.log（a, b, c）;
return this.x;
}
}
var x = 'window';
// 1 2 3
// 'obj'
console.log（obj.getX（1, 2, 3））;
// target變成一個全局函數(shù)，this 指向全局對象
const target = obj.getX;
// 1 2 3
// 'window'
console.log（target（1, 2, 3））;
/* myBind */
const targetBound = target.myBind（obj, 1）;
// 1 2 3
// 'obj'
console.log（targetBound（2, 3））;
/* myCall */
// 4 5 6
// 'obj'
console.log（target.myCall（obj, 4, 5, 6））;
/* myApply */
// 7 8 9
// 'obj'
console.log（target.myApply（obj, [7, 8, 9]））;
“如何改變函數(shù)的this指向”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！
新聞標題：如何改變函數(shù)的this指向
網站URL：http://muchs.cn/article18/ghcpdp.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、網站內鏈、企業(yè)網站制作、響應式網站、定制開發(fā)、網頁設計公司
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 成都網站建設-響應式網站建設需要重視網站兼容性嗎？ 2016-09-27
- 響應式網站設計和普通站的對比 2015-08-03
- 如何設計一個移動響應式網站 2014-08-19
- 網站建設公司應推薦哪些企業(yè)建設響應式網站 2022-06-20
- 建設響應式網站的必要性與疑難情況解決 2021-11-26
- 響應式網站建設的優(yōu)勢 2014-02-14
- 響應式網站建設變得越來越重要 2022-12-06
- 浐灞響應式網站制作：網站建設做完后企業(yè)需要做什么？ 2023-02-23
- 當今企業(yè)網站改版都要做響應式網站？ 2013-07-16
- 衡陽網站建設-響應式網站可以降低網站建設的成本 2021-11-28
- 響應式網站建設都有哪些優(yōu)點 2016-10-30
- 所有的行業(yè)都適合進行響應式網站制作嗎？ 2016-10-18