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基础知识三（走进作用域和闭包）【三座大山之二，不会闭包，基本不会通过】的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。