JS函數(shù)本身的作用域?qū)嵗治?/h1>

瀏覽：134日期：2024-05-17 13:45:19

本文實例講述了JS函數(shù)本身的作用域。分享給大家供大家參考，具體如下：

函數(shù)本身也是一個值，也有自己的作用域。它的作用域與變量一樣，就是其聲明時所在的作用域，與其運行時所在作用域無關(guān)。

var a = 1var 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è)計有所幫助。

標(biāo)簽： JavaScript

上一條：JS函數(shù)參數(shù)的傳遞與同名參數(shù)實例分析下一條：js+canvas實現(xiàn)紙牌游戲

相關(guān)文章：

1. HTML DOM setInterval和clearInterval方法案例詳解2. WML語言的基本情況3. 使用css實現(xiàn)全兼容tooltip提示框4. CSS hack用法案例詳解5. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案6. css代碼優(yōu)化的12個技巧7. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)8. 使用純HTML的通用數(shù)據(jù)管理和服務(wù)9. 告別AJAX實現(xiàn)無刷新提交表單10. css進階學(xué)習(xí) 選擇符