# 作用域鏈
當查找變量的時候,會先從當前上下文的變量對象中查找,如果沒有找到,就會從父級(詞法層面上的父級)執行上下文的變量對象中查找,一直找到全局上下文的變量對象,也就是全局對象。這樣由多個執行上下文的變量對象構成的鏈表就叫做作用域鏈。
**函數的作用域在函數定義的時候就決定了。**
原因:
這是因為函數有一個內部屬性 [[scope]],當函數創建的時候,就會保存所有父變量對象到其中,你可以理解 [[scope]] 就是所有父變量對象的層級鏈,但是注意:[[scope]] 并不代表完整的作用域鏈!
舉例說明:
```
function foo() {
function bar() {
...
}
}
```
函數創建時,各自的[[scope]]為:
```
foo.[[scope]] = [
globalContext.VO
];
bar.[[scope]] = [
fooContext.AO,
globalContext.VO
];
```
# 函數激活
當函數激活時,進入函數上下文,創建 VO/AO 后,就會將活動對象添加到作用鏈的前端。
這時候執行上下文的作用域鏈,我們命名為 Scope:
```
Scope = [AO].concat([[Scope]]);
```
至此,作用域鏈創建完畢
以下面的例子為例,結合著之前講的變量對象和執行上下文棧,我們來總結一下函數執行上下文中作用域鏈和變量對象的創建過程:
```
var scope = "global scope";
function checkscope(){
var scope2 = 'local scope';
return scope2;
}
checkscope();
```
1. checkscope 函數被創建,保存作用域鏈到 內部屬性[[scope]]
```
checkscope.[[scope]] = [
globalContext.VO
]
```
2. 執行 checkscope 函數,創建 checkscope 函數執行上下文,checkscope 函數執行上下文被壓入執行上下文棧
```
ECStack = [
checkscopeContext,
globalContext
]
```
3. checkscope 函數并不立刻執行,開始做準備工作,第一步:復制函數[[scope]]屬性創建作用域鏈
```
checkscopeContext = {
Scope: checkscope.[[scope]],
}
```
4. 第二步:用 arguments 創建活動對象,隨后初始化活動對象,加入形參、函數聲明、變量聲明
```
checkscopeContext = {
AO: {
arguments: {
length: 0
},
scope2: undefined
}
}
```
5. 第三步:將活動對象壓入 checkscope 作用域鏈頂端
```
checkscopeContext = {
AO: {
arguments: {
length: 0
},
scope2: undefined
},
Scope: [AO, [[Scope]]]
}
```
6. 準備工作做完,開始執行函數,隨著函數的執行,修改 AO 的屬性值
```
checkscopeContext = {
AO: {
arguments: {
length: 0
},
scope2: 'local scope'
},
Scope: [AO, [[Scope]]]
}
```
7. 查找到 scope2 的值,返回后函數執行完畢,函數上下文從執行上下文棧中彈出
```
ECStack = [
globalContext
];
```
- 筆記內容來源
- 你不知道的JavaScript上
- vue
- 環境搭建
- node和npm安裝配置
- 安裝vue-cli并初始化vue項目
- 安裝配置elementUI
- vuex安裝配置
- axios安裝配置
- main.js
- vue基礎入門
- vue-router介紹
- vuex
- vue 原理學習源碼學習
- js正則處理v-bind和語法
- 雙向綁定
- 虛擬dom
- mvvm和render函數
- vue工作項目筆記
- elementUI 表格分頁多選記憶功能
- elementUI表格展開一行
- keepAlive
- vue整合ckeditor5
- this.$router.push 內打開新窗口
- java修改上傳圖片的權限
- 兼容ie11
- 生成二維碼
- base64圖片下載(兼容IE10)
- vue新手引導程序intro.js
- vue插件 devtools
- vue刷新當前頁面
- vue 錨點導航
- axios
- axios與springmvc
- vue-cli 3搭建vue
- git
- git常用命令
- 正則表達式
- 實例demo
- 1
- 新手引導頁
- 純css3從左顯示下劃線動畫導航菜單
- 純css3從中間顯示下劃線動畫導航菜單
- css顯示密碼
- 倒計時時鐘
- 星星評分
- 按鈕懸停效果
- 步驟條
- css動畫按鈕
- input標題獲得焦點上移
- css圖片放大
- css鏡像導航欄
- js
- 通信
- for in 和 for of
- 前端安全問題
- Promise
- 掘金冴羽學習筆記
- 模擬call
- 模擬bind
- 閉包
- 1 作用域
- 2 執行上下文棧
- 3 變量對象
- 4 作用域鏈
- 5 this
- 面向對象
- 基礎知識點
- 渲染機制
- 其他
- 判斷是否為數組
- http
- css
- 基礎知識
- css陰影