## ✏️面试前如何做准备？ ### 一、简历准备 简历是应聘者第一印象的展现，可以说我们见到一个陌生，首先看的是颜值（知道当年马云爸爸为什么每次应聘都失败了吧）。虽然一份简历并不能代表你的全部，但是作为给面试官的第一印象，很有必要好好斟酌的设计一下（重点在于内容部分），下面分享一下俺的经验。 #### 简历形式 一份让 HR 看了能够眼前一亮的简历的前提是**舒服、放松**，毕竟每天 HR 看上百上千份简历，如果你的简历能够让 HR 翻到你的简历的时候，让她瞬间感觉你的简历无论是排版还是内容，与其他简历形成强烈的对比，那么大大增加了你下一步与面试官的机会。按个人认为，简历遵循一下几点，在形式上可以打败 50% 的应聘者了。 - **非统一简历** - **简约大气简历** - **真实简历** - **PDF 版本** ##### 非统一简历 很过的招聘网站都提供同一的简历模板（Boos 直聘、拉勾招聘、实习僧等），正式因为简历形式的统一性，体现不出你简历让 HR 眼前一“亮”的感觉，没有对比是没有伤害的。通过实际的投递，也感觉出来了。俺之前在几个平台投了几百份简历，每次投递的时候都让你选择在线版还是附件简历，每次俺都提交错（在线版），往往根本没有几个 HR 来搭理你。后来俺发现了这个问题（一直投递的是在线简历），然后换成了自制的附件简历，果然找你沟通的 HR 也多了。 ##### 简约大气 很多小伙伴相信喜欢在简历网站下载一些模板，有些模板挺简约的，但是有的小伙伴确弄得简历样式花里胡哨，虽然在美学角度感觉起来设计的很不错。我们仔细想想，我们去展现的是自己的能力和技术，而不是在简历样式的设计上花里胡哨，有点说不过去了。简约、大气，给 HR 的印象让她关联到你也是属于这种类型的，属于简单、大气风格。 ##### 真实简历 简历写的内容一定真实，这个就不用俺多的强调了吧，毕竟“撒谎的孩子不是好孩子”。 ##### PDF 版本 如果不是特别需要，使用 word 写简历就 OK，然后转化为 PDF 版本。对于为什么是 PDF 版本而不是其他版本，主要是因为 PDF 兼容性好，谁也不知道 HR 将会用什么软件打开你的简历，无论什么版本，你能保证你的简历在 HR 看的时候排版完好无损就行了。下面是俺之前简易版简历模板：（**获取方式，公众号回复：「简历模板」**）  #### 简历详情 ##### 简历页数 简历的页数尽量控制在 1 ~ 2 页之间。 ##### 个人闪光点 如果每个人的简历都是差不多相同的，怎么才能让 HR 和面试官眼前一亮呢？那就是个人的闪光点，也就是要突出你的核心竞争力在哪？说白了，同样是应聘者，你具备什么大多数人不具备的能力能够让面试官给你发 offer 呢？很多人说，平常在学校最多参加个比赛做个小项目之类的，没有什么可以拿的出手的东西。那好，俺举例两点，给你作为一个参考，因为这两点在俺之前学习中观察身边的人以及在企业实习得出来的。 **1) 快速定位问题、解决问题的能力** 一般毕业生大部分缺少项目经验，从而定位问题和解决问题的能力相对于较弱的。如果你在校或者平常自己做项目，多善于总结的话，相信你定位问题和解决问题的能力一定比大部分人强。那么在招聘中，你可以通过项目突出这一闪光点。 而且大多数的应届毕业生刚实习的时候，一般遇到项目问题很难在短时间内搞定（分不同难度的问题），除了和他人请教之外，只能自己硬着头皮解决。一旦你有定位问题和快速解决问题的能力，那么在项目中会节省很多的时间去干别的事情。 **2) 规范编写代码的习惯** 很多自学者以及在校生，写代码就如流水账（俺也是），几乎没有什么好的编码习惯，来了需求就直接往上怼代码，导致项目后期扩展功能带来了不必要的麻烦和更多的 bug。现在的企业面临的难题就是软件的维护成本远远大于软件的开发成本，而且需求是客户一点点往上增加的，使得测试变的越来越困难。一个好的编码习惯，会在项目中大大减少不必要的开发和维护时间，从而使企业减少成本。对于如何规范写代码的习惯问题，还是要从小事做起~ ##### 谨慎熟悉、精通关键字 谨慎熟悉、精通、了解认识这几个简历中常用的关键词。很多人在面试中由于这几个关键字，吃了大亏，对，也包括俺自个。俺主要针对这几个关键字进行解释一下，分别对应自己知识技能如何填写。 - **精通：精通一词，不能轻易去写，写了就是给自己挖坑。** 那为什么还会有人去踩这个坑呢？不是说高人没有，是高人太少，之所有另外很多人写精通一词，是站在自己的认知角度去看待该领域，认为自己已经掌握了大部分的内容，但是，在面试官看来只不过是冰山一角。 - **熟悉：简历中的大部分内容可以写熟悉某某技术项。** 我们在学校参加过比赛的项目或者自己做的一些项目，遇到的问题都是自己独立解决的，可以在简历中写“熟悉”某某技术。 - **了解和认识：如果你只是知道和了解一些技术，看多一些文章或者书籍，并没有亲自实践过项目。** 简历中“了解和认识”这方面的内容少写，因为这代表你知道一些理论和表面上的知识。比如：了解 Node、TypeScript等。 ##### 项目经历 项目经历可谓是面试中的一大重点，一个有着丰富的项目经历和一个项目经历没有的应聘者就是天差地别（天才除外）。但是往往有些毕业生没有项目经历，那这地方要空白吗？没有项目经历那就赶快去经历经历，去哪经历？俺推荐几种方式。 ##### 如何找项目？ - **Github 开源项目** 如果你想不但要有项目经历，而且希望项目高逼格，那么 Github 是首选。比如你要做一个 Vue 的项目，可以直接搜索 Vue，下方会搜索出来一些 Vue 相关的开源项目了，每个项目都会有详细说明。   - **免费资料** 如果你想看视频，世面上很多免费的视频资源（声明：拒绝盗版），比如很多公众号、开源社区等都可以获取到。实在找不到可以去俺公众号获取。搜索公众号「**小鹿动画学编程**」后台回复 “**资源**” 即可。 - **付费视频** 如果一些免费的资源满足不了你，而且你不差钱，那么为了减少筛选的成本，可以去一些网站买一些付费类的课程看，俺前期的自学中也会买一些，毕竟时间很珍贵~ ##### 项目描述 项目描述也是挺头疼的一件事，不知道从和说去，一有可能紧张导致思维逻辑有点乱了。看了网上都推荐 STAR 模型，那俺就拿来聊一聊。MBA智库百科介绍如下：一开头俺就写了这么大的些，有些唠唠叨叨，但是俺认为这些唠唠叨叨的零碎内容也是构成这一系列的内容，就像炒菜，少一个配料，这菜就不香了。文章也是一样，少了这些就突然它不香了。之所以写成免费系列分享，就是为了不让俺自己在写作上受到一些条件限制，该写的一样不能少。我们开始进入下一个环节~
面试官让你描述一个项目，可以在一下几个方面描述： - **Situation(情景) —— 项目的背景** 开头可以给面试官简单的简述一下项目的开发背景，比如开发规模、开发需求、开发环境等。 - **Task(任务)：—— 分配给你的任务** 这种重点，向面试官详细说明你在该项目中的任务，负责了哪一块。如果没有负责的地方就不要说了，因为面试官进一步对你做的地方详细的询问。 - **Action(行动)：—— 你做了哪些事情** 这一部分是讲述如何完成分配给自己的任务的。比如你做了一个功能的页面，这个页面你是如何进行设计的？再比如，你做了数据库部分，你是如何设计数据库表的？ - **Result(结果)：—— 你在项目中的贡献** 对于结果，可以详细说明一下，这里有个小技巧，什么时候用百分数什么时候用数字都是有讲究的。你说通过对页面的性能优化，首屏渲染提高了 20% 的速度。再比如，你在项目中解决了 8 个主要功能的 bug 等。 ##### 项目闪光点 对于以上的项目不能是流水账，应该突出你的个人核心竞争力，你在项目中解决了别人不能解决的问题，你做了哪些核心功能点，遇到难题又是如何进行解决的，都可以作为个人的闪光点。俺整理了一下几个方面，也欢迎文章下方留言补充哦~ - **项目遇到的问题是如何解决的？** - **从项目中学到了什么？** - **和团队成员有什么冲突？如何解决的？** #### 小技巧所谓STAR原则，即Situation（情景）、Task（任务）、Action（行动）和 Result（结果）四个英文单词的首字母组合。STAR原则是结构化面试当中非常重要的一个理论。
- **学校名称排版位置** 如果你是某 985、211 的，学校的名字以及可以写在简历的开头，这样 HR 在筛选简历的时候，一眼看到你的学校名称（这个大家都知道，毕竟没有这么高的学历）。 如果你的学校和俺一样是野鸡大学，或者二本、三本之类的，可以将学校名称放在稍微靠后的位置，HR 第一眼会看到你的不是学校，而是你突出的能力。这样就会避免学校带来的缺陷（不能完全避免）。 - **最佳闪光点位置** 简历中最显眼的地方应该写你的个人核心竞争力的内容，因为这样会让 HR 眼前一亮（一般在简历的中上位置）。而那些无关紧要，作为补充性的内容可以不写或者写在偏靠下的位置。 #### 大忌 - **切记不懂装懂；** - **切记胡编乱造；** - **切记夸大自己来展示自己能力；** - **切记列举一堆技能；** ### 二、了解公司 面试前的简历我们写好了，但是收到面试通知之后，很多小伙伴收到面试邀请之后难免有些紧张，尤其是对于第一次准备面试的小伙伴来说。造成这种现象的原因无非就是心里没底，总是想面试的时候出现 “如果...怎么办....” 的状况或者是前期面试没有准备好，难免会担心面试出现各种紧急状况。 对于面试前的焦虑和紧张，也不是完全没有办法。在面试前。我们以先去了解这个公司，俺总结了一下几个方面。 - **面试内容** - **主要业务** - **发展前景** #### 1、面试内容 有小伙伴要问俺了，一个公司的面试流程和内容可以知道吗？如果你非要这么问俺的话，俺的回答只能说是【间接的】。什么是间接？一般有很多网站可以查询该公司的相关信息，（比如：看准网），部分下面有些之前面试者面试后的感受以及对公司的评价之类的，那么所谓的间接，就是通过一些信息筛选出对你有用的信息。比如： “面试官很 nice，整个面试面试官会照顾到面试者的感受.... “，再比如， “当面试官问到原型链的时候，回答的有点含糊” ... 提取关键信息，首先面试官的态度很好的，所以你去这家公司面试不用很紧张；第二，这个面试者在这家公司面试的时候，被问到有关原型链的知识，如果换做我，是否能够准确的回答上来呢？ 那么又有小伙伴问了，如果在这种网站查询不到相关的面试信息嗯？俺给你介绍另一个法子，那就是去搜索个人博客，现在很多的人喜欢记录自己的面试经历，直接百度或者谷歌也是 Ok 的。 虽然这个法子不是百分之百的能够帮助你，但是在面试前的准备上让你能够放松了些，因为你也该公司的面试流程或者内容有了大体的了解。 #### 2、主要业务产品 > 主要业务。最起码知道你来这个公司做什么产品和主要干什么吧？ 除了我们去了解该公司的面试流程和内容，还要去了解该公司的主要业务产品。公司招聘是双方互相选择的一个过程，而不是公司单方向选择你。那么问题来了，你这还没去面试呢。就需要提前了解该公司主要业务产品是干嘛的吗？当然，如果你不喜欢该公司的业务产，何必选择去面试呢？（单纯的体验一下面试的人除外~） 很多公司会在相关的网站列出自己公司的主要业务以及产品是干嘛的，难免也有与实际不否的地方，可以进一步提前准备好，在面试快结束的时候，来咨询一下面试官，公司的相关业务产品。 #### 3、发展前景 > 再一个就是了解该公司的发展前景，和你个人的爱好以及个人价值是否一致呢。 互联网公司覆盖的领域很广，医疗领域、教育领域、娱乐领域、游戏领域等等。俺把其公司作为两种分类，一类是产品公司，这一类主要是针对特定的用户进行开发产品的，比如某公司主要对于医院来开发医疗系统。另一类呢是互联网公司。主要是面向大众化的产品，比如抖音、今日头条、微信等。当然，不同类型的公司对应的开发也是不一样的，俺就不在这展开说了。 ## JavaScript 基础知识点 ### 数据类型分享几个简历中的小技巧（欢迎留言补充哦~）。
面试官：说说 JavaScript 中的基本类型有哪些？以及各个数据类型是如何存储的？
javaScript 的数据类型包括原始类型和引用类型(对象类型)。
原始类型包括以下 6 个：
- String
- Number
- Boolean
- null
- undefined
- Symbol
引用类型统称为 Object 类型，如果细分的话，分为以下 5 个：
- `Object`
- Array
- Date
- RegExp
- Function
#### 1、数据类型的存储形式
> 栈（Stack）和堆（Heap），是两种基本的数据结构。Stack 在内存中自动分配内存空间的；Heap 在内存中动态分配内存空间的，不一定会自动释放。一般我们在项目中将对象类型手动置为 null 原因，减少无用内存消耗。
原始类型是按值形式存放在**栈**中的数据段，内存空间可以自由分配，同时可以**按值直接访问**。
```javascript
var a = 10;
var b = a;
b = 30;
console.log(a); // 10值
console.log(b); // 30值
```
过程图示：
引用类型是存放在**堆**内存中，每个对象在堆内存中有一个引用地址，就像是每个房间都有一个房间号一样。引用类型在栈中保存的就是这个对象在堆内存的引用地址，我们所说的“房间号”。通过“房间号”可以快速查找到保存在堆内存的对象。
```javascript
var obj1 = new Object();
var obj2 = obj1;
obj2.name = "小鹿";
console.log(obj1.name); // 小鹿
```
过程图示：
#### 2、Null
不同的对象在底层原理的存储是用二进制表示的，在面试官：为什么 typeof null 等于 Object?
javaScript中，如果二进制的前三位都为 0 的话，系统会判定为是 Object类型。null的存储二进制是 000，也是前三位，所以系统判定 null为 Object类型。
**扩展：**
这个 bug 个第一版的 javaScript留下来的。俺也进行扩展一下其他的几个类型标志位：
- 000：对象类型。
- 1：整型，数据是31位带符号整数。
- 010：双精度类型，数据是双精度数字。
- 100：字符串，数据是字符串。
- 110：布尔类型，数据是布尔值。
#### 3、数据类型的判断
面试官：typeof 与 instanceof 有什么区别？
typeof 是一元运算符，同样返回一个字符串类型。一般用来判断一个变量是否为空或者是什么类型。
除了 null 类型以及 Object 类型不能准确判断外，其他数据类型都可能返回正确的类型。
```javascript
typeof undefined // 'undefined'
typeof '10' // 'String'
typeof 10 // 'Number'
typeof false // 'Boolean'
typeof Symbol() // 'Symbol'
typeof Function // ‘function'
typeof null // ‘Object’
typeof [] // 'Object'
typeof {} // 'Object'
```
既然 typeof 对对象类型都返回 Object 类型情况的局限性，我们可以使用 instanceof 来进行判断**某个对象是不是另一个对象的实例**。返回值的是一个布尔类型。
```javascript
var a = [];
console.log(a instanceof Array) // true
```
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性，如果对原型链不怎能了解，后边俺会具体的写到，这里大体记一下就 OK。
我们再测一下 ES6 中的 class 语法糖是什么类型。
```javascript
class A{}
console.log(A instanceof Function) // true
```
> 注意：原型链中的prototype 随时可以被改动的，改变后的值可能不存在于 object的原型链上，instanceof返回的值可能就返回 false。
#### 4、类型转换
类型转换通常在面试笔试中出现的比较多，对于类型转换的一些细节应聘者也是很容易忽略的，所以俺整理的尽量系统一些。javaScript是一种弱类型语言，变量不受类型限制，所以在特定情况下我们需要对类型进行转换。
「类型转换」分为显式类型转换和隐式类型转换。每种转换又分为原始类型转换和对象类型转换。
##### 显式类型转换
显式类型转换就是我们所说强制类型转换。
对于原始类型来说，转字符串类型会默认调用笔试题：其他数据类型转字符串类型！
toString() 方法。
| 数据类型 | String类型 |
| :-------- | :----------------------- |
| 数字 | 转化为数字对应的字符串 |
| true | 转化为字符串 "true" |
| null | 转化为字符串 "null" |
| undefined | 转化为字符串 “undefined” |
| Object | 转化为 "[object Object]" |
```javascript
String(123); // "123"
String(true); // "true"
String(null); // "null"
String(undefined);// "undefined"
String([1,2,3]) // "1,2,3"
String({}); // "[object Object]"
```
除了特殊的几个值笔试题：其他数据类型转布尔类型！
‘’、 undefined、 NAN、 null、 false、 0 转化为 Boolean 为 false 之外，其他类型值都转化为 true。
```javascript
Boolean('') // false
Boolean(undefined) // false
Boolean(null) // false
Boolean(NaN) // false
Boolean(false) // false
Boolean(0) // false
Boolean({}) // true
Boolean([]) // true
```
| 数据类型 | 数字类型 | | :-------- | :----------------------------------------------------------- | | 字符串 | 1) 数字转化为对应的数字笔试题：转化为数字类型！
对象类型在转原始类型的时候，会调用内置的笔试题：对象类型转原始类型！
valueOf()和 toString() 方法，这两个方法是可以进行重写的。
转化原始类型分为两种情况：转化为字符串类型或其他原始类型。
- 如果已经是原始类型，不需要再进行转化。
- 如果转字符串类型，就调用内置函数中的 toString()方法。
- 如果是其他基本类型，则调用内置函数中的 valueOf()方法。
- 如果返回的不是原始类型，则会继续调用 toString() 方法。
- 如果还没有返回原始类型，则报错。
#### 5、四则运算
隐士类型转化是不需要认为的强制类型转化，javaScript 自动将类型转化为需要的类型，所以称之为隐式类型转换。
##### 加法运算
- 如果双方都不是字符串，则将转化为**数字**或**字符串**。 -加法运算符是在运行时决定，到底是执行相加，还是执行连接。运算数的不同，导致了不同的语法行为，这种现象称为“重载”。
Boolean + Boolean会转化为数字相加。
- Boolean + Number 布尔类型转化为数字相加。
- Object + Number 对象类型调用 valueOf，如果不是 String、Boolean或者 Number类型，则继续调用 toString()转化为字符串。
```javascript
true + true // 2
1 + true // 2
[1] + 3 // '13'
```
- 字符串和字符串以及字符串和非字符串相加都会进行**连接**。
```javascript
1 + 'b' // ‘1b’
false + 'b' // ‘falseb’
```
##### 其他运算
```javascript 1 * '2' // 2 1 * [] // 0 ``` #### 6、逻辑运算符 逻辑运算符包括两种情况，分别为条件判断和赋值操作。 **条件判断** -其他算术运算符（比如减法、除法和乘法）都不会发生重载。它们的规则是：所有运算子一律转为数值，再进行相应的数学运算。
&& ：所有条件为真，整体才为真。
- || ：只有一个条件为真，整体就为真。
```javascript
true && true // true
true && false // false
true || true // true
true || false // true
```
**赋值操作**
- A && B
首先看 A 的真假， A 为假，返回 A 的值， A 为真返回 B 的值。（不管 B 是啥）
```javascript
console.log(0 && 1) // 0
console.log(1 && 2) // 2
```
- A || B
首先看 A 的真假， A 为真返回的是 A 的值， A 为假返回的是 B 的值（不管 B 是啥）
```javascript
console.log(0 || 1) // 1
console.log(1 || 2) // 1
```
#### 7、比较运算符
比较运算符在逻辑语句中使用，以判定变量或值是否相等。
对于面试官：== 和 === 的区别？
=== 来说，是严格意义上的相等，会比较两个操作符的类型和值。
- 如果 X 和 Y 的类型不同，返回 false ；
- 如果 X 和 Y 的类型相同，则根据下方表格进一步判断
| 条件 | 例子 | 返回值 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------ |
| undefined === undefined | undefined === undefined | true |
| null === null | null === null | true |
| String === String==来说，是非严格意义上的相等，先判断两个操作符的类型是否相等，如果类型不同，则先进行类型转换，然后再判断值是否相等。
- 如果 X 和 Y 的类型相同，返回 X == Y 的比较结果；
- 如果 X 和 Y 的类型不同，根据下方表格进一步判断;
| 条件 | 例子 | 返回值 |
| ------------------------------------------------------------ | ------------------------ | -------------- |
| null == undefined | null == undefined | true |
| String == Number，String 转 Number | '2' == 2 | true |
| Boolean == Number，Boolean 转 Number | true == 1 | true |
| Object == String,Number,Symbol，将 Object 转化为原始类型再比较值大小 | [1] == 1面试官：什么是 this 指针?以及各种情况下的 this 指向问题。
this就是一个对象。不同情况下 this指向的不同，有以下几种情况，（希望各位亲自测试一下，这样会更容易弄懂）：
- 对象调用，this 指向该对象（前边谁调用 this 就指向谁）。
```javascript
var obj = {
name:'小鹿',
age: '21',
print: function(){
console.log(this)
console.log(this.name + ':' + this.age)
}
}
// 通过对象的方式调用函数
obj.print(); // this 指向 obj
```
- 直接调用的函数，this指向的是全局 window对象。
```javascript
function print(){
console.log(this);
}
// 全局调用函数
print(); // this 指向 window
```
- 通过 new的方式，this永远指向新创建的对象。
```javascript
function Person(name, age){
this.name = name;
this.age = age;
console.log(this);
}
var xiaolu = new Person('小鹿',22); // this = > xaiolu
```
- 箭头函数中的 this。
由于箭头函数没有单独的 this值。箭头函数的 this与声明所在的上下文相同。也就是说调用箭头函数的时候，不会隐士的调用 this参数，而是从定义时的函数继承上下文。
```javascript
const obj = {
a:()=>{
console.log(this);
}
}
// 对象调用箭头函数
obj.a(); // window
```
我们可以通过调用函数的面试官：如何改变 this 的指向？
call、apply、bind 来改变 this的指向。
```javascript
var obj = {
name:'小鹿',
age:'22',
adress:'小鹿动画学编程'
}
function print(){
console.log(this); // 打印 this 的指向
console.log(arguments); // 打印传递的参数
}
// 通过 call 改变 this 指向
print.call(obj,1,2,3);
// 通过 apply 改变 this 指向
print.apply(obj,[1,2,3]);
// 通过 bind 改变 this 的指向
let fn = print.bind(obj,1,2,3);
fn();
```
对于基本的使用想必各位小伙伴都能掌握，俺就不多废话，再说一说这三者的共同点和不同点。
**共同点：**
- 三者都能改变 this指向，且第一个传递的参数都是 this指向的对象。
- 三者都采用的后续传参的形式。
**不同点：**
- call 的传参是单个传递的（试了下数组，也是可以的），而 apply 后续传递的参数是**数组形式（传单个值会报错）**，而 bind 没有规定，传递值和数组都可以。
- call 和 apply 函数的执行是直接执行的，而 bind 函数会返回一个函数，然后我们想要调用的时候才会执行。
> 扩展：如果我们使用上边的方法改变箭头函数的 this 指针，会发生什么情况呢？能否进行改变呢？
由于箭头函数没有自己的 this 指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this），他们的第一个参数会被忽略。
### new
对于 `new` 关键字，我们第一想到的就是在面向对象中 `new` 一个实例对象，但是在 JS 中的 `new` 和 `Java` 中的 `new ` 的机制不一样。
一般 `Java` 中，声明一个`构造函数`，通过 `new 类名()` 来创建一个实例，而这个`构造函数` 是一种特殊的函数。但是在 `JS` 中，只要 `new` 一个函数，就可以 new 一个对象，函数和构造函数没有任何的区别。
`new` 的过程包括以下四个阶段： - 创建一个新对象。 - 这个新对象的 `__proto__` 属性指向原函数的 `prototype` 属性。(即继承原函数的原型) - 将这个新对象绑定到 此函数的 `this` 上 。 - 返回新对象，如果这个函数没有返回其他对象。 ```javascript // new 生成对象的过程 // 1、生成新对象 // 2、链接到原型 // 3、绑定 this // 4、返回新对象 // 参数： // 1、Con: 接收一个构造函数 // 2、args：传入构造函数的参数 function create(Con, ...args){ // 创建空对象 let obj = {}; // 设置空对象的原型(链接对象的原型) obj._proto_ = Con.prototype; // 绑定 this 并执行构造函数(为对象设置属性) let result = Con.apply(obj,args) // 如果 result 没有其他选择的对象，就返回 obj 对象 return result instanceof Object ? result : obj; } // 构造函数 function Test(name, age) { this.name = name this.age = age } Test.prototype.sayName = function () { console.log(this.name) } // 实现一个 new 操作符 const a = create(Test,'小鹿','23') console.log(a.age) ```面试官：new 内部发生了什么过程？可不可以手写实现一个 new 操作符？
最常用的创建对象的两种方式： - **new 构造函数 ** - **字面量** 其他创建对象的方式： - **Object.create()** 字面量创建对象的优势所在： - 代码量更少，更易读 - 对象字面量运行速度更快，它们可以在解析的时候被优化。他不会像 `new` 一个对象一样，解析器需要顺着作用域链从当前作用域开始查找，如果在当前作用域找到了名为 `Object()` 的函数就执行，如果没找到，就继续顺着作用域链往上照，直到找到全局 `Object()` 构造函数为止。 - `Object()` 构造函数可以接收参数，通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数，并返回另外一个对象实例，而这往往不是你想要的。 对于 `Object.create() `方式创建对象： ```javascript Object.create(proto, [propertiesObject]); ``` - `proto：`新创建对象的原型对象。 - `propertiesObject：`（可选）可为创建的新对象设置属性和值。 一般用于继承： ```javascript var People = function (name){ this.name = name; }; People.prototype.sayName = function (){ console.log(this.name); } function Person(name, age){ this.age = age; People.call(this, name); // 使用call，实现了People属性的继承 }; // 使用Object.create()方法，实现People原型方法的继承，并且修改了constructor指向 Person.prototype = Object.create(People.prototype, { constructor: { configurable: true, enumerable: true, value: Person, writable: true } }); Person.prototype.sayAge = function (){ console.log(this.age); } var p1 = new Person('person1', 25); p1.sayName(); //'person1' p1.sayAge(); //25 ```面试官：有几种创建对象的方式，字面量相对于 new 创建对象有哪些优势？
- `new ` 和 字面量创建的对象的原型指向 `Object.prototype`，会继承 `Object` 的属性和方法。 - 而通过 `Object.create(null)` 创建的对象，其原型指向 `null`，`null` 作为原型链的顶端，没有也不会继承任何属性和方法。 ### 闭包 闭包面试中的重点，但是对于很多初学者来说都是懵懵的，所以俺就从最基础的作用域讲起，大佬请绕过。面试官：new/字面量 与 Object.create(null) 创建对象的区别？
规定变量和函数的可使用范围叫做作用域。只看定义，挺抽象的，举个例子::chestnut: ```javascript function fn1() { let a = 1; } function fn2() { let b = 2; } ``` 声明两个函数，分别创建量两个私有的作用域（可以理解为两个封闭容器），面试官：什么是作用域？什么是作用域链？
fn2 是不能直接访问私有作用域 fn1 的变量 a 的。同样的，在 fn1 中不能访问到 fn2 中的 b 变量的。一个函数就是一个作用域。
每个函数都会有一个作用域，查找变量或函数时，由局部作用域到全局作用域依次查找，这些作用域的集合就称为作用域链。 如果还不是很好理解，俺再举个例子：:chestnut:
```javascript
let a = 1
function fn() {
function fn1() {
function fn2() {
let c = 3;
console.log(a);
}
// 执行 fn2
fn2();
}
// 执行 fn1
fn1();
}
// 执行函数
fn();
```
虽然上边看起来嵌套有点复杂，我们前边说过，一个函数就是一个私有作用域，根据定义，在 fn2 作用域中打印 a，首先在自己所在作用域搜索，如果没有就向上级作用域搜索，直到搜索到全局作用域，a = 1，找到了打印出值。整个搜索的过程，就是基于作用域链搜索的。
很多应聘者喜欢这样回答，“函数里套一个函数”，但是面试官更喜欢下面的回答，因为可以继续为你挖坑。 函数执行，形成一个私有的作用域，保护里边的私有变量不受外界的干扰，除了保护私有变量外，还可以保存一些内容，这样的模式叫做闭包。 闭包的作用有两个，保护和保存。 **保护的应用** - 团队开发时，每个开发者把自己的代码放在一个私有的作用域中，防止相互之间的变量命名冲突；把需要提供给别人的方法，通过面试官：什么是闭包？闭包的作用？闭包的应用？
return 或 window.xxx 的方式暴露在全局下。
- jQuery 的源码中也是利用了这种保护机制。
- 封装私有变量。
**保存的应用**
- 选项卡闭包的解决方案。
```javascript // 事件绑定引发的索引问题 var btnBox = document.getElementById('btnBox'), inputs = btnBox.getElementsByTagName('input') var len = inputs.length; for(var i = 0; i < 1en; i++){ inputs[i].onclick = function () { alert(i) } } ``` 闭包剩余的部分，俺在之前的文章已经总结过，俺就不复制过来了，直接传送过去~ [动画：什么是闭包？](https://juejin.im/post/5dc6449ae51d452bd321252c#comment) ### 原型和原型链面试官：循环绑定事件引发的索引什么问题？怎么解决这种问题？
**原型：**每个 `JS` 对象都有 `__proto__` 属性，这个属性指向了原型。跟俺去看看，  再来一个，  我们可以看到，只要是对象类型，都会有这个`__proto__` 属性，这个属性指向的也是一个原型对象，原型对象也是对象呀，肯定也会存在一个 `__proto__` 属性。那么就形成了原型链，定义如下： **原型链**：原型链就是多个对象通过 `__proto__` 的方式连接了起来形成一条链。面试官：什么是原型？什么是原型链？如何理解？
对于原型和原型链的前世今生，由于篇幅过大，俺的传送门~ [图解：告诉面试官什么是 JS 原型和原型链?](https://juejin.im/post/5db0fec4518825648c3a8770) > PS：下面的看不懂，一定去看文章哦！ 再往深处看，他们之间存在复杂的关系，但是这些所谓的负责关系俺已经总结好了，小二上菜  这张图看起来真复杂，但是通过下边总结的，再来分析这张图，试试看。 - 所有的实例的 `_proto_`都指向该构造函数的原型对象（`prototype`）。 - 所有的函数（包括构造函数）是 `Function()` 的实例，所以所有函数的 `_proto_`的都指向 `Function() ` 的原型对象。 - 所有的原型对象（包括 `Function` 的原型对象）都是 `Object` 的实例，所以 `_proto_`都指向 Object （构造函数）的原型对象。而 `Object` 构造函数的 `_proto_` 指向 `null`。 - `Function` 构造函数本身就是 `Function` 的实例，所以 `_proto_` 指向 `Function` 的原型对象。原型和原型链是怎么来的呢？如果理清原型链中的关系呢？
之前留了一个小问题，总结了上述的原型和原型链之后，`instanceof `的原理很容易理解。 `instanceof` 的原理是通过判断该对象的原型链中是否可以找到该构造类型的 `prototype` 类型。 ```javascript function Foo(){} var f1 = new Foo(); console.log(f1 instanceof Foo);// true ```  ### 继承面试官：instanceOf 的原理是什么？
#### 经典继承（构造函数） ```javascript / 详细解析 //1、当用调用 call 方法时，this 带边 son 。 //2、此时 Father 构造函数中的 this 指向 son。 //3、也就是说 son 有了 colors 的属性。 //4、每 new 一个 son ，都会产生不同的对象，每个对象的属性都是相互独立的。 function Father(){ this.colors = ["red","blue","green"]; } function Son(){ // this 是通过 new 操作内部的新对象 {} ， // 此时 Father 中的 this 就是为 Son 中的新对象{} // 新对象就有了新的属性，并返回得到 new 的新对象实例 // 继承了Father,且向父类型传递参数 Father.call(this); } let s = new Son(); console.log(s.color) ``` **① 基本思想：**在子类的构造函数的内部调用父类的构造函数。 **② 优点：** - 保证了原型链中引用类型的独立，不被所有实例共享。 - 子类创建的时候可以向父类进行传参。 **③ 缺点:** - 继承的方法都在构造函数中定义，构造函数不能够复用了（因为构造函数中存在子类的特殊属性，所以构造函数中复用的属性不能复用了）。 - 父类中定义的方法对于子类型而言是不可见的（子类所有的属性都定义在父类的构造函数当中）。 #### 组合继承 ```javascript function Father(name){ this.name = name; this.colors = ["red","blue","green"]; } // 方法定义在原型对象上（共享） Father.prototype.sayName = function(){ alert(this.name); }; function Son(name,age){ // 子类继承父类的属性 Father.call(this,name); //继承实例属性，第一次调用 Father() // 每个实例都有自己的属性 this.age = age; } // 子类和父类共享的方法（实现了父类属性和方法的复用） Son.prototype = new Father(); //继承父类方法,第二次调用 Father() // 子类实例对象共享的方法 Son.prototype.sayAge = function(){ alert(this.age); } var instance1 = new Son("louis",5); instance1.colors.push("black"); console.log(instance1.colors);//"red,blue,green,black" instance1.sayName();//louis instance1.sayAge();//5 var instance1 = new Son("zhai",10); console.log(instance1.colors);//"red,blue,green" instance1.sayName();//zhai instance1.sayAge();//10 ``` **① 基本思想：** - 使用**原型链**实现对**「原型对象属性和方法」**的继承。 - 通过借用**构造函数**来实现对**「实例属性」**的继承。 **② 优点：** - 在原型对象上定义的方法实现了函数的复用。 - 每个实例都有属于自己的属性。 **③ 缺点：** - 组合继承调用了两次父类的构造函数，造成了不必要的消耗。 #### 原型继承 ```javascript function object(o){ function F(){} F.prototype = o; // 每次返回的 new 是不同的 return new F(); } var person = { friends : ["Van","Louis","Nick"] }; // 实例 1 var anotherPerson = object(person); anotherPerson.friends.push("Rob"); // 实例 2 var yetAnotherPerson = object(person); yetAnotherPerson.friends.push("Style"); // 都添加至原型对象的属性(所共享) alert(person.friends); // "Van,Louis,Nick,Rob,Style" ``` **① 基本思想：**创建临时性的构造函数（无任何属性），将传入的对象作为该构造函数的原型对象，然后返回这个新构造函数的实例。 **② 浅拷贝：** > `object` 所产生的对象是不相同的，但是原型对象都是 `person` 对象，所改变存在原型对象的属性所有生成的实例所共享，不仅被 `Person` 所拥有，而且被子类生成的实例所共享。 ③ **object.create()：**在 ECMAScript5 中,通过新增 **object.create()** 方法规范化了上面的原型式继承.。 - 参数一：新对象的原型的对象。 - 参数二：先对象定义额外的属性（可选）。 #### 寄生式继承 ```javascript function createAnother(original){ var clone = object(original); // 通过调用object函数创建一个新对象 clone.sayHi = function(){ // 以某种方式来增强这个对象 alert("hi"); }; return clone; //返回这个对象 } ``` - **基本思想**：不必为了指定子类型的原型而调用超类型的构造函数（避免第二次调用的构造函数）。 - **优点**：寄生组合式继承就是为了解决组合继承中两次调用构造函数的开销。 ### 垃圾回收机制 说到 `Javascript`的垃圾回收机制，我们要从内存泄漏一步步说起。面试官：说一说 JS 中的继承方式有哪些？以及各个继承方式的优缺点。
不再用到的内存，没有及时释放，就叫做内存泄漏。 **内存泄漏是指我们已经无法再通过js代码来引用到某个对象，但垃圾回收器却认为这个对象还在被引用，因此在回收的时候不会释放它**。导致了分配的这块内存永远也无法被释放出来。如果这样的情况越来越多，会导致内存不够用而系统崩溃。面试官：什么是内存泄漏？为什么会导致内存泄漏？
很多编程语言需要手动释放内存，但是很多开发者喜欢系统提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"。 之所以会有垃圾回收机制，是因为 `js` 中的字符串、对象、数组等只有确定固定大小时，才会动态分配内存，只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，`JavaScript` 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃 `JavaScript `与其他语言不同，它具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。 #### 两种垃圾回收策略 找出那些不再继续使用的变量，然后释放其内存。垃圾回收器会按照固定的时间间隔，周期性的执行该垃圾回收操作。 共有两种策略： - **标记清除法** - **引用计数法** #### 标记清除法 垃圾回收器会在运行的时候，会给存储在内存中的所有变量都加上标记，然后它会去掉环境中变量以及被环境中的变量引用的变量的标记。剩下的就视为即将要删除的变量，原因是在环境中无法访问到这些变量了。最后垃圾回收器完成内存清除操作。 它的实现原理就是通过判断一个变量是否在执行环境中被引用，来进行标记删除。 #### 引用计数法 引用计数的垃圾收集策略不常用，引用计数的最基本含义就是跟踪记录每个值被引用的次数。 当声明变量并将一个引用类型的值赋值给该变量时，则这个值的引用次数加 1，同一值被赋予另一个变量，该值的引用计数加 1 。当引用该值的变量被另一个值所取代，则引用计数减 1，当计数为 0 的时候，说明无法在访问这个值了，所有系统将会收回该值所占用的内存空间。 存在的缺陷： 两个对象的相互循环引用，在函数执行完成的时候，两个对象相互的引用计数并未归 0 ，而是依然占据内存，无法回收，当该函数执行多次时，内存占用就会变多，导致大量的内存得不到回收。面试官：怎么解决内存泄漏？说一说 JS 垃圾回收机制的运行机制的原理？。
#### 如何管理内存 虽然说是 `js` 的内存都是自动管理的，但是对于 `js` 还是存在一些问题的，最主要的一个问题就是**分配给 Web 浏览器的可用内存数量通常比分配给桌面应用程序的少**。 > 为了能够让页面获得最好的性能，必须确保 js 变量占用最少的内存，最好的方式就是将不用的变量引用释放掉，也叫做**解除引用**。 - 对于局部变量来说，函数执行完成离开环境变量，变量将自动解除。 - 对于全局变量我们需要进行手动解除。（注意：解除引用并不意味被收回，而是将变量真正的脱离执行环境，下一次垃圾回收将其收回） ```javascript var a = 20; // 在堆内存中给数值变量分配空间 alert(a + 100); // 使用内存 var a = null; // 使用完毕之后，释放内存空间 ```最常见的就是在 IE BOM 和 DOM 中，使用的对象并不是 js 对象，所以垃圾回收是基于计数策略的。但是在 IE9 已经将 BOM 和 DOM 真正的转化为了 js 对象，所以循环引用的问题得到解决。
### 深拷贝和浅拷贝补充：因为通过上边的垃圾回收机制的标记清除法的原理得知，只有与环境变量失去引用的变量才会被标记回收，所用上述例子通过将对象的引用设置为 null ，此变量也就失去了引用，等待被垃圾回收器回收。
上边在 `JavaScript` 基本类型中我们说到，数据类型分为**基本类型和引用类型**。对基本类型的拷贝就是对值复制进行一次拷贝，而对于引用类型来说，拷贝的不是值，而是**值的地址**，最终两个变量的地址指向的是同一个值。还是以前的例子： ```javascript var a = 10; var b = a; b = 30; console.log(a); // 10值 console.log(b); // 30值 var obj1 = new Object(); var obj2 = obj1; obj2.name = "小鹿"; console.log(obj1.name); // 小鹿 ``` 要想将 `obj1` 和 `obj2` 的关系断开，也就是不让他指向同一个地址。根据不同层次的拷贝，分为深拷贝和浅拷贝。 - **浅拷贝：**只进行一层关系的拷贝。 - **深拷贝：**进行无限层次的拷贝。面试官：什么是深拷贝？什么是浅拷贝？
- 自己实现一个浅拷贝： ```javascript // 实现浅克隆 function shallowClone(o){ const obj = {}; for(let i in o){ obj[i] = o[i] } return obj; } ``` - 扩展运算符实现： ```javascript let a = {c: 1} let b = {...a} a.c = 2 console.log(b.c) // 1 ``` - `Object.assign() `实现 ```javascript let a = {c: 1} let b = Object.assign({}, a) a.c = 2 console.log(b.c) // 1 ``` 对于深拷贝来说，在浅拷贝的基础上加上递归，我们改动上边自己实现的浅拷贝代码： ```javascript var a1 = {b: {c: {d: 1}}; function clone(source) { var target = {}; for(var i in source) { if (source.hasOwnProperty(i)) { if (typeof source[i] === 'object') { target[i] = clone(source[i]); // 递归 } else { target[i] = source[i]; } } } return target; } ``` 如果功底稍微扎实的小伙伴可以看出上边深拷贝存在的问题： - 参数没有做检验; - 判断对象不够严谨; - 没有考虑到数组，以及 `ES6` 的 `set, map, weakset, weakmap `兼容性。 - 最严重的问题就是递归容易爆栈（递归层次很深的时候）。 - 循环引用问题提。 ```javascript var a = {}; a.a = a; clone(a); // 会造成一个死循环 ``` 两种解决循环引用问题的办法： - **暴力破解** - **循环检测** 还有一个最简单的实现深拷贝的方式，那就是利用 `JSON.parse(JSON.stringify(object))`,但是也存在一定的局限性。 ```javascript function cloneJSON(source) { return JSON.parse(JSON.stringify(source)); } ``` 对于这种方法来说，内部的原理实现也是使用的递归，递归到一定深度，也会出现爆栈问题。但是对于循环引用的问题不会出现，内部的解决方案正是用到了循环检测。对于详细的实现一个深拷贝，具体参考文章：[[深拷贝的终极探索](https://segmentfault.com/a/1190000016672263)](https://segmentfault.com/a/1190000016672263) ### 异步编程 由于 ` JavaScript` 是单线程的，单线程就意味着阻塞问题，当一个任务执行完成之后才能执行下一个任务。这样就会导致出现页面卡死的状态，页面无响应，影响用户的体验，所以不得不出现了同步和异步的解决方案。面试官：浅拷贝和深拷贝分别如何实现的？有哪几种实现方式？
JS 单线程的特点就是同一时刻只能执行一个任。这是由一些与用户的互动以及操作 `DOM` 等相关的操作决定了 JS 要使用单线程，否则使用多线程会带来复杂的同步问题。如果执行同步问题的话，多线程需要加锁，执行任务造成非常的繁琐。 虽然 HTML5 标准规定，允许 `JavaScript` 脚本创建多个线程，但是子线程完全受主线程控制，且不得操作 `DOM`。 上述开头我们也说到了，单线程带来的问题就是会导致阻塞问题，为了解决这个问题，就不得不涉及 JS 的两种任务，分别为同步任务和异步任务。面试官：JS 为什么是单线程？又带来了哪些问题呢？
最早的解决方案是使用回调函数，回调函数不是直接调用，而是在特定的事件或条件发生时另一方调用的，用于对该事件或条件进行响应。比如 Ajax 回调： ```javascript // jQuery 中的 ajax $.ajax({ type : "post", url : 'test.json', dataType : 'json', success : function(res) { // 响应成功回调 }, fail: function(err){ // 响应失败回调 } }); ``` 但是如果某个请求存在依赖性，如下： ```javascript $.ajax({ type:"post", success: function(res){//成功回调 //再次异步请求 $.ajax({ type:"post", url:"...?id=res.id, success:function(res){ $.ajax({ type:"post", url:"...?id=res.id, success:function(){ // 往复循环 } }) } }) } }) ``` 就会形成不断的循环嵌套，我们称之为回调地狱。我们可以看出回调地狱有以下缺点： - 嵌套函数存在耦合性，一旦有所改动，牵一发而动全身。 - 嵌套函数一多，就很难处理错误。 - 回调函数不能使用 `try catch ` 捕获异常(异常的捕获只能在函数执行的时候才能捕获到)。 - 回调函数不能直接 `return `。 以上有两个地方俺需要再进一步详细说明一下： - **为什么不能捕获异常？** 其实这跟 `js` 的运行机制相关，异步任务执行完成会加入任务队列，当执行栈中没有可执行任务了，主线程取出任务队列中的异步任务并入栈执行，当异步任务执行的时候，捕获异常的函数已经在执行栈内退出了，所以异常无法被捕获。 - **为什么不能return？** `return` 只能终止回调的函数的执行，而不能终止外部代码的执行。面试官：JS 如何实现异步编程？
既然回调函数存在回调地狱问题，那我们如何解决呢？ES6 给我们提供了三种解决方案，分别是 Generator、Promise、async/await（ES7）。 由于这部分涉及到 ES6 部分的知识，这一期是有关 JS 的，所以会在下一期进行延伸，这里不多涉及。 【留下一个传送门~】面试官：如何解决回调地狱问题呢？
上边我们说到 ` JS` 是单线程且使用同步和异步任务解决 `JS` 的阻塞问题，那么异步代码的执行顺序以及 `EventLoop` 是如何运作的呢？ 在深入事件循环机制之前，需要弄懂一下几个概念： - 执行上下文(`Execution context`) - 执行栈（`Execution stack`） - 微任务（`micro-task`） - 宏任务（`macro-task`） #### 执行上下文 执行上下文是一个抽象的概念，可以理解为是代码执行的一个环境。JS 的执行上下文分为三种，全局执行上下文、函数(局部)执行上下文、Eval 执行上下文。 - **全局执行上下文：**全局执行上下文指的是全局 `this` 指向的 `window`，可以是外部加载的 JS 文件或者本地`面试官：说说异步代码的执行顺序？Event Loop 的运行机制是如何的运行的？