JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
普通函數(shù)
具名普通函數(shù)、匿名普通函數(shù)，在不作為對象的屬性值的情況下，其內(nèi)部的 this 總是指向代碼運(yùn)行環(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'}
})() 當(dāng)普通函數(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ù)，不管是作為獨(dú)立的方法 或是 作為對象的屬性值，其內(nèi)部的 this 均指向 該箭頭函數(shù)被定義時所在的上下文中對應(yīng)的 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ù)一樣可以通過這三個方法預(yù)設(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ù)使用，強(qiáng)制使用 new 運(yùn)算符作用在箭頭函數(shù)上，將會報如下錯誤
new (() => {}) // Uncaught TypeError: (intermediate value) is not a constructor * 箭頭函數(shù)內(nèi)部沒有定義 arguments 變量，箭頭函數(shù)所在的作用域也不存在 arguments 的情況下，應(yīng)用該變量會報錯。
(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)文章希望大家以后多多支持腳本之家！
- 一文徹底講通JavaScript普通函數(shù)與箭頭函數(shù)的區(qū)別
- 深度解析JavaScript箭頭函數(shù)與普通函數(shù)兩種工作方式
- 一文詳解JavaScript普通函數(shù)與箭頭函數(shù)的本質(zhì)區(qū)別與使用場景
- 一篇文章詳細(xì)講解JavaScript中的this(普通函數(shù)、箭頭函數(shù)、?函數(shù)運(yùn)用)
- JavaScript箭頭函數(shù)與普通函數(shù)的區(qū)別示例詳解
- JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別
- JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別詳解
- JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
- JavaScript 普通函數(shù)與箭頭函數(shù)的區(qū)別小結(jié)
相關(guān)文章
JavaScript跨域調(diào)用基于JSON的RESTful API
這篇文章主要介紹了JavaScript跨域調(diào)用基于JSON的RESTful API的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
Javascript中的對像賦值與Java中是一樣的,都為引用傳遞.就是說,在把一個對像賦值給一個變量時,那么這個變量所指向的仍就是原來對像的地址.那怎么來做呢 答案是克隆.2008-12-12
Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)保留n位小數(shù)的四舍五入問題示例
這篇文章主要介紹了JS實現(xiàn)保留n位小數(shù)的四舍五入問題,結(jié)合完整實例形式分析了javascript針對小數(shù)四舍五入操作技巧,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹旋轉(zhuǎn)愛心，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了javascript禁用瀏覽器后退按鈕的具體實現(xiàn)，有需要的朋友可以參考下2014-03-03
這篇文章主要幫助大家理解Javascript文件動態(tài)加載，解決了Javascript文件動態(tài)加載時出現(xiàn)的錯誤，感興趣的小伙伴們可以參考一下2016-01-01
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對于大家學(xué)習(xí)javascript中的return知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04