JS函數(shù)本身的作用域實例分析

更新時間：2020年03月16日 09:42:20 作者：wangliang_001

這篇文章主要介紹了JS函數(shù)本身的作用域,結合實例形式分析了JS函數(shù)作用域相關原理、操作技巧與使用注意事項,需要的朋友可以參考下

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

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

var a = 1
var 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程序設計有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线