JS基礎知識三（作用域和閉包）

• 提問
• 作用域
• 自由變量
• 閉包
• this

提問

• this的不同應用場景，如何取值
• 手寫bind函數
• 實際開發中閉包的應用場景，舉例說明
• 創建10個a標簽，點擊的時候彈出對應序號

作用域

作用域指變量的合法的使用范圍，包含

• 全局作用域
• 函數作用域
• 塊級作用域（ES6新增）
  

創建10個a標簽，點擊的時候彈出對應序號

let a for (let i = 0; i < 10; i++) {a = document.createElement('a')a.innerHTML = i + '<br>'a.addEventListener('click', function (e) {e.preventDefault()alert(i)})document.body.appendChild(a) }

自由變量

• 一個變量在當前作用域沒有定義，但被使用了
• 向上級作用域，一層一層依次尋找，直至找到為止
• 如果到全局作用域都沒找到，則報錯xx is not defined

閉包

作用域應用的特殊情況，有兩種表現：

• 函數作為參數被傳遞
• 函數作為返回值被返回

// 函數作為返回值function create() {const a = 100return function () {console.log(a)}}// const fn = create() // const a = 200 // fn() // 100// 函數作為參數被傳遞 function print(fn) {const a = 200fn() } const a = 100 function fn() {console.log(a) } print(fn) // 100// 所有的自由變量的查找，是在函數定義的地方，向上級作用域查找 // 不是在執行的地方！！！

自由變量查找規則：所有的自由變量的查找，是在函數定義的地方，向上級作用域查找，不是在執行的地方！！！

手寫bind函數

// 模擬 bind Function.prototype.bind1 = function () {// 將參數拆解為數組const args = Array.prototype.slice.call(arguments)// 獲取 this（數組第一項）const t = args.shift()// fn1.bind(...) 中的 fn1const self = this// 返回一個函數return function () {return self.apply(t, args)} }function fn1(a, b, c) {console.log('this', this)console.log(a, b, c)return 'this is fn1' }const fn2 = fn1.bind1({x: 100}, 10, 20, 30) const res = fn2() console.log(res)

應用場景：實現一個簡單的cache工具

// 閉包隱藏數據，只提供 API function createCache() {const data = {} // 閉包中的數據，被隱藏，不被外界訪問return {set: function (key, val) {data[key] = val},get: function (key) {return data[key]}} }const c = createCache() c.set('a', 100) console.log( c.get('a') )

this

場景：

• 作為普通函數去調用時值為window
• 使用call bind apply去調用，傳入什么值為什么
• 作為對象方法被調用，返回對象本身
• 在class方法中調用，創建實例的本身
• 箭頭函數：this永遠取它上級作用域的this，它自己本身不會決定this值
  
  
  
  this在各個場景中取什么值，是在函數執行的時候確認的，不是在定義的時候確認的

總結

以上是生活随笔為你收集整理的（六）JS基础知识三（走进作用域和闭包）【三座大山之二，不会闭包，基本不会通过】的全部內容，希望文章能夠幫你解決所遇到的問題。

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