實例詳解JavaScript靜態(tài)作用域和動態(tài)作用域
前言
在文章最開始,先學習幾個概念:
- 作用域:《你不知道的js》中指出,作用域是一套規(guī)則,這套規(guī)則用來管理引擎如何在當前作用域以及嵌套的子作用域中根據(jù)標識符名稱進行變量查找。簡單來說,作用域規(guī)定了如何查找變量。
- 靜態(tài)作用域:又稱詞法作用域,函數(shù)的作用域在函數(shù)定義的時候就決定了,通俗點說就是你在寫代碼時將變量和塊作用域?qū)懺谀睦餂Q定的。
- 動態(tài)作用域:函數(shù)的作用域在函數(shù)調(diào)用時才決定的。
靜態(tài)作用域與動態(tài)作用域
JavaScript采用的是靜態(tài)作用域,函數(shù)定義的位置就決定了函數(shù)的作用域。
具體看一個例子,理解一下什么是靜態(tài)作用域與動態(tài)作用域的區(qū)別
var val = 1; function test() { console.log(val); } function bar() { var val = 2; test(); } bar(); // 結(jié)果是???
上面代碼中:
- 我們首先定義全局變量 val,賦值為 1
- 聲明一個函數(shù) text,函數(shù)的功能是打印 val 這個變量的值
- 聲明一個函數(shù) bar,函數(shù)內(nèi)部定義局部變量 val,賦值為 2;并且函數(shù)內(nèi)部執(zhí)行 test() 函數(shù)
- 執(zhí)行 bar() 函數(shù)
靜態(tài)作用域執(zhí)行過程
當執(zhí)行 test 函數(shù)時,先從 test 函數(shù)內(nèi)部查找是否有變量 val,如果沒有,就沿定義函數(shù)的位置,查找上一層的代碼,查找到全局變量 val ,其值為 1。
作用域查找始終從運行時所處的最內(nèi)層作用域開始查找,逐級向外查找,直到遇見第一個匹配的標識符為止。
無論函數(shù)在哪里被調(diào)用,無論如何被調(diào)用,它的作用域只由函數(shù)定義所處的位置決定。
動態(tài)作用域執(zhí)行過程
執(zhí)行 test 函數(shù),首先從函數(shù)內(nèi)部查詢 val 變量,如果沒有,就從調(diào)用函數(shù)的作用域,即 bar 函數(shù)的作用域內(nèi)部查找變量 val,所以打印結(jié)果 2
習題
我們來看三個習題,好好消化理解一下靜態(tài)作用域: 函數(shù)定義位置就決定了作用域。
習題一
var a = 1 function fn1(){ function fn3(){ var a = 4 fn2() } var a = 2 return fn3 } function fn2(){ console.log(a) } var fn = fn1() fn()
上面代碼中:
- 我們首先定義全局變量 a,賦值為 1
- 聲明一個函數(shù) fn1,函數(shù)的內(nèi)部分別聲明了函數(shù) fn3,定義局部變量 a,賦值為 2,返回值為 fn3 函數(shù)
- fn3 函數(shù)內(nèi)部定義局部變量 a,賦值為 4,執(zhí)行 fn2()
- 聲明函數(shù) fn2, 函數(shù)的功能是,打印 a 的值
- fn 賦值為 fn1() 的返回值
- 執(zhí)行 fn() (相當于執(zhí)行 fn3 函數(shù))
做題之前,一定要理解 靜態(tài)作用域 的概念。該題 fn2 定義在全局上,當 fn2 中找不到變量 a 時,它會去全局中尋找,與 fn1 和 fn3 毫無關(guān)系,打印 1.
習題二
var a = 1 function fn1(){ function fn2(){ console.log(a) } function fn3(){ var a = 4 fn2() } var a = 2 return fn3 } var fn = fn1() fn()
fn2 是定義在函數(shù) fn1 內(nèi)部,因此當 fn2 內(nèi)部沒有變量 a 時,它會去 fn1 中尋找,跟函數(shù) fn3 毫無關(guān)系,如果 fn1 中尋找不到,會到 fn1 定義的位置的上一層(全局)尋找,直至尋找到第一個匹配的標識符。本題可以在 fn1 中找到變量 a,打印 2
習題三
var a = 1; function fn1(){ function fn3(){ function fn2(){ console.log(a) } var a; fn2() a = 4 } var a = 2 return fn3 } var fn = fn1() fn()
該題 fn2 定義在函數(shù) fn3 中,當 fn2 中找不到變量 a 時,會首先去 fn3 中查找,如果還查找不到,會到 fn1 中查找。本題可以在 fn3 中找到變量 a,但由于 fn2() 執(zhí)行時,a 未賦值,打印 undefined。
總結(jié)
關(guān)于JavaScript 的靜態(tài)作用域,我們只需要記住一句話:函數(shù)定義的位置就決定了函數(shù)的作用域,遇到題目時不要被別的代碼干擾到。
到此這篇關(guān)于JavaScript靜態(tài)作用域和動態(tài)作用域的文章就介紹到這了,更多相關(guān)JS靜態(tài)作用域和動態(tài)作用域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用濾鏡設(shè)置透明導致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設(shè)置透明導致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。2011-04-04JavaScript 用cloneNode方法克隆節(jié)點的代碼
很多時候我們需要通過HTML DOM 的方式,用JavaScript 動態(tài)生成很多相同的節(jié)點,包括其子節(jié)點2012-10-10js實現(xiàn)json數(shù)據(jù)行到列的轉(zhuǎn)換的實例代碼
為了實現(xiàn)這樣的數(shù)據(jù)顯示出來三個序列,分別為鄭州、新鄉(xiāng)、安陽的電量,就需要自己實現(xiàn)對這樣數(shù)據(jù)的轉(zhuǎn)換,轉(zhuǎn)換成如下的形式:2013-08-08js的繼承方法小結(jié)(prototype、call、apply)(推薦)
這篇文章主要介紹了js的繼承方法小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04