JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
更新時間：2022年09月04日 15:42:56 作者：hello_exec
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
普通函數(shù)
具名普通函數(shù)、匿名普通函數(shù)，在不作為對象的屬性值的情況下，其內(nèi)部的 this 總是指向代碼運行環(huán)境下的全局對象 ( 例如，瀏覽器中的 window )。
示例：
(function() {
console.log(this); // window
(function() {
console.log(this); // window
(function() {
console.log(this); // window
})()
})()
})() 普通函數(shù)，均可以通過其 bind、call、apply 方法 來改變其內(nèi)部 this 的指向。
示例：
(function() {
const func = (function() { console.log(this) }).bind('hello')
const obj = {
func,
func1: (function() { console.log(this) }).bind('hello'),
func2: (function F() { console.log(this) }).bind('hello')
}
func() // String {'hello'}
obj.func() // String {'hello'}
obj.func1() // String {'hello'}
obj.func2() // String {'hello'}
})() 當普通函數(shù)( 具名的、匿名的、外部定義的方法 )，作為對象的屬性值被引用的時候，其內(nèi)部的 this 指向該屬性所直接歸屬的對象 。
示例：
(function() {
const func = function() { console.log(this) }
const obj = {
func,
func1: function F() { console.log(this) },
func2() { console.log(this) },
param: {
func,
func1: function F() { console.log(this) },
func2() { console.log(this) }
}
}
func() // window
obj.func() // obj
obj.func1() // obj
obj.func2() // obj
obj.param.func() // obj.param
obj.param.func1() // obj.param
obj.param.func2() // obj.param
})() 箭頭函數(shù)
箭頭函數(shù)，不管是作為獨立的方法 或是 作為對象的屬性值，其內(nèi)部的 this 均指向 該箭頭函數(shù)被定義時所在的上下文中對應的 this。
示例：
(function() {
/** 外層作用域 */
const arrowfunc = () => console.log(this)
console.log('-- 外層作用域 --');
console.log(this); // String {'hello'}
arrowfunc(); // String {'hello'}
(function() {
/** 內(nèi)層作用域 */
const arrowfunc1 = () => console.log(this)
console.log('-- 內(nèi)層作用域 --');
console.log(this); // String {'world'}
arrowfunc() // String {'hello'}
arrowfunc1() // String {'world'}
/** 函數(shù)作為對象屬性值 */
const obj = {
arrowfunc,
arrowfunc1,
param: {
arrowfunc,
arrowfunc1,
arrowfunc2: () => console.log(this)
}
}
console.log('-- 函數(shù)作為對象屬性值 --');
obj.arrowfunc() // String {'hello'}
obj.arrowfunc1() // String {'world'}
obj.param.arrowfunc() // String {'hello'}
obj.param.arrowfunc1() // String {'world'}
obj.param.arrowfunc2() // String {'world'}
}).bind('world')()
}).bind('hello')()
箭頭函數(shù) 也有 bind、call、apply 方法，與普通函數(shù)一樣可以通過這三個方法預設箭頭函數(shù)的入?yún)⒅怠?/p>
試圖通過這三個方法改變箭頭函數(shù)內(nèi)部 this 的指向，雖不會報錯但卻是無效的。
示例：
(function() {
console.log(this); // String {'hello'}
(() => {
console.log(this); // String {'hello'}
(() => {
console.log(this) // String {'hello'}
}).bind('bbb')()
}).bind('aaa')();
((a, b, c) => {
console.log(this) // String {'hello'}
console.log(a) // a
console.log(b) // b
console.log(c) // c
}).bind(null, 1, 2)(3)
}).bind('hello')() 附：
* 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用，強制使用 new 運算符作用在箭頭函數(shù)上，將會報如下錯誤
new (() => {}) // Uncaught TypeError: (intermediate value) is not a constructor * 箭頭函數(shù)內(nèi)部沒有定義 arguments 變量，箭頭函數(shù)所在的作用域也不存在 arguments 的情況下，應用該變量會報錯。
(function() {
((a) => {
console.log(a) // 1
console.log(arguments) // Arguments ['hello']
})(1)
})('hello');
(() => {
console.log(arguments) // Uncaught ReferenceError: arguments is not defined
})();
* 普通函數(shù)都有原型屬性 prototype，箭頭函數(shù)沒有這個屬性。
(function() {}).prototype // {constructor: ?}
(() => {}).prototype // undefined到此這篇關(guān)于JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解的文章就介紹到這了,更多相關(guān)JS函數(shù)this的指向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇layer 關(guān)閉指定彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了在JS中如何解析HTML字符串,需要的朋友可以參考下2014-04-04
js中的bigint類型轉(zhuǎn)化為json字符串時報無法序列化的問題
JSON序列化指將JSON對象轉(zhuǎn)換為JSON字符串,J實現(xiàn)方式有兩種：一種是調(diào)用JSON對象內(nèi)置的stringify()函數(shù),一種是為對象自定義toJSON()函數(shù),本文重點介紹js中的bigint類型轉(zhuǎn)化為json字符串時報無法序列化的問題,感興趣的朋友一起看看吧2024-01-01
淺談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預
下面小編就為大家?guī)硪黄獪\談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案
這篇文章主要介紹了JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了使用javascript獲取頁面名稱，非常的簡潔，有需要的小伙伴參考下2014-12-12
在JavaScript的ES6版本中,引入了WeakMap和WeakSet這兩種新的數(shù)據(jù)結(jié)構(gòu),與Map和Set相比,它們有一些特殊的特點和用途,使它們在處理內(nèi)存泄漏問題、管理對象私有數(shù)據(jù)、處理對象的唯一性等場景中有顯著的優(yōu)勢,本文將深入探討WeakMap和WeakSet的特性和用途,一起看看吧2023-12-12
這篇文章主要介紹了CocosCreator通用框架設計之網(wǎng)絡，詳細講解了WebSocket的原理和使用方法，對WebSocket感興趣的同學，一定要看一下2021-04-04
詳解JavaScript什么情況下不建議使用箭頭函數(shù)
箭頭函數(shù)作為ES6新增的語法，在使用時不僅能使得代碼更加簡潔，而且在某些場景避免this指向問題。但是箭頭函數(shù)不是萬能的，也有自己的缺點以及不適用的場景，本文總結(jié)了JavaScript什么情況下不建議使用箭頭函數(shù)，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了在小程序中使用canvas的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09