作用域

理解

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

分類

• 全局作用域
• 函數(shù)作用域
• 沒有塊作用域(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>

---

作用域與執(zhí)行上下文

區(qū)別1

• 全局作用域之外，每個函數(shù)都會創(chuàng)建自己的作用域，作用域在函數(shù)定義時就已經(jīng)確定了。而不是在函數(shù)調(diào)用時
• 全局執(zhí)行上下文環(huán)境是在全局作用域確定之后, js代碼馬上執(zhí)行之前創(chuàng)建
• 函數(shù)執(zhí)行上下文是在調(diào)用函數(shù)時, 函數(shù)體代碼執(zhí)行之前創(chuàng)建

區(qū)別2

• 作用域是靜態(tài)的, 只要函數(shù)定義好了就一直存在, 且不會再變化
• 執(zhí)行上下文是動態(tài)的, 調(diào)用函數(shù)時創(chuàng)建, 函數(shù)調(diào)用結(jié)束時就會自動釋放

聯(lián)系

• 執(zhí)行上下文(對象)是從屬于所在的作用域
• 全局上下文環(huán)境==>全局作用域
• 函數(shù)上下文環(huán)境==>對應(yīng)的函數(shù)使用域

<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>

---

作用域鏈

理解

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

查找一個變量的查找規(guī)則

• 在當(dāng)前作用域下的執(zhí)行上下文中查找對應(yīng)的屬性, 如果有直接返回, 否則進(jìn)入2
• 在上一級作用域的執(zhí)行上下文中查找對應(yīng)的屬性, 如果有直接返回, 否則進(jìn)入3
• 再次執(zhí)行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>

---

閉包

如何產(chǎn)生閉包?

• 當(dāng)一個嵌套的內(nèi)部(子)函數(shù)引用了嵌套的外部(父)函數(shù)的變量(函數(shù))時, 就產(chǎn)生了閉包

閉包到底是什么?

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

產(chǎn)生閉包的條件?

• 函數(shù)嵌套
• 內(nèi)部函數(shù)引用了外部函數(shù)的數(shù)據(jù)(變量/函數(shù))

<script type="text/javascript">function fn1 () {var a = 2var b = 'abc'function fn2 () { //執(zhí)行函數(shù)定義就會產(chǎn)生閉包(不用調(diào)用內(nèi)部函數(shù))console.log(a)}// fn2()}fn1()function fun1() {var a = 3var fun2 = function () {console.log(a)}}fun1() </script>

---

常見的閉包

將函數(shù)作為另一個函數(shù)的返回值

將函數(shù)作為實(shí)參傳遞給另一個函數(shù)調(diào)用

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

---

閉包的作用

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

讓函數(shù)外部可以操作(讀寫)到函數(shù)內(nèi)部的數(shù)據(jù)(變量/函數(shù))

問題:

函數(shù)執(zhí)行完后, 函數(shù)內(nèi)部聲明的局部變量是否還存在? 一般是不存在, 存在于閉中的變量才可能存在

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

<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>

---

閉包的生命周期

產(chǎn)生: 在嵌套內(nèi)部函數(shù)定義執(zhí)行完時就產(chǎn)生了(不是在調(diào)用)

死亡: 在嵌套的內(nèi)部函數(shù)成為垃圾對象時

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

---

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

閉包的應(yīng)用2 : 定義JS模塊

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

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

閉包的應(yīng)用2 : 定義JS模塊

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

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

---

閉包的缺點(diǎn)及解決

缺點(diǎn)

• 函數(shù)執(zhí)行完后, 函數(shù)內(nèi)的局部變量沒有釋放, 占用內(nèi)存時間會變長
• 容易造成內(nèi)存泄露

解決

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

<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 //讓內(nèi)部函數(shù)成為垃圾對象-->回收閉包 </script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。