JS函數(shù)本身的作用域實例分析
本文實例講述了JS函數(shù)本身的作用域。分享給大家供大家參考,具體如下:
函數(shù)本身也是一個值,也有自己的作用域。它的作用域與變量一樣,就是其聲明時所在的作用域,與其運行時所在作用域無關。
var a = 1var x = function() { console.log(a)}function f() { var a = 2 x()}f()
上面代碼中,函數(shù)x是在函數(shù)f的外部聲明的,所以它的作用域綁定外層,內部變量a不會到函數(shù)f體內取值,所以輸出1,而不是2。
總之,函數(shù)執(zhí)行時所在的作用域,是定義時的作用域,而不是調用時所在的作用域
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的內部變量a,導致報錯。
同樣的函數(shù)本內部聲明的函數(shù),作用域綁定在函數(shù)體內部
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ù)內部,其父級作用域為show函數(shù)的作用域,show函數(shù)中this指向調用show函數(shù)的對象,即obj,obj中有id屬性,且值為2,所以輸出2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章:
1. ASP基礎入門第四篇(腳本變量、函數(shù)、過程和條件語句)2. ASP將數(shù)字轉中文數(shù)字(大寫金額)的函數(shù)3. jscript與vbscript 操作XML元素屬性的代碼4. jsp 實現(xiàn)的簡易mvc模式示例5. php使用正則驗證密碼字段的復雜強度原理詳細講解 原創(chuàng)6. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)7. 基于PHP做個圖片防盜鏈8. Jsp servlet驗證碼工具類分享9. XML在語音合成中的應用10. JSP開發(fā)之hibernate之單向多對一關聯(lián)的實例
