作用域

理解

• 就是一塊"地盤", 一個代碼段所在的區域
• 它是靜態的(相對于上下文對象), 在編寫代碼時就確定了

分類

• 全局作用域
• 函數作用域
• 沒有塊作用域(ES6有了)

作用

• 隔離變量，不同作用域下同名變量不會有沖突

<script type="text/javascript"> /* //沒塊作用域if(true) {var c = 3}console.log(c)*/var a = 10,b = 20function fn(x) {var a = 100,c = 300;console.log('fn()', a, b, c, x)function bar(x) {var a = 1000,d = 400console.log('bar()', a, b, c, d, x)}bar(100)bar(200)}fn(10) </script>

---

作用域與執行上下文

區別1

• 全局作用域之外，每個函數都會創建自己的作用域，作用域在函數定義時就已經確定了。而不是在函數調用時
• 全局執行上下文環境是在全局作用域確定之后, js代碼馬上執行之前創建
• 函數執行上下文是在調用函數時, 函數體代碼執行之前創建

區別2

• 作用域是靜態的, 只要函數定義好了就一直存在, 且不會再變化
• 執行上下文是動態的, 調用函數時創建, 函數調用結束時就會自動釋放

聯系

• 執行上下文(對象)是從屬于所在的作用域
• 全局上下文環境==>全局作用域
• 函數上下文環境==>對應的函數使用域

<script type="text/javascript">var a = 10,b = 20function fn(x) {var a = 100,c = 300;console.log('fn()', a, b, c, x)function bar(x) {var a = 1000,d = 400console.log('bar()', a, b, c, d, x)}bar(100)bar(200)}fn(10) </script>

---

作用域鏈

理解

• 多個上下級關系的作用域形成的鏈, 它的方向是從下向上的(從內到外)
• 查找變量時就是沿著作用域鏈來查找的

查找一個變量的查找規則

• 在當前作用域下的執行上下文中查找對應的屬性, 如果有直接返回, 否則進入2
• 在上一級作用域的執行上下文中查找對應的屬性, 如果有直接返回, 否則進入3
• 再次執行2的相同操作, 直到全局作用域, 如果還找不到就拋出找不到的異常

<script type="text/javascript">var a = 1function fn1() {var b = 2function fn2() {var c = 3console.log(c)console.log(b)console.log(a)console.log(d)}fn2()}fn1() </script>

---

閉包

如何產生閉包?

• 當一個嵌套的內部(子)函數引用了嵌套的外部(父)函數的變量(函數)時, 就產生了閉包

閉包到底是什么?

• 使用chrome調試查看
• 理解一: 閉包是嵌套的內部函數(絕大部分人)
• 理解二: 包含被引用變量(函數)的對象(極少數人)
• 注意: 閉包存在于嵌套的內部函數中

產生閉包的條件?

• 函數嵌套
• 內部函數引用了外部函數的數據(變量/函數)

<script type="text/javascript">function fn1 () {var a = 2var b = 'abc'function fn2 () { //執行函數定義就會產生閉包(不用調用內部函數)console.log(a)}// fn2()}fn1()function fun1() {var a = 3var fun2 = function () {console.log(a)}}fun1() </script>

---

常見的閉包

將函數作為另一個函數的返回值

將函數作為實參傳遞給另一個函數調用

<script type="text/javascript">// 1. 將函數作為另一個函數的返回值function fn1() {var a = 2function fn2() {a++console.log(a)}return fn2}var f = fn1()f() // 3f() // 4// 2. 將函數作為實參傳遞給另一個函數調用function showDelay(msg, time) {setTimeout(function () {alert(msg)}, time)}showDelay('atguigu', 2000)</script>

---

閉包的作用

使用函數內部的變量在函數執行完后, 仍然存活在內存中(延長了局部變量的生命周期)

讓函數外部可以操作(讀寫)到函數內部的數據(變量/函數)

問題:

函數執行完后, 函數內部聲明的局部變量是否還存在? 一般是不存在, 存在于閉中的變量才可能存在

在函數外部能直接訪問函數內部的局部變量嗎? 不能, 但我們可以通過閉包讓外部操作它

<script type="text/javascript">function fn1() {var a = 2function fn2() {a++console.log(a)// return a}function fn3() {a--console.log(a)}return fn3}var f = fn1()f() // 1f() // 0 </script>

---

閉包的生命周期

產生: 在嵌套內部函數定義執行完時就產生了(不是在調用)

死亡: 在嵌套的內部函數成為垃圾對象時

<script type="text/javascript">function fn1() {//此時閉包就已經產生了(函數提升, 內部函數對象已經創建了)var a = 2function fn2 () {a++console.log(a)}return fn2}var f = fn1()f() // 3f() // 4f = null //閉包死亡(包含閉包的函數對象成為垃圾對象) </script>

---

閉包的應用 (自定義JS模塊)

閉包的應用2 : 定義JS模塊

• 具有特定功能的js文件
• 將所有的數據和功能都封裝在一個函數內部(私有的)
• 只向外暴露一個包信n個方法的對象或函數
• 模塊的使用者, 只需要通過模塊暴露的對象調用方法來實現對應的功能

<script type="text/javascript" src="myModule.js"></script> <script type="text/javascript">var module = myModule()module.doSomething()module.doOtherthing() </script>function myModule() {//私有數據var msg = 'My atguigu'//操作數據的函數function doSomething() {console.log('doSomething() '+msg.toUpperCase())}function doOtherthing () {console.log('doOtherthing() '+msg.toLowerCase())}//向外暴露對象(給外部使用的方法)return {doSomething: doSomething,doOtherthing: doOtherthing} }

閉包的應用2 : 定義JS模塊

• 具有特定功能的js文件
• 將所有的數據和功能都封裝在一個函數內部(私有的)
• 只向外暴露一個包信n個方法的對象或函數
• 模塊的使用者, 只需要通過模塊暴露的對象調用方法來實現對應的功能

<script type="text/javascript" src="myModule2.js"></script> <script type="text/javascript">myModule2.doSomething()myModule2.doOtherthing() </script>(function () {//私有數據var msg = 'My atguigu'//操作數據的函數function doSomething() {console.log('doSomething() '+msg.toUpperCase())}function doOtherthing () {console.log('doOtherthing() '+msg.toLowerCase())}//向外暴露對象(給外部使用的方法)window.myModule2 = {doSomething: doSomething,doOtherthing: doOtherthing} })()

---

閉包的缺點及解決

缺點

• 函數執行完后, 函數內的局部變量沒有釋放, 占用內存時間會變長
• 容易造成內存泄露

解決

• 能不用閉包就不用
• 及時釋放

<script type="text/javascript">function fn1() {var arr = new Array[100000]function fn2() {console.log(arr.length)}return fn2}var f = fn1()f()f = null //讓內部函數成為垃圾對象-->回收閉包 </script>

總結

以上是生活随笔為你收集整理的前端基础知识2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。