JS函數(shù)本身的作用域?qū)嵗治?/h1>
瀏覽:289日期:2024-05-17 13:45:19
本文實(shí)例講述了JS函數(shù)本身的作用域。分享給大家供大家參考,具體如下:
函數(shù)本身也是一個(gè)值,也有自己的作用域。它的作用域與變量一樣,就是其聲明時(shí)所在的作用域,與其運(yùn)行時(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不會(huì)到函數(shù)f體內(nèi)取值,所以輸出1,而不是2。
總之,函數(shù)執(zhí)行時(shí)所在的作用域,是定義時(shí)的作用域,而不是調(diào)用時(shí)所在的作用域
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)致報(bào)錯(cuò)。
同樣的函數(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ù)的作用域,是和父級(jí)上下文綁定在一起的
var obj = { id: 1, show: () => { console.log(this.id) }} obj.show() // undefined
上面代碼show函數(shù)是一個(gè)箭頭函數(shù),其this指向父級(jí),而父級(jí)是一個(gè)頂級(jí)對(duì)象,window,window.id沒有定義,所以返回undefined
var obj = { id: 2, show: function() { return () => { console.log(this.id) } }}obj.show()() // 2
上面代碼中,箭頭函數(shù)定義在show函數(shù)內(nèi)部,其父級(jí)作用域?yàn)閟how函數(shù)的作用域,show函數(shù)中this指向調(diào)用show函數(shù)的對(duì)象,即obj,obj中有id屬性,且值為2,所以輸出2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
標(biāo)簽:
JavaScript
相關(guān)文章:
1. IntelliJ IDEA導(dǎo)入jar包的方法2. 基于Java實(shí)現(xiàn)記事本功能3. docker鏡像完全卸載的操作步驟4. idea刪除項(xiàng)目的操作方法5. IntelliJ IDEA配置Tomcat服務(wù)器的方法6. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法7. idea打開多個(gè)窗口的操作方法8. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程9. idea導(dǎo)入maven項(xiàng)目的方法10. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法
本文實(shí)例講述了JS函數(shù)本身的作用域。分享給大家供大家參考,具體如下:
函數(shù)本身也是一個(gè)值,也有自己的作用域。它的作用域與變量一樣,就是其聲明時(shí)所在的作用域,與其運(yùn)行時(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不會(huì)到函數(shù)f體內(nèi)取值,所以輸出1,而不是2。
總之,函數(shù)執(zhí)行時(shí)所在的作用域,是定義時(shí)的作用域,而不是調(diào)用時(shí)所在的作用域
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)致報(bào)錯(cuò)。
同樣的函數(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ù)的作用域,是和父級(jí)上下文綁定在一起的
var obj = { id: 1, show: () => { console.log(this.id) }} obj.show() // undefined
上面代碼show函數(shù)是一個(gè)箭頭函數(shù),其this指向父級(jí),而父級(jí)是一個(gè)頂級(jí)對(duì)象,window,window.id沒有定義,所以返回undefined
var obj = { id: 2, show: function() { return () => { console.log(this.id) } }}obj.show()() // 2
上面代碼中,箭頭函數(shù)定義在show函數(shù)內(nèi)部,其父級(jí)作用域?yàn)閟how函數(shù)的作用域,show函數(shù)中this指向調(diào)用show函數(shù)的對(duì)象,即obj,obj中有id屬性,且值為2,所以輸出2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

網(wǎng)公網(wǎng)安備