JS函數(shù)本身的作用域?qū)嵗治?/h1>
更新時間：2020年03月16日 09:42:20 作者：wangliang_001
這篇文章主要介紹了JS函數(shù)本身的作用域,結(jié)合實例形式分析了JS函數(shù)作用域相關(guān)原理、操作技巧與使用注意事項,需要的朋友可以參考下
本文實例講述了JS函數(shù)本身的作用域。分享給大家供大家參考，具體如下：
函數(shù)本身也是一個值，也有自己的作用域。它的作用域與變量一樣，就是其聲明時所在的作用域，與其運行時所在作用域無關(guān)。
var a = 1
var x = function() {
console.log(a)
}
function f() {
var a = 2
x()
}
f()
上面代碼中，函數(shù)x是在函數(shù)f的外部聲明的，所以它的作用域綁定外層，內(nèi)部變量a不會到函數(shù)f體內(nèi)取值，所以輸出1，而不是2。
總之，函數(shù)執(zhí)行時所在的作用域，是定義時的作用域，而不是調(diào)用時所在的作用域
var x = function () {
console.log(a);
};
function y(f) {
var a = 2;
f();
}
y(x)
// ReferenceError: a is not defined
上面代碼將函數(shù)x作為參數(shù)，傳入函數(shù)y。但是x是在函數(shù)y體外聲明的，作用域綁定外層，因此找不到函數(shù)y的內(nèi)部變量a，導(dǎo)致報錯。
同樣的函數(shù)本內(nèi)部聲明的函數(shù)，作用域綁定在函數(shù)體內(nèi)部
function foo() {
var x = 1;
function bar () {
console.log(x)
}
return bar
}
var x = 2
var f = foo()
f() // 1
箭頭函數(shù)的作用域，是和父級上下文綁定在一起的
var obj = {
id: 1,
show: () => {
console.log(this.id)
}
}
obj.show() // undefined
上面代碼show函數(shù)是一個箭頭函數(shù)，其this指向父級，而父級是一個頂級對象，window,window.id沒有定義，所以返回undefined
var obj = {
id: 2,
show: function() {
return () => {
console.log(this.id)
}
}
}
obj.show()() // 2
上面代碼中，箭頭函數(shù)定義在show函數(shù)內(nèi)部，其父級作用域為show函數(shù)的作用域，show函數(shù)中this指向調(diào)用show函數(shù)的對象，即obj，obj中有id屬性，且值為2，所以輸出2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
-
js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
這篇文章主要介紹了js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化，感興趣的小伙伴們可以參考一下 2016-01-01
-
由于安全方面的考慮，Javascript被限制了跨域訪問的能力，但是有時候我們希望能夠做一些合理的跨域訪問的事情，那么怎么辦呢？
2009-02-02
-
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下 2017-03-03
-
這篇文章主要為大家信息介紹了JavaScript中的常見錯誤與異常處理的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下 2024-01-01
-
這篇文章主要為大家詳細(xì)介紹了bootstrap實現(xiàn)圖片自動輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2016-12-12
-
Javascript實現(xiàn)關(guān)閉廣告效果
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2021-01-01
-
這篇文章主要介紹了如何使用three.js 制作一個三維的推箱子游戲，文中代碼非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下 2020-07-07
-
這篇文章主要介紹了JavaScript常用小技巧小結(jié),需要的朋友可以參考下 2014-12-12
-
微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下 2019-08-08
-
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)號碼驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2022-07-07
最新評論
本文實例講述了JS函數(shù)本身的作用域。分享給大家供大家參考，具體如下：
函數(shù)本身也是一個值，也有自己的作用域。它的作用域與變量一樣，就是其聲明時所在的作用域，與其運行時所在作用域無關(guān)。
var a = 1
var x = function() {
console.log(a)
}
function f() {
var a = 2
x()
}
f()
上面代碼中，函數(shù)x是在函數(shù)f的外部聲明的，所以它的作用域綁定外層，內(nèi)部變量a不會到函數(shù)f體內(nèi)取值，所以輸出1，而不是2。
總之，函數(shù)執(zhí)行時所在的作用域，是定義時的作用域，而不是調(diào)用時所在的作用域
var x = function () {
console.log(a);
};
function y(f) {
var a = 2;
f();
}
y(x)
// ReferenceError: a is not defined
上面代碼將函數(shù)x作為參數(shù)，傳入函數(shù)y。但是x是在函數(shù)y體外聲明的，作用域綁定外層，因此找不到函數(shù)y的內(nèi)部變量a，導(dǎo)致報錯。
同樣的函數(shù)本內(nèi)部聲明的函數(shù)，作用域綁定在函數(shù)體內(nèi)部
function foo() {
var x = 1;
function bar () {
console.log(x)
}
return bar
}
var x = 2
var f = foo()
f() // 1
箭頭函數(shù)的作用域，是和父級上下文綁定在一起的
var obj = {
id: 1,
show: () => {
console.log(this.id)
}
}
obj.show() // undefined
上面代碼show函數(shù)是一個箭頭函數(shù)，其this指向父級，而父級是一個頂級對象，window,window.id沒有定義，所以返回undefined
var obj = {
id: 2,
show: function() {
return () => {
console.log(this.id)
}
}
}
obj.show()() // 2
上面代碼中，箭頭函數(shù)定義在show函數(shù)內(nèi)部，其父級作用域為show函數(shù)的作用域，show函數(shù)中this指向調(diào)用show函數(shù)的對象，即obj，obj中有id屬性，且值為2，所以輸出2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
-
js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
這篇文章主要介紹了js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化，感興趣的小伙伴們可以參考一下2016-01-01 - 由于安全方面的考慮，Javascript被限制了跨域訪問的能力，但是有時候我們希望能夠做一些合理的跨域訪問的事情，那么怎么辦呢？2009-02-02
- 這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
- 這篇文章主要為大家信息介紹了JavaScript中的常見錯誤與異常處理的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
- 這篇文章主要為大家詳細(xì)介紹了bootstrap實現(xiàn)圖片自動輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
-
Javascript實現(xiàn)關(guān)閉廣告效果
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01 - 這篇文章主要介紹了如何使用three.js 制作一個三維的推箱子游戲，文中代碼非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
- 這篇文章主要介紹了JavaScript常用小技巧小結(jié),需要的朋友可以參考下2014-12-12
-
微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08 - 這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)號碼驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07