一天时间系列文章是博主精心整理的面试热点问题和难点问题，吸收了大量的技术博客与面试文章，总结多年的面试经历，带你快速并高效地审视前端面试知识。直击技术痛点，主动出击，精密打击，这才是面试拿到高薪的秘诀！

  • 上期回顾 JS基础—原型和原型链
  • 本系列订阅 一天时间迅速准备前端面试（高薪精品）–欢迎订阅

文章目录

  • 本期介绍
  • 主要内容
  • 关键字
    • 什么是作用域？
    • 什么是自由变量？
    • 什么是闭包？
    • 闭包会用在哪里?
    • this 有几种赋值情况
    • 手写call、apply、bind
    • 补充 - 原型中的 this

本期介绍

本期介绍作用域和闭包的知识点和题目。包括作用域，自由变量，闭包，this 等部分。作用域是 “JS 三座大山” 之二，不知道闭包的话，面试通过概率不大。

主要内容

  • 什么是作用域？什么是自由变量？
  • 什么是闭包？闭包会用在哪里？
  • this 有几种赋值情况

关键字

  • 作用域
  • 闭包
  • this

什么是作用域？

变量合法的使用范围

  • 全局作用域： 在全局都可以使用
  • 函数作用域： 只能在当前函数内使用
  • 块级作用域（ES6新增）： if，for，while语法里
// ES6 块级作用域
if (true) {let x = 100
}
console.log(x) // 会报错

什么是自由变量？

  • 一个变量在当前作用域没有定义，但被使用了
  • 向上级作用域一层一层依次寻找，直到找到为止
  • 如果到全局作用域都没找到，则报错 xx is not defind

什么是闭包？

作用域应用的特殊情况，指有权访问另一个函数作用域中的变量的函数

有两种情况：

  1. 函数作为参数被传递
  2. 函数作为返回值被返回
// 函数作为返回值
function create() {let a = 100return function () {console.log(a)}
}
let fn = create()
let a = 200
fn()

// 函数作为参数
function print(fn) {let a = 200fn()
}
let a = 100
function fn() {console.log(a)
}
print(fn)

注意： 所有自由变量的查找是在函数定义的地方，向上级作用域查找，不是在执行的地方

闭包会用在哪里?

  • 场景一：采用函数引用方式的setTimeout调用
  • 场景二：回调
  • 场景三：函数防抖
  • 场景四：封装私有变量
    实际开发中闭包多用于隐藏数据 ，只提供API进行修改数据

this 有几种赋值情况

  1. 作为普通函数被调用，指向的是window
  2. 使用call、apply、bind 可以改变this的指向
    apply和call会让当前函数立即执行，而bind会返回一个函数，后续需要的时候再调用执行
  3. 作为对象的方法被调用，指向当前对象
  4. 在class方法中调用，指向当前创建的实例constructor
  5. 箭头函数中的this永远是取他上级作用域的this

    注意：this取什么值是在函数执行的时候确定的，不是在函数定义的时候确定的

手写call、apply、bind

  1. 手写call
function myCall() {const content = [].shift.call(arguments) || window;content.fn = this;const result = content.fn(...arguments);delete content.fn;return result;
}
Function.prototype.myCall = myCall;
fn.myCall(obj, 'arg1', 'arg2');  // {a: '这是obj'}
  1. 手写apply
function myApply() {const content = [].shift.call(arguments) || window;content.fn = this;const result = content.fn(...arguments[0]);delete content.fn;return result;
}
Function.prototype.myApply = myApply;
fn.myApply(obj, ['arg1', 'arg2']);  // {a: '这是obj'}
  1. 手写bind
function myBind() {const content = [].shift.call(arguments) || window;content.fn = this;const args = arguments;return () => {const result = content.fn(...args);delete content.fn;return result;}
}
Function.prototype.myBind = myBind;
fn.myBind(obj, 'arg1', 'arg2')();  // {a: '这是obj'}

示例：

const obj = {a: '这是obj'};
function fn(arg1, arg2) {console.log(this);
}
fn.call(obj, 'arg1', 'arg2'); // {a: '这是obj'}
fn.apply(obj, ['arg1', 'arg2']); // {a: '这是obj'}
fn.bind(obj, 'arg1', 'arg2')(); // {a: '这是obj'}

原理：

  • 3个方法第一个参数为新的执行环境，所以是一个对象
  • 将当前执行环境赋值给新环境的某个属性
  • 使用新环境调用当前执行环境，相当于一个对象调用方法，方法的this就是这个对象
  • 新环境是一个对象所以为引用类型，新增一个属性会改变自身，所以调用之后获得结果需要删除新增的属性

补充 - 原型中的 this


注：此原型图解可对照JS基础—原型和原型链中class 实现继承定义的类理解

解释：
直接xiaoluo。sayhai，调用对象是xiaoluo，所以this是能找到的
用__proto__原型去访问的话，调用对象是__proto__，所以name和number是未定义的

✨原 创 不 易 ， 还 希 望 各 位 支 持

