前端面试 - JS总结（2） - ES6 (let, 箭头函数, this) 作用域 闭包(1)

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2. var和let 和const区别

三、this的指向

3. This

4. this的规则优先级

四、箭头函数

5. 什么是箭头函数

6. 箭头函数与普通函数的区别

7. 箭头函数的优缺点

五、Bind call apply

8. 相似之处

9. 区别

10. 应用场景

六、作用域与闭包

11. 闭包定义

12.  三级作用域

13. 闭包应用场景

14. 什么是作用域链

15. 作用域和执行上下文

七、其他

16. Set的特点是什么？

---

一、 ES6新特性

---

1. let const \ var

2. 模板字面量和类的支持  简洁

3. 箭头函数 简化了函数的书写

4. Promise 处理异步操作的一种模式

5. 字符串模板（反引号）  `Hello ${name} !`

6. For of值遍历 每次循环它提供的不是序号而是值。

7. 块作用域

8. 加强的对象字面

9. 对象解构

10. 模块

11. Symbol

12. 代理（proxy）Set

二、let 和 const

---

es5有两种声明变量的方法：var, function

es6有6种声明变量的方法：var, function, let, const, import, class

1. var 和 let区别

• 块级作用域：let定义的变量有块级作用域，var声明的变量只有全局和函数作用域。

• 变量提升：let不存在变量提升，var存在变量提升。

• 重复声明：let不允许重复声明，var可以重复声明。

• 暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

2. var和let 和const区别

（1）Var是ES5语法；var没有块的概念，可以跨块访问, 不能跨函数访问；var有变量提升（变量可以在使用后声明，也就是变量可以先使用再声明）；

（2）let const是ES6语法；Let const有块级作用域，var没有，Var和let是变量可以修改；

（3）const是常量，不可修改，而且必须初始化，只能在块作用域里访问；不可修改指的是：const指针指向的地址不可以改变，指向地址的内容是可以改变的。因为const只是保证对象的指针不改变，而对象的内容改变不会影响到指针的改变，所以对象的属性内容是可以修改的

（4）let和const存在暂时性死区，var没有

三、this的指向

---

3. This

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

（1）作为普通函数调用 – 返回window

（2）使用call apply bind被调用 – 传入什么绑定什么

（3）作为对象方法被调用 – 返回对象本身（如果是隐式原型的方法 – undefined）

（4）在class方法中被调用 – 返回当前实例本身

（5）箭头函数 – 永远会找上级作用域this的值来确定

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，

理解参考链接：https://www.cnblogs.com/pssp/p/5216085.html

4. this的规则优先级

1. 首先是函数作为构造器被调用，指向创建的对象

2. 其次是call、apply和bind，指向第一次bind的对象

3. 然后是作为对象的方法被调用，指向该对象

4. 最后是作为普通函数被调用，指向window

5. 函数定义的方法

参考链接：https://segmentfault.com/a/1190000012200022

四、箭头函数

---

6. 什么是箭头函数

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。箭头函数完全修复了this的指向，this总是指向词法作用域。 箭头函数没有自己的this，总是指向外部作用域

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）

var funcName = (params) => params + 2;

funcName(2);// 4

参考链接

7. 箭头函数与普通函数的区别

1. 普通函数的声明在变量提升中是最高的，箭头函数没有函数提升

2. 箭头函数没有属于自己的this，arguments

3. 箭头函数不能作为构造函数，因为没有自己的this，没有prototype属性

4. 箭头函数不可以使用 yield 命令

8. 箭头函数的优缺点

**优点：**ES6中箭头函数给我们带来了便利，写法很简洁，不用再定义this，因为箭头函数的this取决于上一级作用域。

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】