本文例項講述了JS函式本身的作用域。分享給大家供大家參考，具體如下：

函式本身也是一個值，也有自己的作用域。它的作用域與變數一樣，就是其宣告時所在的作用域，與其執行時所在作用域無關。

var a = 1
var x = function() {
 console.log(a)
}

function f() {
 var a = 2
 x()
}

f()

上面程式碼中，函式x是在函式f的外部宣告的，所以它的作用域繫結外層，內部變數a不會到函式f體內取值，所以輸出1，而不是2。

總之，函式執行時所在的作用域，是定義時的作用域，而不是呼叫時所在的作用域

var x = function () {
 console.log(a);
};

function y(f) {
 var a = 2;
 f();
}

y(x)
// ReferenceError: a is not defined

上面程式碼將函式x作為引數，傳入函式y。但是x是在函式y體外宣告的，作用域繫結外層，因此找不到函式y的內部變數a，導致報錯。

同樣的函式本內部宣告的函式，作用域繫結在函式體內部

function foo() {
 var x = 1;
 function bar () {
 console.log(x)
 }
 return bar
}
var x = 2 
var f = foo()
f() // 1

箭頭函式的作用域，是和父級上下文繫結在一起的

var obj = {
 id: 1,show: () => {
 console.log(this.id)
 }
}

 
obj.show() // undefined

上面程式碼show函式是一個箭頭函式，其this指向父級，而父級是一個頂級物件，window,window.id沒有定義，所以返回undefined

var obj = {
 id: 2,show: function() {
 return () => {
  console.log(this.id)
 }
 }
}

obj.show()() // 2

上面程式碼中，箭頭函式定義在show函式內部，其父級作用域為show函式的作用域，show函式中this指向呼叫show函式的物件，即obj，obj中有id屬性，且值為2，所以輸出2

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具

更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。