es6函數(shù)中的作用域?qū)嵗治?/h1>
更新時(shí)間:2020年04月18日 10:39:36 作者:wangliang_001
這篇文章主要介紹了es6函數(shù)中的作用域,結(jié)合實(shí)例形式分析了es6函數(shù)作用域相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了es6函數(shù)中的作用域。分享給大家供大家參考,具體如下:
一旦設(shè)置了參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域(context)。等到初始化結(jié)束,這個(gè)作用域就會(huì)消失。這種語(yǔ)法行為,在不設(shè)置參數(shù)默認(rèn)值,是不會(huì)出現(xiàn)的。
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2) // 2
上面的代碼中,參數(shù)y的默認(rèn)值等于變量x。調(diào)用函數(shù)f時(shí),參數(shù)形成一個(gè)單獨(dú)的作用域。在這個(gè)作用域里面,默認(rèn)值變量x指向第一個(gè)參數(shù)x,而不是全局變量x,所以輸出是2。
再看下面的例子。
let x = 1;
function f(y = x) {
let x = 2;
console.log(y)
}
上面代碼中,函數(shù)f調(diào)用時(shí),參數(shù)y = x形成一個(gè)單獨(dú)的作用域,這個(gè)作用域里面,變量x本身沒(méi)有定義,所以指向外層的全局變量x。函數(shù)調(diào)用時(shí),函數(shù)體內(nèi)部的局部變量x影響不到默認(rèn)值變量x。
如果此時(shí),全局變量x不存在,就會(huì)報(bào)錯(cuò)。
function f(y = x) {
let x = 2;
console.log(y)
}
f() // ReferenceError: x is not defined
下面這樣寫,也會(huì)報(bào)錯(cuò)。
var x = 1;
function foo(x = x) {
// ...
}
foo() // ReferenceError: x is not defined
上面代碼中,參數(shù)x = x形成一個(gè)單獨(dú)作用域,實(shí)際執(zhí)行的是 let x = x,由于暫時(shí)性死區(qū)的原因,這行代碼會(huì)報(bào)錯(cuò)"x未定義"。
如果參數(shù)的默認(rèn)值是一個(gè)函數(shù),該函數(shù)的作用域也遵守這個(gè)規(guī)則。請(qǐng)看下面的例子。
let foo = 'outer'
function bar(func = () => foo) {
let foo = 'inner';
console.log(func())
}
bar() // outer
上面代碼中,函數(shù)bar的參數(shù)func的默認(rèn)值是一個(gè)匿名函數(shù),返回值是變量foo。函數(shù)參數(shù)形成的單獨(dú)的作用域里面,并沒(méi)有定義變量foo,所以foo指向外層的全局變量foo,因此輸出outer。
如果寫成下面這樣,就會(huì)報(bào)錯(cuò)。
function bar (func = () => foo) {
let foo = 'inner'
console.log(func())
}
bar() // ReferenceError: foo is not defined
上面代碼中,匿名函數(shù)里面的foo指向函數(shù)外層,但是函數(shù)外層并沒(méi)有聲明變量foo,所以報(bào)錯(cuò)了。
下面是一個(gè)更復(fù)雜的例子。
var x = 1;
function foo(x, y = function() {x = 2;}) {
var x = 3;
y()
console.log(x)
}
foo() // 3
x // 1
上面代碼中,函數(shù)foo的參數(shù)形成一個(gè)單獨(dú)作用域。這個(gè)作用域里面,首先聲明了變量x,然后聲明了變量y,y的默認(rèn)值是一個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)內(nèi)部的變量x, 指向同一個(gè)作用域的第一個(gè)參數(shù)x。函數(shù)foo內(nèi)部又聲明了一個(gè)內(nèi)部變量。該變量與第一個(gè)參數(shù)x由于不是同一個(gè)作用域,所以不是同一個(gè)變量,因此執(zhí)行y后,內(nèi)部變量x和外部全局變量x的值都沒(méi)變。
如果將var x = 3的var 去除,函數(shù)foo的內(nèi)部變量x就指向第一個(gè)參數(shù),與匿名函數(shù)內(nèi)部的x是一致的,所以最后輸出的就是2,而外層的全局變量x依然不受影響。
感興趣的朋友可以使用在線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ì)有所幫助。
您可能感興趣的文章:- ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
- javascript ES6中箭頭函數(shù)注意細(xì)節(jié)小結(jié)
- ES6中的箭頭函數(shù)實(shí)例詳解
- 關(guān)于ES6箭頭函數(shù)中的this問(wèn)題
- 詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
- 深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
- JavaScript ES6箭頭函數(shù)使用指南
- es6函數(shù)之尾調(diào)用優(yōu)化實(shí)例分析
- es6函數(shù)之尾遞歸用法實(shí)例分析
- es6函數(shù)name屬性功能與用法實(shí)例分析
- es6函數(shù)之箭頭函數(shù)用法實(shí)例詳解
相關(guān)文章
-
javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2019-12-12
-
javascript獲取wx.config內(nèi)部字段解決微信分享
這篇文章主要介紹了javascript獲取wx.config內(nèi)部字段解決微信分享,需要的朋友可以參考下 2016-03-03
-
JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果,結(jié)合實(shí)例形式分析了javascript時(shí)間選擇框插件的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下 2016-08-08
-
JS數(shù)組Reduce方法功能與用法實(shí)例詳解
這篇文章主要介紹了JS數(shù)組Reduce方法功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組Reduce方法操作數(shù)組統(tǒng)計(jì)、去重等相關(guān)操作技巧,需要的朋友可以參考下 2020-04-04
-
echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getA
最近在開(kāi)發(fā)Echarts忽然遇到了個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下 2023-01-01
-
JavaScript常用對(duì)象的方法和屬性小結(jié)
JavaScript是基于對(duì)象的語(yǔ)言。我們知道,對(duì)象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對(duì)象的系統(tǒng)函數(shù) 2012-01-01
-
如何使Chrome控制臺(tái)支持多行js模式——意外發(fā)現(xiàn)
一直以來(lái),Chrome控制臺(tái)都缺少象IE調(diào)試臺(tái)那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實(shí)也支持多行模式 2013-06-06
-
一文帶你理解微信小程序中RPC通信的實(shí)現(xiàn)
在微信小程序開(kāi)發(fā)中,要實(shí)現(xiàn)兩個(gè)線程之間的通信是一項(xiàng)重要的任務(wù),所以本文就來(lái)講講如何使用小程序的?postMessage?和?addListener?API?來(lái)實(shí)現(xiàn)在兩個(gè)線程之間進(jìn)行高效的?RPC?通信吧 2023-06-06
-
javascript實(shí)現(xiàn)生成并下載txt文件方式
這篇文章主要介紹了javascript實(shí)現(xiàn)生成并下載txt文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教 2022-09-09
最新評(píng)論
本文實(shí)例講述了es6函數(shù)中的作用域。分享給大家供大家參考,具體如下:
一旦設(shè)置了參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域(context)。等到初始化結(jié)束,這個(gè)作用域就會(huì)消失。這種語(yǔ)法行為,在不設(shè)置參數(shù)默認(rèn)值,是不會(huì)出現(xiàn)的。
var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2
上面的代碼中,參數(shù)y的默認(rèn)值等于變量x。調(diào)用函數(shù)f時(shí),參數(shù)形成一個(gè)單獨(dú)的作用域。在這個(gè)作用域里面,默認(rèn)值變量x指向第一個(gè)參數(shù)x,而不是全局變量x,所以輸出是2。
再看下面的例子。
let x = 1; function f(y = x) { let x = 2; console.log(y) }
上面代碼中,函數(shù)f調(diào)用時(shí),參數(shù)y = x形成一個(gè)單獨(dú)的作用域,這個(gè)作用域里面,變量x本身沒(méi)有定義,所以指向外層的全局變量x。函數(shù)調(diào)用時(shí),函數(shù)體內(nèi)部的局部變量x影響不到默認(rèn)值變量x。
如果此時(shí),全局變量x不存在,就會(huì)報(bào)錯(cuò)。
function f(y = x) { let x = 2; console.log(y) } f() // ReferenceError: x is not defined
下面這樣寫,也會(huì)報(bào)錯(cuò)。
var x = 1; function foo(x = x) { // ... } foo() // ReferenceError: x is not defined
上面代碼中,參數(shù)x = x形成一個(gè)單獨(dú)作用域,實(shí)際執(zhí)行的是 let x = x,由于暫時(shí)性死區(qū)的原因,這行代碼會(huì)報(bào)錯(cuò)"x未定義"。
如果參數(shù)的默認(rèn)值是一個(gè)函數(shù),該函數(shù)的作用域也遵守這個(gè)規(guī)則。請(qǐng)看下面的例子。
let foo = 'outer' function bar(func = () => foo) { let foo = 'inner'; console.log(func()) } bar() // outer
上面代碼中,函數(shù)bar的參數(shù)func的默認(rèn)值是一個(gè)匿名函數(shù),返回值是變量foo。函數(shù)參數(shù)形成的單獨(dú)的作用域里面,并沒(méi)有定義變量foo,所以foo指向外層的全局變量foo,因此輸出outer。
如果寫成下面這樣,就會(huì)報(bào)錯(cuò)。
function bar (func = () => foo) { let foo = 'inner' console.log(func()) } bar() // ReferenceError: foo is not defined
上面代碼中,匿名函數(shù)里面的foo指向函數(shù)外層,但是函數(shù)外層并沒(méi)有聲明變量foo,所以報(bào)錯(cuò)了。
下面是一個(gè)更復(fù)雜的例子。
var x = 1; function foo(x, y = function() {x = 2;}) { var x = 3; y() console.log(x) } foo() // 3 x // 1
上面代碼中,函數(shù)foo的參數(shù)形成一個(gè)單獨(dú)作用域。這個(gè)作用域里面,首先聲明了變量x,然后聲明了變量y,y的默認(rèn)值是一個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)內(nèi)部的變量x, 指向同一個(gè)作用域的第一個(gè)參數(shù)x。函數(shù)foo內(nèi)部又聲明了一個(gè)內(nèi)部變量。該變量與第一個(gè)參數(shù)x由于不是同一個(gè)作用域,所以不是同一個(gè)變量,因此執(zhí)行y后,內(nèi)部變量x和外部全局變量x的值都沒(méi)變。
如果將var x = 3的var 去除,函數(shù)foo的內(nèi)部變量x就指向第一個(gè)參數(shù),與匿名函數(shù)內(nèi)部的x是一致的,所以最后輸出的就是2,而外層的全局變量x依然不受影響。
感興趣的朋友可以使用在線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ì)有所幫助。
- ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
- javascript ES6中箭頭函數(shù)注意細(xì)節(jié)小結(jié)
- ES6中的箭頭函數(shù)實(shí)例詳解
- 關(guān)于ES6箭頭函數(shù)中的this問(wèn)題
- 詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
- 深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
- JavaScript ES6箭頭函數(shù)使用指南
- es6函數(shù)之尾調(diào)用優(yōu)化實(shí)例分析
- es6函數(shù)之尾遞歸用法實(shí)例分析
- es6函數(shù)name屬性功能與用法實(shí)例分析
- es6函數(shù)之箭頭函數(shù)用法實(shí)例詳解
相關(guān)文章
javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12javascript獲取wx.config內(nèi)部字段解決微信分享
這篇文章主要介紹了javascript獲取wx.config內(nèi)部字段解決微信分享,需要的朋友可以參考下2016-03-03JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果,結(jié)合實(shí)例形式分析了javascript時(shí)間選擇框插件的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08JS數(shù)組Reduce方法功能與用法實(shí)例詳解
這篇文章主要介紹了JS數(shù)組Reduce方法功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組Reduce方法操作數(shù)組統(tǒng)計(jì)、去重等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getA
最近在開(kāi)發(fā)Echarts忽然遇到了個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下2023-01-01JavaScript常用對(duì)象的方法和屬性小結(jié)
JavaScript是基于對(duì)象的語(yǔ)言。我們知道,對(duì)象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對(duì)象的系統(tǒng)函數(shù)2012-01-01如何使Chrome控制臺(tái)支持多行js模式——意外發(fā)現(xiàn)
一直以來(lái),Chrome控制臺(tái)都缺少象IE調(diào)試臺(tái)那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實(shí)也支持多行模式2013-06-06一文帶你理解微信小程序中RPC通信的實(shí)現(xiàn)
在微信小程序開(kāi)發(fā)中,要實(shí)現(xiàn)兩個(gè)線程之間的通信是一項(xiàng)重要的任務(wù),所以本文就來(lái)講講如何使用小程序的?postMessage?和?addListener?API?來(lái)實(shí)現(xiàn)在兩個(gè)線程之間進(jìn)行高效的?RPC?通信吧2023-06-06javascript實(shí)現(xiàn)生成并下載txt文件方式
這篇文章主要介紹了javascript實(shí)現(xiàn)生成并下載txt文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09