【一天时间|JavaScript基础】作用域和闭包相关推荐

  1. JavaScript从作用域到闭包

    目录 作用域 全局作用域和局部作用域 块作用域与函数作用域 作用域中的声明提前 作用域链 函数声明与赋值 声明式函数.赋值式函数与匿名函数 代码块 自执行函数 闭包  作用域(scope) 全局作用域 ...

  2. javascript函数作用域与闭包

    8.8. 函数作用域与闭包        如第四章所述,JavaScript函数的函数体在局部作用域中执行,局部作用域不同于全局作用域.本章将解释这些内容和相关的作用域问题,包括闭包.[*] [*] ...

  3. JavaScript的作用域与闭包

    JavaScript的作用域以函数为界,不同的函数拥有相对独立的作用域.函数内部可以声明和访问全局变量,也可以声明局部变量(使用var关键字,函数的参数也是局部变量),但函数外部无法访问内部的局部变量 ...

  4. javaScript的作用域、闭包

    前言 JavaScript 中的闭包是相当重要的概念,并且与作用域相关知识的指向密切相关. 那么, JavaScript 中的作用域是什么? 闭包会在哪些场景中使用? 作用域 JavaScript 的 ...

  5. JavaScript笔记 | 作用域和闭包 |《你不知道的JavaScript（上卷）》第一部分

    JavaScript | 作用域和闭包 | 读书笔记 读书笔记(自用) 来自<你不知道的JavaScript(上卷)>第一部分 作用域和闭包 1 作用域是什么 1.1编译的3个步骤 (1) ...

  6. 你不知道的 JavaScript 笔记——作用域和闭包

    第一章:作用域是什么 程序中变量存储在哪里,需要是怎么找到它,这就需要设计一套存储以及能方便的找到它的规则,这个规则就是作用域 编译原理 JavaScript 是一门编译语言,它与传统编译语言不同,但 ...

  7. 你不知道的JavaScript上卷-作用域和闭包

    1. LHS引用与RHS引用的区别: RHS:取到源值-得到某某的值 LHS:谁是赋值操作的源头-给谁赋值 function foo(a) {var b = a;return a + b; } var ...

  8. 重温JavaScript(lesson4):作用域和闭包(2)

    在lesson3中我们重温了JS作用域有关的内容,理解了JS作用域再来看闭包就非常easy了. 1.闭包的概念 先来补充一个知识点(PS:如果你觉得不好理解,就看之后代码吧~),词法作用域:" ...

  9. javaScript基础面试题 ---闭包

    闭包 1.闭包是什么? 2.闭包可以解决什么问题? 3.闭包的缺点 1.闭包是什么? 闭包是一个函数加上到创建这个函数的作用域的链接,就是一个作用域可以访问到另一个作用域的变量,闭包'关闭'了函数的自 ...

最新文章

  1. 在B站如何不动一根手指，就可以养成6级大佬？大四学生发明养号神器，看完你也会...
  2. weblogic调优的经过
  3. 1067: [SCOI2007]降雨量 - BZOJ
  4. MapReduce编程实践之自定义数据类型
  5. 张艾迪（创始人）： 我的梦想与成长之路
  6. 文字围绕浮动元素的妙用（HTML、CSS）
  7. Day13 - Ruby比一比: instance_eval 和 class_eval方法
  8. 数字图像处理复习记录(二)邻接、连通和形态学处理
  9. Android——多功能记事本（Android Studio）
  10. 使用 Pandas 与 Matplotlib 分析科比职业生涯数据-CSDN公开课-专题视频课程
  11. 凤凰系统基于android x x86,凤凰系统(Phoenix OS)x86版1.0 beta官方版
  12. Android腾讯信鸽推送
  13. 库缇斯“走”向演讲台
  14. wifi（参数查看工具介绍）--研究（inSSIDer）
  15. win10系统显示打印机未连接到服务器,win10系统连接打印机提示“打印处理器不存在”如何解决...
  16. HTML中的header标签怎么用？HTML中header标签的作用_header标签正确用法
  17. 当更高性能来到平板 — ThinkPad X1 Tablet Evo 长测
  18. 安卓SoundPool播放声音（及具体参数解析）
  19. 小型固定翼无人机集群仿真演示平台
  20. 活体检测CDCN学习笔记

热门文章

  1. 现代计算机浮点数 为什么指数没有符号位,阶码
  2. java 大整数平方根_手算平方根和基于 Java BigInteger 的大整数平方根的实现
  3. 使用华为云服务器搭建一个个人网站（简易版）
  4. cad在布局怎么调比例_cad中的布局怎么调整比例
  5. ICP , ISP and IAP
  6. lol那个服务器有无限火力,lol无限火力2021最新开放时间汇总 英雄联盟国服无限火力什么时候上线？...
  7. 喝工夫茶，配一套精致的工夫茶具，简直相得益彰！
  8. ajax请求网页源码看不到数据,关于js调用的数据，为什么源代码看不到数据
  9. （22.12.20）matlab2022+yalmip+cplex安装教程，win11 x64
  10. 沙特主帅皮齐离任 成亚洲杯第五位下课主帅