最近在整顿 JavaScript 的时候发现遇到了很多面试中常见的面试题，本局部次要是作者在 Github 等各大论坛收录的 JavaScript 相干常识和一些相干面试题时所做的笔记，分享这份总结给大家，对大家对 JavaScript 的能够来一次全方位的检漏和排查，感激原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果呈现谬误，心愿大家独特指出！

附笔记链接，浏览往期更多优质文章可移步查看，喜爱的能够给我点赞激励哦：https://github.com/Wscats/articles

js 一共有六种根本数据类型，别离是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 类型，代表创立后举世无双且不可变的数据类型，它的呈现我认为次要是为了解决可能呈现的全局变量抵触的问题。

波及知识点：

栈：原始数据类型（Undefined、Null、Boolean、Number、String）
堆：援用数据类型（对象、数组和函数）

两种类型的区别是：存储地位不同。原始数据类型间接存储在栈（stack）中的简略数据段，占据空间小、大小固定，属于被频繁应用数据，所以放入栈中存储。援用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；援用数据类型在
栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找援用值时，会首先检索其在栈中的地址，获得地址后从堆中取得实
体。

答复：

js 能够分为两种类型的值，一种是根本数据类型，一种是简单数据类型。根本数据类型....（参考 1）简单数据类型指的是 Object 类型，所有其余的如 Array、Date 等数据类型都能够了解为 Object 类型的子类。两种类型间的次要区别是它们的存储地位不同，根本数据类型的值间接保留在栈中，而简单数据类型的值保留在堆中，通过应用在栈中
保留对应的指针来获取堆中的值。

详细资料能够参考：
《JavaScript 有几种类型的值？》
《JavaScript 有几种类型的值？是否画一下它们的内存图；》

堆和栈的概念存在于数据结构中和操作系统内存中。在数据结构中，栈中数据的存取形式为先进后出。而堆是一个优先队列，是按优先级来进行排序的，优先级能够依照大小来规定。齐全
二叉树是堆的一种实现形式。在操作系统中，内存被分为栈区和堆区。栈区内存由编译器主动调配开释，寄存函数的参数值，局部变量的值等。其操作形式相似于数据结构中的栈。堆区内存个别由程序员调配开释，若程序员不开释，程序完结时可能由垃圾回收机制回收。

详细资料能够参考：
《什么是堆？什么是栈？他们之间有什么区别和分割？》

所有 typeof 返回值为 "object" 的对象（如数组）都蕴含一个外部属性 [[Class]]（咱们能够把它看作一个外部的分类，而非
传统的面向对象意义上的类）。这个属性无奈间接拜访，个别通过 Object.prototype.toString(..) 来查看。例如：Object.prototype.toString.call([1,2,3] );
// "[object Array]"

Object.prototype.toString.call(/regex-literal/i);
// "[object RegExp]"

波及知识点：

全局的对象（global objects）或称规范内置对象，不要和 "全局对象（global object）" 混同。这里说的全局的对象是说在
全局作用域里的对象。全局作用域中的其余对象能够由用户的脚本创立或由宿主程序提供。规范内置对象的分类（1）值属性，这些全局属性返回一个简略值，这些值没有本人的属性和办法。例如 Infinity、NaN、undefined、null 字面量（2）函数属性，全局函数能够间接调用，不须要在调用时指定所属对象，执行完结后会将后果间接返回给调用者。例如 eval()、parseFloat()、parseInt() 等（3）根本对象，根本对象是定义或应用其余对象的根底。根本对象包含个别对象、函数对象和谬误对象。例如 Object、Function、Boolean、Symbol、Error 等（4）数字和日期对象，用来示意数字、日期和执行数学计算的对象。例如 Number、Math、Date（5）字符串，用来示意和操作字符串的对象。例如 String、RegExp（6）可索引的汇合对象，这些对象示意依照索引值来排序的数据汇合，包含数组和类型数组，以及类数组构造的对象。例如 Array（7）应用键的汇合对象，这些汇合对象在存储数据时会应用到键，反对依照插入程序来迭代元素。例如 Map、Set、WeakMap、WeakSet（8）矢量汇合，SIMD 矢量汇合中的数据会被组织为一个数据序列。例如 SIMD 等（9）结构化数据，这些对象用来示意和操作结构化的缓冲区数据，或应用 JSON 编码的数据。例如 JSON 等（10）管制形象对象

例如 Promise、Generator 等（11）反射

例如 Reflect、Proxy（12）国际化，为了反对多语言解决而退出 ECMAScript 的对象。例如 Intl、Intl.Collator 等（13）WebAssembly（14）其余

例如 arguments

答复：

js 中的内置对象次要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其余对象的结构函
数对象。个别咱们常常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构
造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。

详细资料能够参考：
《规范内置对象的分类》
《JS 所有内置对象属性和办法汇总》

已在作用域中申明但还没有赋值的变量，是 undefined 的。相同，还没有在作用域中申明过的变量，是 undeclared 的。对于 undeclared 变量的援用，浏览器会报援用谬误，如 ReferenceError: b is not defined。然而咱们能够应用 typ
eof 的平安防备机制来防止报错，因为对于 undeclared（或者 not defined）变量，typeof 会返回 "undefined"。

首先 Undefined 和 Null 都是根本数据类型，这两个根本数据类型别离都只有一个值，就是 undefined 和 null。undefined 代表的含意是未定义，null 代表的含意是空对象。个别变量申明了但还没有定义的时候会返回 undefined，null
次要用于赋值给一些可能会返回对象的变量，作为初始化。undefined 在 js 中不是一个保留字，这意味着咱们能够应用 undefined 来作为一个变量名，这样的做法是十分危险的，它
会影响咱们对 undefined 值的判断。然而咱们能够通过一些办法取得平安的 undefined 值，比如说 void 0。当咱们对两种类型应用 typeof 进行判断的时候，Null 类型化会返回“object”，这是一个历史遗留的问题。当咱们应用双等
号对两种类型的值进行比拟时会返回 true，应用三个等号时会返回 false。

详细资料能够参考：
《JavaScript 深刻了解之 undefined 与 null》

因为 undefined 是一个标识符，所以能够被当作变量来应用和赋值，然而这样会影响 undefined 的失常判断。表达式 void ___ 没有返回值，因而返回后果是 undefined。void 并不扭转表达式的后果，只是让表达式不返回值。按常规咱们用 void 0 来取得 undefined。

在平时我的项目开发中，咱们恪守一些这样的根本标准，比如说：（1）一个函数作用域中所有的变量申明应该尽量提到函数首部，用一个 var 申明，不容许呈现两个间断的 var 申明，申明时
    如果变量没有值，应该给该变量赋值对应类型的初始值，便于别人浏览代码时，可能高深莫测的晓得变量对应的类型值。（2）代码中呈现地址、工夫等字符串时须要应用常量代替。（3）在进行比拟的时候吧，尽量应用 '===', '!==' 代替 '==', '!='。（4）不要在内置对象的原型上增加办法，如 Array, Date。（5）switch 语句必须带有 default 分支。（6）for 循环必须应用大括号。（7）if 语句必须应用大括号。

在 js 中咱们是应用构造函数来新建一个对象的，每一个构造函数的外部都有一个 prototype 属性值，这个属性值是一个对
象，这个对象蕴含了能够由该构造函数的所有实例共享的属性和办法。当咱们应用构造函数新建一个对象后，在这个对象的外部
将蕴含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说咱们
是不应该可能获取到这个值的，然而当初浏览器中都实现了 __proto__ 属性来让咱们拜访这个属性，然而咱们最好不要应用这
个属性，因为它不是标准中规定的。ES5 中新增了一个 Object.getPrototypeOf() 办法，咱们能够通过这个办法来获取对
象的原型。当咱们拜访一个对象的属性时，如果这个对象外部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又
会有本人的原型，于是就这样始终找上来，也就是原型链的概念。原型链的止境一般来说都是 Object.prototype 所以这就
是咱们新建的对象为什么可能应用 toString() 等办法的起因。特点：JavaScript 对象是通过援用来传递的，咱们创立的每个新对象实体中并没有一份属于本人的原型正本。当咱们批改原型时，与
之相干的对象也会继承这一扭转。

详细资料能够参考：
《JavaScript 深刻了解之原型与原型链》

p.proto
p.constructor.prototype
Object.getPrototypeOf(p)

以 0X、0x 结尾的示意为十六进制。
以 0、0O、0o 结尾的示意为八进制。
以 0B、0b 结尾的示意为二进制格局。

平安整数指的是，在这个范畴内的整数转化为二进制存储的时候不会呈现精度失落，可能被“平安”出现的最大整数是 2^53 - 1，即 9007199254740991，在 ES6 中被定义为 Number.MAX_SAFE_INTEGER。最小整数是 -9007199254740991，在 ES6 中
被定义为 Number.MIN_SAFE_INTEGER。如果某次计算的后果失去了一个超过 JavaScript 数值范畴的值，那么这个值会被主动转换为非凡的 Infinity 值。如果某次
计算返回了正或负的 Infinity 值，那么该值将无奈参加下一次的计算。判断一个数是不是有穷的，能够应用 isFinite 函数
来判断。

NaN 意指“不是一个数字”（not a number），NaN 是一个“戒备值”（sentinel value，有非凡用处的惯例值），用于指出
数字类型中的谬误状况，即“执行数学运算没有胜利，这是失败后返回的后果”。typeof NaN; // "number"

NaN 是一个非凡值，它和本身不相等，是惟一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN != NaN
为 true。

函数 isNaN 接管参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因而非数字值传入也会
返回 true，会影响 NaN 的判断。函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再持续判断是否为 NaN，这种办法对于 NaN 的判断更为
精确。

Array 构造函数只带一个数字参数的时候，该参数会被作为数组的预设长度（length），而非只充当数组中的一个元素。这样
创立进去的只是一个空数组，只不过它的 length 属性被设置成了指定的值。构造函数 Array(..) 不要求必须带 new 关键字。不带时，它会被主动补上。

标准的 9.8 节中定义了形象操作 ToString，它负责解决非字符串到字符串的强制类型转换。（1）Null 和 Undefined 类型，null 转换为 "null"，undefined 转换为 "undefined"，（2）Boolean 类型，true 转换为 "true"，false 转换为 "false"。（3）Number 类型的值间接转换，不过那些极小和极大的数字会应用指数模式。（4）Symbol 类型的值间接转换，然而只容许显式强制类型转换，应用隐式强制类型转换会产生谬误。（3）对一般对象来说，除非自行定义 toString() 办法，否则会调用 toString()（Object.prototype.toString()）来返回外部属性 [[Class]] 的值，如 "[object Object]"。如果对象有本人的 toString() 办法，字符串化时就会
    调用该办法并应用其返回值。

有时咱们须要将非数字值当作数字来应用，比方数学运算。为此 ES5 标准在 9.3 节定义了形象操作 ToNumber。（1）Undefined 类型的值转换为 NaN。（2）Null 类型的值转换为 0。（3）Boolean 类型的值，true 转换为 1，false 转换为 0。（4）String 类型的值转换如同应用 Number() 函数进行转换，如果蕴含非数字值则转换为 NaN，空字符串为 0。（5）Symbol 类型的值不能转换为数字，会报错。（6）对象（包含数组）会首先被转换为相应的根本类型值，如果返回的是非数字的根本类型值，则再遵循以上规定将其强制转换为数字。为了将值转换为相应的根本类型值，形象操作 ToPrimitive 会首先（通过外部操作 DefaultValue）查看该值是否有 valueOf() 办法。如果有并且返回根本类型值，就应用该值进行强制类型转换。如果没有就应用 toString() 的返回值（如果存在）来进行强制类型转换。如果 valueOf() 和 toString() 均不返回根本类型值，会产生 TypeError 谬误。

ES5 标准 9.2 节中定义了形象操作 ToBoolean，列举了布尔强制类型转换所有可能呈现的后果。以下这些是假值：• undefined
• null
• false
• +0、-0 和 NaN
• ""

假值的布尔强制类型转换后果为 false。从逻辑上说，假值列表以外的都应该是真值。

{} 的 valueOf 后果为 {}，toString 的后果为 "[object Object]"

[] 的 valueOf 后果为 []，toString 的后果为 ""

浏览器在某些特定状况下，在惯例 JavaScript 语法根底上本人创立了一些外来值，这些就是“假值对象”。假值对象看起来和
一般对象并无二致（都有属性，等等），但将它们强制类型转换为布尔值时后果为 false 最常见的例子是 document.all，它
是一个类数组对象，蕴含了页面上的所有元素，由 DOM（而不是 JavaScript 引擎）提供给 JavaScript 程序应用。

~ 返回 2 的补码，并且 ~ 会将数字转换为 32 位整数，因而咱们能够应用 ~ 来进行取整操作。~x 大抵等同于 -(x+1)。

解析容许字符串（如 parseInt()）中含有非数字字符，解析按从左到右的程序，如果遇到非数字字符就进行。而转换（如 Nu
mber ()）不容许呈现非数字字符，否则会失败并返回 NaN。

24. `+` 操作符什么时候用于字符串的拼接？

依据 ES5 标准 11.6.1 节，如果某个操作数是字符串或者可能通过以下步骤转换为字符串的话，+ 将进行拼接操作。如果其
中一个操作数是对象（包含数组），则首先对其调用 ToPrimitive 形象操作，该形象操作再调用 [[DefaultValue]]，以
数字作为上下文。如果不能转换为字符串，则会将其转换为数字类型来进行计算。简略来说就是，如果 + 的其中一个操作数是字符串（或者通过以上步骤最终失去字符串），则执行字符串拼接，否则执行数字
加法。那么对于除了加法的运算符来说，只有其中一方是数字，那么另一方就会被转为数字。

（1）if (..) 语句中的条件判断表达式。（2）for (.. ; .. ; ..) 语句中的条件判断表达式（第二个）。（3）while (..) 和 do..while(..) 循环中的条件判断表达式。（4）? : 中的条件判断表达式。（5）逻辑运算符 ||（逻辑或）和 &&（逻辑与）右边的操作数（作为条件判断表达式）。

|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先进行 ToBoolean 强制类型转换，而后再执行条件
判断。对于 || 来说，如果条件判断后果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。&& 则相同，如果条件判断后果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。|| 和 && 返回它们其中一个操作数的值，而非条件判断的后果

ES6 容许从符号到字符串的显式强制类型转换，然而隐式强制类型转换会产生谬误。Symbol 值不可能被强制类型转换为数字（显式和隐式都会产生谬误），但能够被强制类型转换为布尔值（显式和隐式后果
都是 true）。

（1）字符串和数字之间的相等比拟，将字符串转换为数字之后再进行比拟。（2）其余类型和布尔类型之间的相等比拟，先将布尔值转换为数字后，再利用其余规定进行比拟。（3）null 和 undefined 之间的相等比拟，后果为真。其余值和它们进行比拟都返回假值。（4）对象和非对象之间的相等比拟，对象先调用 ToPrimitive 形象操作后，再进行比拟。（5）如果一个操作值为 NaN，则相等比拟返回 false（NaN 自身也不等于 NaN）。（6）如果两个操作值都是对象，则比拟它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true，否则，返回 false。

详细资料能够参考：
《JavaScript 字符串间的比拟》

（1）应用 Number() 办法，前提是所蕴含的字符串不蕴含不非法字符。（2）应用 parseInt() 办法，parseInt() 函数可解析一个字符串，并返回一个整数。还能够设置要解析的数字的基数。当基数的值为 0，或没有设置该参数时，parseInt() 会依据 string 来判断数字的基数。（3）应用 parseFloat() 办法，该函数解析一个字符串参数并返回一个浮点数。（4）应用 + 操作符的隐式转换。

详细资料能够参考：
《详解 JS 中 Number()、parseInt() 和 parseFloat() 的区别》

function format(number) {return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
}

//（1）匹配 16 进制色彩值
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;

//（2）匹配日期，如 yyyy-mm-dd 格局
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

//（3）匹配 qq 号
var regex = /^[1-9][0-9]{4,10}$/g;

//（4）手机号码正则
var regex = /^1[34578]\d{9}$/g;

//（5）用户名正则
var regex = /^[a-zA-Z\$][a-zA-Z0-9_\$]{4,16}$/;

详细资料能够参考：
《前端表单验证罕用的 15 个 JS 正则表达式》
《JS 罕用正则汇总》

《JS – 生成随机数的办法汇总（不同范畴、类型的随机数）》

//（1）应用数组 sort 办法对数组元素随机排序，让 Math.random() 进去的数与 0.5 比拟，如果大于就返回 1 替换地位，如果小于就返回 -1，不替换地位。function randomSort(a, b) {return Math.random() > 0.5 ? -1 : 1;
}

//  毛病：每个元素被派到新数组的地位不是随机的，起因是 sort() 办法是顺次比拟的。//（2）随机从原数组抽取一个元素，退出到新数组

function randomSort(arr) {var result = [];

  while (arr.length > 0) {var randomIndex = Math.floor(Math.random() * arr.length);
    result.push(arr[randomIndex]);
    arr.splice(randomIndex, 1);
  }

  return result;
}

//（3）随机替换数组内的元素（洗牌算法相似）function randomSort(arr) {
  var index,
    randomIndex,
    temp,
    len = arr.length;

  for (index = 0; index < len; index++) {randomIndex = Math.floor(Math.random() * (len - index)) + index;

    temp = arr[index];
    arr[index] = arr[randomIndex];
    arr[randomIndex] = temp;
  }

  return arr;
}

// es6
function randomSort(array) {
  let length = array.length;

  if (!Array.isArray(array) || length <= 1) return;

  for (let index = 0; index < length - 1; index++) {let randomIndex = Math.floor(Math.random() * (length - index)) + index;

    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
  }

  return array;
}

详细资料能够参考：
《Fisher and Yates 的原始版》
《javascript 实现数组随机排序?》
《JavaScript 学习笔记：数组随机排序》

咱们个别应用字面量的模式间接创建对象，然而这种创立形式对于创立大量类似对象的时候，会产生大量的反复代码。但 js
和个别的面向对象的语言不同，在 ES6 之前它没有类的概念。然而咱们能够应用函数来进行模仿，从而产生出可复用的对象
创立形式，我理解到的形式有这么几种：（1）第一种是工厂模式，工厂模式的次要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目标。然而它有一个很大的问题就是创立进去的对象无奈和某个类型分割起来，它只是简略的封装了复用代码，而没有建设起对象和类型间的关系。（2）第二种是构造函数模式。js 中每一个函数都能够作为构造函数，只有一个函数是通过 new 来调用的，那么咱们就能够把它称为构造函数。执行构造函数首先会创立一个对象，而后将对象的原型指向构造函数的 prototype 属性，而后将执行上下文中的 this 指向这个对象，最初再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因而咱们能够应用 this 给对象赋值。构造函数模式绝对于工厂模式的长处是，所创立的对象和构造函数建设起了分割，因而咱们能够通过原型来辨认对象的类型。然而构造函数存在一个毛病就是，造成了不必要的函数对象的创立，因为在 js 中函数也是一个对象，因而如果对象属性中如果蕴含函数的话，那么每次咱们都会新建一个函数对象，节约了不必要的内存空间，因为函数是所有的实例都能够通用的。（3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它蕴含了通过构造函数创立的所有实例都能共享的属性和办法。因而咱们能够应用原型对象来增加专用属性和办法，从而实现代码的复用。这种形式绝对于构造函数模式来说，解决了函数对象的复用问题。然而这种模式也存在一些问题，一个是没有方法通过传入参数来初始化值，另一个是如果存在一个援用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对援用类型值的扭转会影响所有的实例。（4）第四种模式是组合应用构造函数模式和原型模式，这是创立自定义类型的最常见形式。因为构造函数模式和原型模式离开应用都存在一些问题，因而咱们能够组合应用这两种模式，通过构造函数来初始化对象的属性，通过原型对象来实现函数办法的复用。这种办法很好的解决了两种模式独自应用时的毛病，然而有一点有余的就是，因为应用了两种不同的模式，所以对于代码的封装性不够好。（5）第五种模式是动静原型模式，这一种模式将原型办法赋值的创立过程挪动到了构造函数的外部，通过对属性是否存在的判断，能够实现仅在第一次调用函数时对原型对象赋值一次的成果。这一种形式很好地对下面的混合模式进行了封装。（6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，我对这个模式的了解是，它次要是基于一个已有的类型，在实例化时对实例化的对象进行扩大。这样既不必批改原来的构造函数，也达到了扩大对象的目标。它的一个毛病和工厂模式一样，无奈实现对象的辨认。嗯我目前理解到的就是这么几种形式。

详细资料能够参考：
《JavaScript 深刻了解之对象创立》

我理解的 js 中实现继承的几种形式有：（1）第一种是以原型链的形式来实现继承，然而这种实现形式存在的毛病是，在蕴含有援用类型的数据时，会被所有的实例对象所共享，容易造成批改的凌乱。还有就是在创立子类型的时候不能向超类型传递参数。（2）第二种形式是应用借用构造函数的形式，这种形式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种办法解决了不能向超类型传递参数的毛病，然而它存在的一个问题就是无奈实现函数办法的复用，并且超类型原型定义的办法子类型也没有方法拜访到。（3）第三种形式是组合继承，组合继承是将原型链和借用构造函数组合起来应用的一种形式。通过借用构造函数的形式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现办法的继承。这种形式解决了下面的两种模式独自应用时的问题，然而因为咱们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。（4）第四种形式是原型式继承，原型式继承的次要思路就是基于已有的对象来创立新的对象，实现的原理是，向函数中传入一个对象，而后返回一个以这个对象为原型的对象。这种继承的思路次要不是为了实现发明一种新的类型，只是对某个对象实现一种简略继承，ES5 中定义的 Object.create() 办法就是原型式继承的实现。毛病与原型链形式雷同。（5）第五种形式是寄生式继承，寄生式继承的思路是创立一个用于封装继承过程的函数，通过传入一个对象，而后复制一个对象的正本，而后对象进行扩大，最初返回这个对象。这个扩大的过程就能够了解是一种继承。这种继承的长处就是对一个简略对象实现继承，如果这个对象不是咱们的自定义类型时。毛病是没有方法实现函数的复用。（6）第六种形式是寄生式组合继承，组合继承的毛病就是应用超类型的实例做为子类型的原型，导致增加了不必要的原型属性。寄生式组合继承的形式是应用超类型的原型的副原本作为子类型的原型，这样就防止了创立不必要的属性。

详细资料能够参考：
《JavaScript 深刻了解之继承》

function Person(name) {this.name = name;}

Person.prototype.sayName = function() {console.log("My name is" + this.name + ".");
};

function Student(name, grade) {Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayMyGrade = function() {console.log("My grade is" + this.grade + ".");
};

作用域链的作用是保障对执行环境有权拜访的所有变量和函数的有序拜访，通过作用域链，咱们能够拜访到外层环境的变量和
函数。作用域链的实质上是一个指向变量对象的指针列表。变量对象是一个蕴含了执行环境中所有变量和函数的对象。作用域链的前
端始终都是以后执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最初一个对象。当咱们查找一个变量时，如果以后执行环境中没有找到，咱们能够沿着作用域链向后查找。作用域链的创立过程跟执行上下文的建设无关....

详细资料能够参考：
《JavaScript 深刻了解之作用域链》

this 是执行上下文中的一个属性，它指向最初一次调用这个办法的对象。在理论开发中，this 的指向能够通过四种调用模
式来判断。

1. 第一种是函数调用模式，当一个函数不是一个对象的属性时，间接作为函数来调用时，this 指向全局对象。
2. 第二种是办法调用模式，如果一个函数作为一个对象的办法来调用时，this 指向这个对象。
3. 第三种是结构器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
4. 第四种是 apply、call 和 bind 调用模式，这三个办法都能够显示的指定调用函数的 this 指向。其中 apply 办法接管两个参数：一个是 this 绑定的对象，一个是参数数组。call 办法接管的参数，第一个是 this 绑定的对象，前面的其余参数是传入函数执行的参数。也就是说，在应用 call() 办法时，传递给函数的参数必须一一列举进去。bind 办法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了应用 new 时会被扭转，其余状况下都不会扭转。

这四种形式，应用结构器调用模式的优先级最高，而后是 apply、call 和 bind 调用模式，而后是办法调用模式，而后
是函数调用模式。

《JavaScript 深刻了解之 this 详解》

它的性能是把对应的字符串解析成 JS 代码并运行。应该防止应用 eval，不平安，十分耗性能（2 次，一次解析成 js 语句，一次执行）。

详细资料能够参考：
《eval()》

DOM 指的是文档对象模型，它指的是把文档当做一个对象来看待，这个对象次要定义了解决网页内容的办法和接口。BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来看待，这个对象次要定义了与浏览器进行交互的法和接口。BOM
的外围是 window，而 window 对象具备双重角色，它既是通过 js 拜访浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者办法存在。window 对象含有 locati
on 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最基本的对象 document 对象也是 BOM 的 window 对
象的子对象。

详细资料能够参考：
《DOM, DOCUMENT, BOM, WINDOW 有什么区别?》
《Window 对象》
《DOM 与 BOM 别离是什么，有何关联？》
《JavaScript 学习总结（三）BOM 和 DOM 详解》

const EventUtils = {
  // 视能力别离应用 dom0||dom2||IE 形式 来绑定事件
  // 增加事件
  addEvent: function(element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {element.attachEvent("on" + type, handler);
    } else {element["on" + type] = handler;
    }
  },

  // 移除事件
  removeEvent: function(element, type, handler) {if (element.removeEventListener) {element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {element.detachEvent("on" + type, handler);
    } else {element["on" + type] = null;
    }
  },

  // 获取事件指标
  getTarget: function(event) {return event.target || event.srcElement;},

  // 获取 event 对象的援用，取到事件的所有信息，确保随时能应用 event
  getEvent: function(event) {return event || window.event;},

  // 阻止事件（次要是事件冒泡，因为 IE 不反对事件捕捉）stopPropagation: function(event) {if (event.stopPropagation) {event.stopPropagation();
    } else {event.cancelBubble = true;}
  },

  // 勾销事件的默认行为
  preventDefault: function(event) {if (event.preventDefault) {event.preventDefault();
    } else {event.returnValue = false;}
  }
};

详细资料能够参考：
《JS 事件模型》

1. 事件是用户操作网页时产生的交互动作，比方 click/move，事件除了用户触发的动作外，还能够是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，蕴含了该事件产生时的所有相干信息（event 的属性）以及能够对事件进行的操作（event 的办法）。
2. 事件处理机制：IE 反对事件冒泡、Firefox 同时反对两种事件模型，也就是：事件冒泡和事件捕捉。
3.event.stopPropagation() 或者 ie 下的办法 event.cancelBubble = true;

详细资料能够参考：
《Javascript 事件模型系列（一）事件及事件的三种模型》
《Javascript 事件模型：事件捕捉和事件冒泡》

事件是用户操作网页时产生的交互动作或者网页自身的一些操作，古代浏览器一共有三种事件模型。第一种事件模型是最早的 DOM0 级模型，这种模型不会流传，所以没有事件流的概念，然而当初有的浏览器反对以冒泡的形式实
现，它能够在网页中间接定义监听函数，也能够通过 js 属性来指定监听函数。这种形式是所有浏览器都兼容的。第二种事件模型是 IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行指标元素绑定的监听事件。而后是事件冒泡阶段，冒泡指的是事件从指标元素冒泡到 document，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来增加监听函数，能够增加多个监听函数，会按程序顺次执行。第三种是 DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕捉阶段。捕捉指的是事件从 document 始终向下流传到指标元素，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。前面两个阶段和 IE 事件模型的两个阶段雷同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数能够指定事件是否在捕捉阶段执行。

详细资料能够参考：
《一个 DOM 元素绑定多个事件时，先执行冒泡还是捕捉》

事件委托实质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点能够通过事件对象获取到
指标节点，因而能够把子节点的监听函数定义在父节点上，由父节点的监听函数对立解决多个子元素的事件，这种形式称为事件代理。应用事件代理咱们能够不必要为每一个子元素都绑定一个监听事件，这样缩小了内存上的耗费。并且应用事件代理咱们还能够实现事件的动静绑定，比如说新增了一个子节点，咱们并不需要独自地为它增加一个监听事件，它所产生的事件会交给父元素中的监听函数来解决。

详细资料能够参考：
《JavaScript 事件委托详解》

parseInt() 函数能解析一个字符串，并返回一个整数，须要两个参数 (val, radix)，其中 radix 示意要解析的数字的基数。（该值介于 2 ~ 36 之间，并且字符串中的数字不能大于 radix 能力正确返回数字后果值）。此处 map 传了 3 个参数 (element, index, array)，默认第三个参数被疏忽掉，因而三次传入的参数别离为 "1-0", "2-1", "3-2"

因为字符串的值不能大于基数，因而前面两次调用均失败，返回 NaN，第一次基数为 0，按十进制解析返回 1。

详细资料能够参考：
[《为什么 [“1”, “2”, “3”].map(parseInt) 返回 [1,NaN,NaN]？》](https://blog.csdn.net/justjav…

闭包是指有权拜访另一个函数作用域中变量的函数，创立闭包的最常见的形式就是在一个函数内创立另一个函数，创立的函数能够
拜访到以后函数的局部变量。闭包有两个罕用的用处。闭包的第一个用处是使咱们在函数内部可能拜访到函数外部的变量。通过应用闭包，咱们能够通过在内部调用闭包函数，从而在外
部拜访到函数外部的变量，能够应用这种办法来创立公有变量。函数的另一个用处是使曾经运行完结的函数上下文中的变量对象持续留在内存中，因为闭包函数保留了这个变量对象的援用，所以
这个变量对象不会被回收。其实闭包的实质就是作用域链的一个非凡的利用，只有理解了作用域链的创立过程，就可能了解闭包的实现原理。

详细资料能够参考：
《JavaScript 深刻了解之闭包》

相干知识点：

use strict 是一种 ECMAscript5 增加的（严格）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立 "严格模式" 的目标，次要有以下几个：

打消 Javascript 语法的一些不合理、不谨严之处，缩小一些怪异行为;
打消代码运行的一些不平安之处，保障代码运行的平安；
进步编译器效率，减少运行速度；
为将来新版本的 Javascript 做好铺垫。

区别：

1. 禁止应用 with 语句。
2. 禁止 this 关键字指向全局对象。
3. 对象不能有重名的属性。

答复：

use strict 指的是严格运行模式，在这种模式对 js 的应用增加了一些限度。比如说禁止 this 指向全局对象，还有禁止使
用 with 语句等。设立严格模式的目标，次要是为了打消代码应用中的一些不平安的应用形式，也是为了打消 js 语法自身的一
些不合理的中央，以此来缩小一些运行时的怪异的行为。同时应用严格运行模式也可能进步编译的效率，从而进步代码的运行速度。我认为严格模式代表了 js 一种更正当、更平安、更谨严的倒退方向。

详细资料能够参考：
《Javascript 严格模式详解》

第一种形式是应用 instanceof 运算符来判断构造函数的 prototype 属性是否呈现在对象的原型链中的任何地位。第二种形式能够通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，然而这种形式不是很平安，因为 constructor 属性能够被改写。第三种形式，如果须要判断的是某个内置的援用类型的话，能够应用 Object.prototype.toString() 办法来打印对象的
[[Class]] 属性来进行判断。

详细资料能够参考：
《js 判断一个对象是否属于某一类》

// instanceof 运算符用于判断构造函数的 prototype 属性是否呈现在对象的原型链中的任何地位。// 实现：function myInstanceof(left, right) {let proto = Object.getPrototypeOf(left), // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象

  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {if (!proto) return false;
    if (proto === prototype) return true;

    proto = Object.getPrototypeOf(proto);
  }
}

详细资料能够参考：
《instanceof》

//（1）首先创立了一个新的空对象
//（2）设置原型，将对象的原型设置为函数的 prototype 对象。//（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象增加属性）//（4）判断函数的返回值类型，如果是值类型，返回创立的对象。如果是援用类型，就返回这个援用类型的对象。// 实现:

function objectFactory() {
  let newObject = null,
    constructor = Array.prototype.shift.call(arguments),
    result = null;

  // 参数判断
  if (typeof constructor !== "function") {console.error("type error");
    return;
  }

  // 新建一个空对象，对象的原型为构造函数的 prototype 对象
  newObject = Object.create(constructor.prototype);

  // 将 this 指向新建对象，并执行函数
  result = constructor.apply(newObject, arguments);

  // 判断返回对象
  let flag =
    result && (typeof result === "object" || typeof result === "function");

  // 判断返回后果
  return flag ? result : newObject;
}

// 应用办法
// objectFactory(构造函数, 初始化参数);

详细资料能够参考：
《new 操作符具体干了什么？》
《JavaScript 深刻之 new 的模仿实现》

hasOwnProperty

所有继承了 Object 的对象都会继承到 hasOwnProperty 办法。这个办法能够用来检测一个对象是否含有特定的本身属性，和
in 运算符不同，该办法会疏忽掉那些从原型链上继承到的属性。

详细资料能够参考：
《Object.prototype.hasOwnProperty()》

相干知识点：

JSON 是一种数据交换格局，基于文本，优于轻量，用于替换数据。JSON 能够示意数字、布尔值、字符串、null、数组（值的有序序列），以及由这些值（或数组、对象）所组成的对象（字符串与
值的映射）。JSON 应用 JavaScript 语法，然而 JSON 格局仅仅是一个文本。文本能够被任何编程语言读取及作为数据格式传递。

答复：

JSON 是一种基于文本的轻量级的数据交换格局。它能够被任何的编程语言读取和作为数据格式来传递。在我的项目开发中，咱们应用 JSON 作为前后端数据交换的形式。在前端咱们通过将一个合乎 JSON 格局的数据结构序列化为 JSON 字符串，而后将它传递到后端，后端通过 JSON 格局的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的，因而很容易将 JSON 和 js 中的对象弄混，然而咱们应该留神的是 JSON 和 js 中的对象不是一回事，JSON 中对象格局更加严格，比如说在 JSON 中属性值不能为函数，不能呈现 NaN 这样的属性值等，因而大多数的 js 对象是不合乎 JSON 对象的格局的。在 js 中提供了两个函数来实现 js 数据结构和 JSON 格局的转换解决，一个是 JSON.stringify 函数，通过传入一个合乎 JSON 格局的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不合乎 JSON 格局，那么在序列化的时候会对这些值进行对应的非凡解决，使其符合规范。在前端向后端发送数据时，咱们能够调用这个函数将数据对象转化为 JSON 格局的字符串。另一个函数 JSON.parse() 函数，这个函数用来将 JSON 格局的字符串转换为一个 js 数据结构，如果传入的字符串不是规范的 JSON 格局的字符串的话，将会抛出谬误。当咱们从后端接管到 JSON 格局的字符串时，咱们能够通过这个办法来将其解析为一个 js 数据结构，以此来进行数据的拜访。

详细资料能够参考：
《深刻理解 JavaScript 中的 JSON》

（1）选取页面所有 DOM 元素。在浏览器的控制台中能够应用 $$()办法来获取页面中相应的元素，这是古代浏览器提供的一个命令行 API 相当于 document.querySelectorAll 办法。（2）循环遍历 DOM 元素（3）给元素增加 outline。因为渲染的 outline 是不在 CSS 盒模型中的，所以为元素增加 outline 并不会影响元素的大小和页面的布局。（4）生成随机色彩函数。Math.random()*(1<<24) 能够失去 0~2^24 - 1 之间的随机数，因为失去的是一个浮点数，但咱们只须要整数局部，应用取反操作符 ~ 间断两次取反取得整数局部，而后再用 toString(16) 的形式，转换为一个十六进制的字符串。

详细资料能够参考：
《通过一行代码学 JavaScript》

相干知识点：

js 提早加载，也就是等页面加载实现之后再加载 JavaScript 文件。js 提早加载有助于进步页面加载速度。

个别有以下几种形式：

defer 属性
async 属性
动态创建 DOM 形式
应用 setTimeout 提早办法
让 JS 最初加载

答复：

js 的加载、解析和执行会阻塞页面的渲染过程，因而咱们心愿 js 脚本可能尽可能的提早加载，进步页面的渲染速度。我理解到的几种形式是：第一种形式是咱们个别采纳的是将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最初来加载执行。第二种形式是给 js 脚本增加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，而后在文档解析实现后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按标准来说最初是程序执行的，然而在一些浏览器中可能不是这样。第三种形式是给 js 脚本增加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，然而当脚本加载实现后立刻执行 js 脚本，这个时候如果文档没有解析实现的话同样会阻塞。多个 async 属性的脚本的执行程序是不可预测的，个别不会依照代码的程序顺次执行。第四种形式是动态创建 DOM 标签的形式，咱们能够对文档的加载事件进行监听，当文档加载实现后再动静的创立 script 标签来引入 js 脚本。

详细资料能够参考：
《JS 提早加载的几种形式》
《HTML 5 <script> async 属性》

相干知识点：

2005 年 2 月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的
异步通信，从服务器获取 XML 文档从中提取数据，再更新以后网页的对应局部，而不必刷新整个网页。

具体来说，AJAX 包含以下几个步骤。

1. 创立 XMLHttpRequest 对象，也就是创立一个异步调用对象
2. 创立一个新的 HTTP 申请，并指定该 HTTP 申请的办法、URL 及验证信息
3. 设置响应 HTTP 申请状态变动的函数
4. 发送 HTTP 申请
5. 获取异步调用返回的数据
6. 应用 JavaScript 和 DOM 实现部分刷新

个别实现：

const SERVER_URL = "/server";

let xhr = new XMLHttpRequest();

// 创立 Http 申请
xhr.open("GET", SERVER_URL, true);

// 设置状态监听函数
xhr.onreadystatechange = function() {if (this.readyState !== 4) return;

  // 当申请胜利时
  if (this.status === 200) {handle(this.response);
  } else {console.error(this.statusText);
  }
};

// 设置申请失败时的监听函数
xhr.onerror = function() {console.error(this.statusText);
};

// 设置申请头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");

// 发送 Http 申请
xhr.send(null);

// promise 封装实现：function getJSON(url) {
  // 创立一个 promise 对象
  let promise = new Promise(function(resolve, reject) {let xhr = new XMLHttpRequest();

    // 新建一个 http 申请
    xhr.open("GET", url, true);

    // 设置状态的监听函数
    xhr.onreadystatechange = function() {if (this.readyState !== 4) return;

      // 当申请胜利或失败时，扭转 promise 的状态
      if (this.status === 200) {resolve(this.response);
      } else {reject(new Error(this.statusText));
      }
    };

    // 设置谬误监听函数
    xhr.onerror = function() {reject(new Error(this.statusText));
    };

    // 设置响应的数据类型
    xhr.responseType = "json";

    // 设置申请头信息
    xhr.setRequestHeader("Accept", "application/json");

    // 发送 http 申请
    xhr.send(null);
  });

  return promise;
}

答复：

我对 ajax 的了解是，它是一种异步通信的办法，通过间接由 js 脚本向服务器发动 http 通信，而后依据服务器返回的数据，更新网页的相应局部，而不必刷新整个页面的一种办法。创立一个 ajax 有这样几个步骤

首先是创立一个 XMLHttpRequest 对象。而后在这个对象上应用 open 办法创立一个 http 申请，open 办法所须要的参数是申请的办法、申请的地址、是否异步和用户的认证信息。在发动申请前，咱们能够为这个对象增加一些信息和监听函数。比如说咱们能够通过 setRequestHeader 办法来为申请增加头信息。咱们还能够为这个对象增加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变动时会触发 onreadystatechange 事件，咱们能够通过设置监听函数，来解决申请胜利后的后果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接管实现，这个时候咱们能够通过判断申请的状态，如果状态是 2xx 或者 304 的话则代表返回失常。这个时候咱们就能够通过 response 中的数据来对页面进行更新了。当对象的属性和监听函数设置实现后，最初咱们调用 sent 办法来向服务器发动申请，能够传入参数作为发送的数据体。

详细资料能够参考：
《XMLHttpRequest 对象》
《从 ajax 到 fetch、axios》
《Fetch 入门》
《传统 Ajax 已死，Fetch 永生》

浏览器的缓存机制指的是通过在一段时间内保留已接管到的 web 资源的一个正本，如果在资源的无效工夫内，发动了对这个资源的再一次申请，那么浏览器会间接应用缓存的正本，而不是向服务器发动申请。应用 web 缓存能够无效地进步页面的关上速度，缩小不必要的网络带宽的耗费。web 资源的缓存策略个别由服务器来指定，能够分为两种，别离是强缓存策略和协商缓存策略。应用强缓存策略时，如果缓存资源无效，则间接应用缓存资源，不用再向服务器发动申请。强缓存策略能够通过两种形式来设置，别离是 http 头信息中的 Expires 属性和 Cache-Control 属性。服务器通过在响应头中增加 Expires 属性，来指定资源的过期工夫。在过期工夫以内，该资源能够被缓存应用，不用再向服务器发送申请。这个工夫是一个相对工夫，它是服务器的工夫，因而可能存在这样的问题，就是客户端的工夫和服务器端的工夫不统一，或者用户能够对客户端工夫进行批改的状况，这样就可能会影响缓存命中的后果。Expires 是 http1.0 中的形式，因为它的一些毛病，在 http 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更准确的管制。它有很多不同的值，罕用的比方咱们能够通过设置 max-age 来指定资源可能被缓存的工夫
的大小，这是一个绝对的工夫，它会依据这个工夫的大小和资源第一次申请时的工夫来计算出资源过期的工夫，因而绝对于 Expires
来说，这种形式更加无效一些。罕用的还有比方 private，用来规定资源只能被客户端缓存，不可能代理服务器所缓存。还有如 n
o-store，用来指定资源不可能被缓存，no-cache 代表该资源可能被缓存，然而立刻生效，每次都须要向服务器发动申请。一般来说只须要设置其中一种形式就能够实现强缓存策略，当两种形式一起应用时，Cache-Control 的优先级要高于 Expires。应用协商缓存策略时，会先向服务器发送一个申请，如果资源没有产生批改，则返回一个 304 状态，让浏览器应用本地的缓存正本。如果资源产生了批改，则返回批改后的资源。协商缓存也能够通过两种形式来设置，别离是 http 头信息中的 Etag 和 Last-Modified 属性。服务器通过在响应头中增加 Last-Modified 属性来指出资源最初一次批改的工夫，当浏览器下一次发动申请时，会在申请头中增加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当申请发送到服务器后服务器会通过这个属性来和资源的最初一次的批改工夫来进行比拟，以此来判断资源是否做了批改。如果资源没有批改，那么返回 304 状态，让客户端应用本地的缓存。如果资源曾经被批改了，则返回批改后的资源。应用这种办法有一个毛病，就是 Last-Modified 标注的最初批改工夫只能准确到秒级，如果某些文件在 1 秒钟以内，被批改屡次的话，那么文件已将扭转了然而 Last-Modified 却没有扭转，这样会造成缓存命中的不精确。因为 Last-Modified 的这种可能产生的不准确性，http 中提供了另外一种形式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中增加了 Etag 属性，这个属性是资源生成的惟一标识符，当资源产生扭转的时候，这个值也会产生扭转。在下一次资源申请时，浏览器会在申请头中增加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接管到申请后会依据这个值来和资源以后的 Etag 的值来进行比拟，以此来判断资源是否产生扭转，是否须要返回资源。通过这种形式，比 Last-Modified 的形式更加准确。当 Last-Modified 和 Etag 属性同时呈现的时候，Etag 的优先级更高。应用协商缓存的时候，服务器须要思考负载平衡的问题，因而多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因而在思考负载平衡时，最好不要设置 Etag 属性。强缓存策略和协商缓存策略在缓存命中时都会间接应用本地的缓存正本，区别只在于协商缓存会向服务器发送一次申请。它们缓存不命中时，都会向服务器发送申请来获取资源。在理论的缓存机制中，强缓存策略和协商缓存策略是一起单干应用的。浏览器首先会依据申请的信息判断，强缓存是否命中，如果命中则间接应用资源。如果不命中则依据头信息向服务器发动申请，应用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器间接应用本地资源的正本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

详细资料能够参考：
《浅谈浏览器缓存》
《前端优化：浏览器缓存技术介绍》
《申请头中的 Cache-Control》
《Cache-Control 字段值详解》

1. 在 ajax 发送申请前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0″)。
2. 在 ajax 发送申请前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
3. 在 URL 前面加上一个随机数：“fresh=” + Math.random();。
4. 在 URL 前面加上工夫戳：”nowtime=” + new Date().getTime();。
5. 如果是应用 jQuery，间接这样就能够了 &dollar;.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不须要保留缓存记录。

详细资料能够参考：
《Ajax 中浏览器的缓存问题解决办法》
《浅谈浏览器缓存》

相干知识点：

同步，能够了解为在执行完一个函数或办法之后，始终期待零碎返回值或音讯，这时程序是处于阻塞的，只有接管到返回的值或音讯后才往下执行其余的命令。异步，执行完函数或办法后，不用阻塞性地期待返回值或音讯，只须要向零碎委托一个异步过程，那么当零碎接管到返回值或音讯时，零碎会主动触发委托的异步过程，从而实现一个残缺的流程。

答复：

同步指的是当一个过程在执行某个申请的时候，如果这个申请须要期待一段时间能力返回，那么这个过程会始终期待上来，直到音讯返
回为止再持续向下执行。异步指的是当一个过程在执行某个申请的时候，如果这个申请须要期待一段时间能力返回，这个时候过程会持续往下执行，不会阻塞等
待音讯的返回，当音讯返回时零碎再告诉过程进行解决。

详细资料能够参考：
《同步和异步的区别》

我对浏览器的同源政策的了解是，一个域下的 js 脚本在未经容许的状况下，不可能拜访另一个域的内容。这里的同源的指的是两个
域的协定、域名、端口号必须雷同，否则则不属于同一个域。同源政策次要限度了三个方面

第一个是以后域下的 js 脚本不可能拜访其余域下的 cookie、localStorage 和 indexDB。第二个是以后域下的 js 脚本不可能操作拜访操作其余域下的 DOM。第三个是以后域下 ajax 无奈发送跨域申请。同源政策的目标次要是为了保障用户的信息安全，它只是对 js 脚本的一种限度，并不是对浏览器的限度，对于个别的 img、或者
script 脚本申请都不会有跨域的限度，这是因为这些操作都不会通过响应后果来进行可能呈现平安问题的操作。

相干知识点：

1. 通过 jsonp 跨域
2.document.domain + iframe 跨域
3.location.hash + iframe
4.window.name + iframe 跨域
5.postMessage 跨域
6. 跨域资源共享（CORS)
7.nginx 代理跨域
8.nodejs 中间件代理跨域
9.WebSocket 协定跨域

答复：

解决跨域的办法咱们能够依据咱们想要实现的目标来划分。首先咱们如果只是想要实现主域名下的不同子域名的跨域操作，咱们能够应用设置 document.domain 来解决。（1）将 document.domain 设置为主域名，来实现雷同子域名的跨域操作，这个时候主域名下的 cookie 就可能被子域名所拜访。同时如果文档中含有主域名雷同，子域名不同的 iframe 的话，咱们也能够对这个 iframe 进行操作。如果是想要解决不同跨域窗口间的通信问题，比如说一个页面想要和页面的中的不同源的 iframe 进行通信的问题，咱们能够应用 location.hash 或者 window.name 或者 postMessage 来解决。（2）应用 location.hash 的办法，咱们能够在主页面动静的批改 iframe 窗口的 hash 值，而后在 iframe 窗口里实现监听函数来实现这样一个单向的通信。因为在 iframe 是没有方法拜访到不同源的父级窗口的，所以咱们不能间接批改父级窗口的 hash 值来实现通信，咱们能够在 iframe 中再退出一个 iframe，这个 iframe 的内容是和父级页面同源的，所以咱们能够 window.parent.parent 来批改最顶级页面的 src，以此来实现双向通信。（3）应用 window.name 的办法，次要是基于同一个窗口中设置了 window.name 后不同源的页面也能够拜访，所以不同源的子页面能够首先在 window.name 中写入数据，而后跳转到一个和父级同源的页面。这个时候级页面就能够拜访同源的子页面中 window.name 中的数据了，这种形式的益处是能够传输的数据量大。（4）应用 postMessage 来解决的办法，这是一个 h5 中新增的一个 api。通过它咱们能够实现多窗口间的信息传递，通过获取到指定窗口的援用，而后调用 postMessage 来发送信息，在窗口中咱们通过对 message 信息的监听来接管信息，以此来实现不同源间的信息替换。如果是像解决 ajax 无奈提交跨域申请的问题，咱们能够应用 jsonp、cors、websocket 协定、服务器代理来解决问题。（5）应用 jsonp 来实现跨域申请，它的次要原理是通过动静构建 script  标签来实现跨域申请，因为浏览器对 script 标签的引入没有跨域的拜访限度。通过在申请的 url 后指定一个回调函数，而后服务器在返回数据的时候，构建一个 json 数据的包装，这个包装就是回调函数，而后返回给前端，前端接管到数据后，因为申请的是脚本文件，所以会间接执行，这样咱们先前定义好的回调函数就能够被调用，从而实现了跨域申请的解决。这种形式只能用于 get 申请。（6）应用 CORS 的形式，CORS 是一个 W3C 规范，全称是 "跨域资源共享"。CORS 须要浏览器和服务器同时反对。目前，所有浏览器都反对该性能，因而咱们只须要在服务器端配置就行。浏览器将 CORS 申请分成两类：简略申请和非简略申请。对于简略申请，浏览器间接收回 CORS 申请。具体来说，就是会在头信息之中，减少一个 Origin 字段。Origin 字段用来阐明本次申请来自哪个源。服务器依据这个值，决定是否批准这次申请。对于如果 Origin 指定的源，不在许可范畴内，服务器会返回一个失常的 HTTP 回应。浏览器发现，这个回应的头信息没有蕴含 Access-Control-Allow-Origin 字段，就晓得出错了，从而抛出一个谬误，ajax 不会收到响应信息。如果胜利的话会蕴含一些以 Access-Control- 结尾的字段。非简略申请，浏览器会先收回一次预检申请，来判断该域名是否在服务器的白名单中，如果收到必定回复后才会发动申请。（7）应用 websocket 协定，这个协定没有同源限度。（8）应用服务器来代理跨域的拜访申请，就是有跨域的申请操作时发送申请给后端，让后端代为申请，而后最初将获取的后果发返回。

详细资料能够参考：
《前端常见跨域解决方案（全）》
《浏览器同源政策及其躲避办法》
《跨域，你须要晓得的全在这里》
《为什么 form 表单提交没有跨域问题，但 ajax 提交有跨域问题？》

详细资料能够参考：
《深入浅出 Nginx》

我的了解是 cookie 是服务器提供的一种用于保护会话状态信息的数据，通过服务器发送到浏览器，浏览器保留在本地，当下一次有同源的申请时，将保留的 cookie 值增加到申请头部，发送给服务端。这能够用来实现记录用户登录状态等性能。cookie 个别能够存储 4k 大小的数据，并且只可能被同源的网页所共享拜访。服务器端能够应用 Set-Cookie 的响应头部来配置 cookie 信息。一条 cookie 包含了 5 个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 生效的工夫，domain 是域名、path 是门路，domain 和 path 一起限度了 cookie 可能被哪些 url 拜访。secure 规定了 cookie 只能在确保安全的状况下传输，HttpOnly 规定了这个 cookie 只能被服务器拜访，不能应用 js 脚本拜访。在产生 xhr 的跨域申请的时候，即便是同源下的 cookie，也不会被主动增加到申请头部，除非显示地规定。

详细资料能够参考：
《HTTP cookies》
《聊一聊 cookie》

我对模块的了解是，一个模块是实现一个特定性能的一组办法。在最开始的时候，js 只实现一些简略的性能，所以并没有模块的概念，但随着程序越来越简单，代码的模块化开发变得越来越重要。因为函数具备独立作用域的特点，最原始的写法是应用函数来作为模块，几个函数作为一个模块，然而这种形式容易造成全局变量的污
染，并且模块间没有分割。前面提出了对象写法，通过将函数作为一个对象的办法来实现，这样解决了间接应用函数作为模块的一些毛病，然而这种方法会裸露所
有的所有的模块成员，内部代码能够批改外部属性的值。当初最罕用的是立刻执行函数的写法，通过利用闭包来实现模块公有作用域的建设，同时不会对全局作用域造成净化。

详细资料能够参考：
《浅谈模块化开发》
《Javascript 模块化编程（一）：模块的写法》
《前端模块化：CommonJS，AMD，CMD，ES6》
《Module 的语法》

js 中当初比拟成熟的有四种模块加载计划。第一种是 CommonJS 计划，它通过 require 来引入模块，通过 module.exports 定义模块的输入接口。这种模块加载计划是
服务器端的解决方案，它是以同步的形式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取十分快，所以以同步的形式
加载没有问题。但如果是在浏览器端，因为模块的加载是应用网络申请，因而应用异步加载的形式更加适合。第二种是 AMD 计划，这种计划采纳异步加载的形式来加载模块，模块的加载不影响前面语句的执行，所有依赖这个模块的语句都定
义在一个回调函数里，等到加载实现后再执行回调函数。require.js 实现了 AMD 标准。第三种是 CMD 计划，这种计划和 AMD 计划都是为了解决异步模块加载的问题，sea.js 实现了 CMD 标准。它和 require.js
的区别在于模块定义时对依赖的解决不同和对依赖模块的执行机会的解决不同。参考 60

第四种计划是 ES6 提出的计划，应用 import 和 export 的模式来导入导出模块。这种计划和下面三种计划都不同。参考 61。

它们之间的次要区别有两个方面。

（1）第一个方面是在模块定义时对依赖的解决不同。AMD 推崇依赖前置，在定义模块的时候就要申明其依赖的模块。而 CMD 推崇
就近依赖，只有在用到某个模块的时候再去 require。

（2）第二个方面是对依赖模块的执行机会解决不同。首先 AMD 和 CMD 对于模块的加载形式都是异步加载，不过它们的区别在于
模块的执行机会，AMD 在依赖模块加载实现后就间接执行依赖模块，依赖模块的执行程序和咱们书写的程序不肯定统一。而 CMD
在依赖模块加载实现后并不执行，只是下载而已，等到所有的依赖模块都加载好后，进入回调函数逻辑，遇到 require 语句
的时候才执行对应的模块，这样模块的执行程序就和咱们书写的程序保持一致了。

// CMD
define(function(require, exports, module) {var a = require("./a");
  a.doSomething();
  // 此处略去 100 行
  var b = require("./b"); // 依赖能够就近书写
  b.doSomething();
  // ...
});

// AMD 默认举荐
define(["./a", "./b"], function(a, b) {
  // 依赖必须一开始就写好
  a.doSomething();
  // 此处略去 100 行
  b.doSomething();
  // ...
});

详细资料能够参考：
《前端模块化，AMD 与 CMD 的区别》

1.CommonJS 模块输入的是一个值的拷贝，ES6 模块输入的是值的援用。CommonJS 模块输入的是值的拷贝，也就是说，一旦输入一个值，模块外部的变动就影响不到这个值。ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本动态剖析的时候，遇到模块加载命令 import，就会生成一个只读援用。等到脚本真正执行时，再依据这个只读援用，到被加载的那个模块外面去取值。
2.CommonJS 模块是运行时加载，ES6 模块是编译时输入接口。CommonJS 模块就是对象，即在输出时是先加载整个模块，生成一个对象，而后再从这个对象下面读取办法，这种加载称为“运行时加载”。而 ES6 模块不是对象，它的对外接口只是一种动态定义，在代码动态解析阶段就会生成。

require.js 的外围原理是通过动态创建 script 脚本来异步引入模块，而后对每个脚本的 load 事件进行监听，如果每个脚本都加载实现了，再调用回调函数。

详细资料能够参考：
《requireJS 的用法和原理剖析》
《requireJS 的外围原理是什么？》
《从 RequireJs 源码分析脚本加载原理》
《requireJS 原理剖析》

详细资料能够参考：
《JS 模块加载器加载原理是怎么样的？》

在我看来 ES6 新增加的 class 只是为了补充 js 中短少的一些面向对象语言的个性，但实质上来说它只是一种语法糖，不是一个新的货色，其背地还是原型继承的思维。通过退出 class 能够有利于咱们更好的组织代码。在 class 中增加的办法，其实是增加在类的原型上的。

详细资料能够参考：
《ECMAScript 6 实现了 class，对 JavaScript 前端开发有什么意义？》
《Class 的根本语法》

document.write 的内容会代替整个文档内容，会重写整个页面。innerHTML 的内容只是代替指定元素的内容，只会重写页面中的局部内容。

详细资料能够参考：
《简述 document.write 和 innerHTML 的区别。》

（1）创立新节点

createDocumentFragment(node);
createElement(node);
createTextNode(text);

（2）增加、移除、替换、插入

appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)

（3）查找

getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();

（4）属性操作

getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);

详细资料能够参考：
《DOM 概述》
《原生 JavaScript 的 DOM 操作汇总》
《原生 JS 中 DOM 节点相干 API 合集》

对于这样一个 HTML 元素：<div>content<br/></div>。innerHTML：外部 HTML，content<br/>；outerHTML：内部 HTML，<div>content<br/></div>；innerText：外部文本，content；outerText：外部文本，content；

它们的作用截然不同，区别仅在于传入参数的模式的不同。apply 承受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下标的汇合，这个汇合能够为数组，也能够为类数组，apply 办法把这个汇合中的元素作为参数传递给被调用的函数。call 传入的参数数量不固定，跟 apply 雷同的是，第一个参数也是代表函数体内的 this 指向，从第二个参数开始往后，每个参数被顺次传入函数。

详细资料能够参考：
《apply、call 的区别和用处》

一个领有 length 属性和若干索引属性的对象就能够被称为类数组对象，类数组对象和数组相似，然而不能调用数组的办法。常见的类数组对象有 arguments 和 DOM 办法的返回后果，还有一个函数也能够被看作是类数组对象，因为它含有 length
属性值，代表可接管的参数个数。

常见的类数组转换为数组的办法有这样几种：

（1）通过 call 调用数组的 slice 办法来实现转换

Array.prototype.slice.call(arrayLike);

（2）通过 call 调用数组的 splice 办法来实现转换

Array.prototype.splice.call(arrayLike, 0);

（3）通过 apply 调用数组的 concat 办法来实现转换

Array.prototype.concat.apply([], arrayLike);

（4）通过 Array.from 办法来实现转换

Array.from(arrayLike);

具体的材料能够参考：
《JavaScript 深刻之类数组对象与 arguments》
《javascript 类数组》
《深刻了解 JavaScript 类数组》

数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 办法能够指定转换为字符串时的分隔符。数组尾部操作的办法 pop() 和 push()，push 办法能够传入多个参数。数组首部操作的办法 shift() 和 unshift() 重排序的办法 reverse() 和 sort()，sort() 办法能够传入一个函数来进行比拟，传入前后两个值，如果返回值为负数，则替换两个参数的地位。数组连贯的办法 concat()，返回的是拼接好的数组，不影响原数组。数组截取方法 slice()，用于截取数组中的一部分返回，不影响原数组。数组插入方法 splice()，影响原数组查找特定项的索引的办法，indexOf() 和 lastIndexOf() 迭代办法 every()、some()、filter()、map() 和 forEach() 办法

数组归并办法 reduce() 和 reduceRight() 办法

详细资料能够参考：
《JavaScript 深刻了解之 Array 类型详解》

fill() 办法用一个固定值填充一个数组中从起始索引到终止索引内的全副元素。不包含终止索引。fill 办法承受三个参数 value，start 以及 end，start 和 end 参数是可选的，其默认值别离为 0 和 this 对象的 length 属性值。

详细资料能够参考：
《Array.prototype.fill()》

尾后逗号（有时叫做“终止逗号”）在向 JavaScript 代码增加元素、参数、属性时非常有用。如果你想要增加新的属性，并且上一行曾经应用了尾后逗号，你能够仅仅增加新的一行，而不须要批改上一行。这使得版本控制更加清晰，以及代码保护麻烦更少。JavaScript 一开始就反对数组字面值中的尾后逗号，随后向对象字面值（ECMAScript 5）中增加了尾后逗号。最近（ECMAS
cript 2017），又将其增加到函数参数中。然而 JSON 不反对尾后逗号。如果应用了多于一个尾后逗号，会产生间隙。带有间隙的数组叫做稠密数组（密致数组没有间隙）。稠密数组的长度为逗号的数
量。

详细资料能够参考：
《尾后逗号》

变量晋升的体现是，无论咱们在函数中何处地位申明的变量，如同都被晋升到了函数的首部，咱们能够在变量申明前拜访到而不会报错。造成变量申明晋升的实质起因是 js 引擎在代码执行前有一个解析的过程，创立了执行上下文，初始化了一些代码执行时须要用到的对象。当咱们拜访一个变量时，咱们会到以后执行上下文中的作用域链中去查找，而作用域链的首端指向的是以后执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它蕴含了函数的形参、所有的函数和变量申明，这个对象的是在代码解析的时候创立的。这就是会呈现变量申明晋升的根本原因。

详细资料能够参考：
《JavaScript 深刻了解之变量对象》

1. 应用位运算代替一些简略的四则运算。
2. 防止应用过深的嵌套循环。
3. 不要应用未定义的变量。
4. 当须要屡次拜访数组长度时，能够用变量保存起来，防止每次都会去进行属性查找。

详细资料能够参考：
《如何编写高性能的 Javascript？》

v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。新创建的对象或者只经验过一次的垃圾回收的对象被称为新生代。经验过屡次垃圾回收的对象被称为老生代。新生代被分为 From 和 To 两个空间，To 个别是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当咱们执行垃圾回收算法的时候应用逻辑将会进行，等垃圾回收完结后再继续执行。这个算法分为三步：（1）首先查看 From 空间的存活对象，如果对象存活则判断对象是否满足降职到老生代的条件，如果满足条件则降职到老生代。如果不满足条件则挪动 To 空间。（2）如果对象不存活，则开释对象的空间。（3）最初将 From 空间和 To 空间角色进行替换。新生代对象降职到老生代有两个条件：（1）第一个是判断是对象否曾经通过一次 Scavenge 回收。若经验过，则将对象从 From 空间复制到老生代中；若没有经验，则复制到 To 空间。（2）第二个是 To 空间的内存应用占比是否超过限度。当对象从 From 空间复制到 To 空间时，若 To 空间应用超过 25%，则对象间接降职到老生代中。设置 25% 的起因次要是因为算法完结后，两个空间完结后会替换地位，如果 To 空间的内存太小，会影响后续的内存调配。老生代采纳了标记革除法和标记压缩法。标记革除法首先会对内存中存活的对象进行标记，标记完结后革除掉那些没有标记的对象。因为标记革除后会造成很多的内存碎片，不便于前面的内存调配。所以了解决内存碎片的问题引入了标记压缩法。因为在进行垃圾回收的时候会暂停利用的逻辑，对于新生代办法因为内存小，每次进展的工夫不会太长，但对于老生代来说每次垃圾回收的工夫长，进展会造成很大的影响。为了解决这个问题 V8 引入了增量标记的办法，将一次进展进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行。

详细资料能够参考：
《深刻了解 V8 的垃圾回收原理》
《JavaScript 中的垃圾回收》

相干知识点：

1. 意外的全局变量
2. 被忘记的计时器或回调函数
3. 脱离 DOM 的援用
4. 闭包

答复：

第一种状况是咱们因为应用未声明的变量，而意外的创立了一个全局变量，而使这个变量始终留在内存中无奈被回收。第二种状况是咱们设置了 setInterval 定时器，而遗记勾销它，如果循环函数有对外部变量的援用的话，那么这个变量会被始终留
在内存中，而无奈被回收。第三种状况是咱们获取一个 DOM 元素的援用，而前面这个元素被删除，因为咱们始终保留了对这个元素的援用，所以它也无奈被回
收。第四种状况是不合理的应用闭包，从而导致某些变量始终被留在内存当中。

详细资料能够参考：
《JavaScript 内存透露教程》
《4 类 JavaScript 内存透露及如何防止》
《杜绝 js 中四种内存透露类型的产生》
《javascript 典型内存透露及 chrome 的排查办法》

通过应用 pushState + ajax 实现浏览器无刷新后退后退，当一次 ajax 调用胜利后咱们将一条 state 记录退出到 history
对象中。一条 state 记录蕴含了 url、title 和 content 属性，在 popstate 事件中能够获取到这个 state 对象，咱们可
以应用 content 来传递数据。最初咱们通过对 window.onpopstate 事件监听来响应浏览器的后退后退操作。应用 pushState 来实现有两个问题，一个是关上首页时没有记录，咱们能够应用 replaceState 来将首页的记录替换，另一个问
题是当一个页面刷新的时候，依然会向服务器端申请数据，因而如果申请的 url 须要后端的配合将其重定向到一个页面。

详细资料能够参考：
《pushState + ajax 实现浏览器无刷新后退后退》
《Manipulating the browser history》

this === window ? 'browser' : 'node';

通过判断 Global 对象是否为 window，如果不为 window，以后脚本没有运行在浏览器中。

详细资料能够参考：
《为什么把 script 标签放在 body 完结标签之后 html 完结标签之前？》
《从 Chrome 源码看浏览器如何加载资源》

挪动端点击有 300ms 的提早是因为挪动端会有双击缩放的这个操作，因而浏览器在 click 之后要期待 300ms，看用户有没有下一次点击，来判断这次操作是不是双击。

有三种方法来解决这个问题：

1. 通过 meta 标签禁用网页的缩放。
2. 通过 meta 标签将网页的 viewport 设置为 ideal viewport。
3. 调用一些 js 库，比方 FastClick

click 延时问题还可能引起点击穿透的问题，就是如果咱们在一个元素上注册了 touchStart 的监听事件，这个事件会将这个元素暗藏掉，咱们发现当这个元素暗藏后，触发了这个元素下的一个元素的点击事件，这就是点击穿透。

详细资料能够参考：
《挪动端 300ms 点击提早和点击穿透》

（1）什么是前端路由？前端路由就是把不同路由对应不同的内容或页面的工作交给前端来做，之前是通过服务端依据 url 的不同返回不同的页面实现的。（2）什么时候应用前端路由？在单页面利用，大部分页面构造不变，只扭转局部内容的应用（3）前端路由有什么长处和毛病？长处：用户体验好，不须要每次都从服务器全副获取，疾速展示给用户

毛病：单页面无奈记住之前滚动的地位，无奈在后退，后退的时候记住滚动的地位

前端路由一共有两种实现形式，一种是通过 hash 的形式，一种是通过应用 pushState 的形式。

详细资料能够参考：
《什么是“前端路由”》
《浅谈前端路由》
《前端路由是什么货色？》

详细资料能够参考：
《浅谈前端单元测试》

检测浏览器版本一共有两种形式：一种是检测 window.navigator.userAgent 的值，但这种形式很不牢靠，因为 userAgent 能够被改写，并且晚期的浏览器如 ie，会通过假装本人的 userAgent 的值为 Mozilla 来躲过服务器的检测。第二种形式是性能检测，依据每个浏览器独有的个性来进行判断，如 ie 下独有的 ActiveXObject。

详细资料能够参考：
《JavaScript 判断浏览器类型》

Polyfill 指的是用于实现浏览器并不反对的原生 API 的代码。比如说 querySelectorAll 是很多古代浏览器都反对的原生 Web API，然而有些古老的浏览器并不反对，那么假如有人写了一段代码来实现这个性能使这些浏览器也反对了这个性能，那么这就能够成为一个 Polyfill。一个 shim 是一个库，有本人的 API，而不是单纯实现原生不反对的 API。

详细资料能够参考：
《Web 开发中的“黑话”》
《Polyfill 为何物》

// String.lastIndexOf() 办法返回指定值（本例中的 '.'）在调用该办法的字符串中最初呈现的地位，如果没找到则返回 -1。// 对于 'filename' 和 '.hiddenfile'，lastIndexOf 的返回值别离为 0 和 -1 无符号右移操作符(>>>) 将 -1 转换为 4294967295，将 -2 转换为 4294967294，这个办法能够保障边缘状况时文件名不变。// String.prototype.slice() 从下面计算的索引处提取文件的扩展名。如果索引比文件名的长度大，后果为 ""。function getFileExtension(filename) {return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
}

详细资料能够参考：
《如何更无效的获取文件扩展名》

相干知识点：

// 函数防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则从新计时。// 函数节流：规定一个单位工夫，在这个单位工夫内，只能有一次触发事件的回调函数执行，如果在同一个单位工夫内某事件被触发屡次，只有一次能失效。// 函数防抖的实现
function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = arguments;

    // 如果此时存在定时器的话，则勾销之前的定时器从新记时
    if (timer) {clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {fn.apply(context, args);
    }, wait);
  };
}

// 函数节流的实现;
function throttle(fn, delay) {var preTime = Date.now();

  return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次工夫距离超过了指定工夫，则执行函数。if (nowTime - preTime >= delay) {preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

答复：

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则从新计时。这能够应用在一些点击申请的事件上，防止因为用户的屡次点击向后端发送屡次申请。函数节流是指规定一个单位工夫，在这个单位工夫内，只能有一次触发事件的回调函数执行，如果在同一个单位工夫内某事件被触发屡次，只有一次能失效。节流能够应用在 scroll 函数的事件监听上，通过事件节流来升高事件调用的频率。

详细资料能够参考：
《轻松了解 JS 函数节流和函数防抖》
《JavaScript 事件节流和事件防抖》
《JS 的防抖与节流》

相干知识点：

两等号判等，会在比拟时进行类型转换。三等号判等（判断严格），比拟时不进行隐式类型转换，（类型不同则会返回 false）。Object.is 在三等号判等的根底上特地解决了 NaN、-0 和 +0，保障 -0 和 +0 不再雷同，但 Object.is(NaN, NaN) 会返回 true.

Object.is 应被认为有其非凡的用处，而不能用它认为它比其它的相等比照更宽松或严格。

答复：

应用双等号进行相等判断时，如果两边的类型不统一，则会进行强制类型转化后再进行比拟。应用三等号进行相等判断时，如果两边的类型不统一时，不会做强制类型准换，间接返回 false。应用 Object.is 来进行相等判断时，个别状况下和三等号的判断雷同，它解决了一些非凡的状况，比方 -0 和 +0 不再相等，两个 NaN 认定为是相等的。

相干知识点：

escape 和 encodeURI 都属于 Percent-encoding，基本功能都是把 URI 非法字符转化成非法字符，转化后模式相似「%*」。它们的基本区别在于，escape 在解决 0xff 之外字符的时候，是间接应用字符的 unicode 在后面加上一个「%u」，而 encode URI 则是先进行 UTF-8，再在 UTF-8 的每个字节码前加上一个「%」；在解决 0xff 以内字符时，编码方式是一样的（都是「%XX」，XX 为字符的 16 进制 unicode，同时也是字符的 UTF-8），只是范畴（即哪些字符编码哪些字符不编码）不一样。

答复：

encodeURI 是对整个 URI 进行本义，将 URI 中的非法字符转换为非法字符，所以对于一些在 URI 中有非凡意义的字符不会进行本义。encodeURIComponent 是对 URI 的组成部分进行本义，所以一些特殊字符也会失去本义。escape 和 encodeURI 的作用雷同，不过它们对于 unicode 编码为 0xff 之外字符的时候会有区别，escape 是间接在字符的 unicode 编码前加上 %u，而 encodeURI 首先会将字符转换为 UTF-8 的格局，再在每个字节前加上 %。

详细资料能够参考：
《escape,encodeURI,encodeURIComponent 有什么区别?》

Unicode 是一种字符汇合，当初可包容 100 多万个字符。每个字符对应一个不同的 Unicode 编码，它只规定了符号的二进制代码，却没有规定这个二进制代码在计算机中如何编码传输。UTF-8 是一种对 Unicode 的编码方式，它是一种变长的编码方式，能够用 1~4 个字节来示意一个字符。

详细资料能够参考：
《字符编码详解》
《字符编码笔记：ASCII，Unicode 和 UTF-8》

相干知识点：

事件队列是一个存储着待执行工作的队列，其中的工作严格依照工夫先后顺序执行，排在队头的工作将会率先执行，而排在队尾的工作会最初执行。事件队列每次仅执行一个工作，在该工作执行结束之后，再执行下一个工作。执行栈则是一个相似于函数调用栈的运行容器，当执行栈为空时，JS 引擎便查看事件队列，如果不为空的话，事件队列便将第一个工作压入执行栈中运行。

答复：

因为 js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保障代码的有序执行。在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会始终期待其返回后果，而是会将这个事件挂起，继续执行执行栈中的其余工作。当异步事件执行结束后，再将异步事件对应的回调退出到与以后执行栈中不同的另一个工作队列中期待执行。工作队列能够分为宏工作对列和微工作对列，当以后执行栈中的事件执行结束后，js 引擎首先会判断微工作对列中是否有工作能够执行，如果有就将微工作队首的事件压入栈中执行。当微工作对列中的工作都执行实现后再去判断宏工作对列中的工作。微工作包含了 promise 的回调、node 中的 process.nextTick、对 Dom 变动监听的 MutationObserver。宏工作包含了 script 脚本的执行、setTimeout，setInterval，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲
染等。

详细资料能够参考：
《浏览器事件循环机制（event loop）》
《详解 JavaScript 中的 Event Loop（事件循环）机制》
《什么是 Event Loop？》
《这一次，彻底弄懂 JavaScript 执行机制》

相干材料：

// 浅拷贝的实现;

function shallowCopy(object) {
  // 只拷贝对象
  if (!object || typeof object !== "object") return;

  // 依据 object 的类型判断是新建一个数组还是对象
  let newObject = Array.isArray(object) ? [] : {};

  // 遍历 object，并且判断是 object 的属性才拷贝
  for (let key in object) {if (object.hasOwnProperty(key)) {newObject[key] = object[key];
    }
  }

  return newObject;
}

// 深拷贝的实现;

function deepCopy(object) {if (!object || typeof object !== "object") return;

  let newObject = Array.isArray(object) ? [] : {};

  for (let key in object) {if (object.hasOwnProperty(key)) {newObject[key] =
        typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
    }
  }

  return newObject;
}

答复：

浅拷贝指的是将一个对象的属性值复制到另一个对象，如果有的属性的值为援用类型的话，那么会将这个援用的地址复制给对象，因而两个对象会有同一个援用类型的援用。浅拷贝能够应用  Object.assign 和开展运算符来实现。深拷贝绝对浅拷贝而言，如果遇到属性值为援用类型的时候，它新建一个援用类型并将对应的值复制给它，因而对象取得的一个新的援用类型而不是一个原有类型的援用。深拷贝对于一些对象能够应用 JSON 的两个函数来实现，然而因为 JSON 的对象格局比 js 的对象格局更加严格，所以如果属性值里边呈现函数或者 Symbol 类型的值时，会转换失败。

详细资料能够参考：
《JavaScript 专题之深浅拷贝》
《前端面试之道》

相干材料：

// call 函数实现
Function.prototype.myCall = function(context) {
  // 判断调用对象
  if (typeof this !== "function") {console.error("type error");
  }

  // 获取参数
  let args = [...arguments].slice(1),
    result = null;

  // 判断 context 是否传入，如果未传入则设置为 window
  context = context || window;

  // 将调用函数设为对象的办法
  context.fn = this;

  // 调用函数
  result = context.fn(...args);

  // 将属性删除
  delete context.fn;

  return result;
};

// apply 函数实现

Function.prototype.myApply = function(context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {throw new TypeError("Error");
  }

  let result = null;

  // 判断 context 是否存在，如果未传入则为 window
  context = context || window;

  // 将函数设为对象的办法
  context.fn = this;

  // 调用办法
  if (arguments[1]) {result = context.fn(...arguments[1]);
  } else {result = context.fn();
  }

  // 将属性删除
  delete context.fn;

  return result;
};

// bind 函数实现
Function.prototype.myBind = function(context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {throw new TypeError("Error");
  }

  // 获取参数
  var args = [...arguments].slice(1),
    fn = this;

  return function Fn() {
    // 依据调用形式，传入不同绑定值
    return fn.apply(
      this instanceof Fn ? this : context,
      args.concat(...arguments)
    );
  };
};

答复：

call 函数的实现步骤：

1. 判断调用对象是否为函数，即便咱们是定义在函数的原型上的，然而可能呈现应用 call 等形式调用的状况。
2. 判断传入上下文对象是否存在，如果不存在，则设置为 window。
3. 解决传入的参数，截取第一个参数后的所有参数。
4. 将函数作为上下文对象的一个属性。
5. 应用上下文对象来调用这个办法，并保留返回后果。
6. 删除方才新增的属性。
7. 返回后果。

apply 函数的实现步骤：

1. 判断调用对象是否为函数，即便咱们是定义在函数的原型上的，然而可能呈现应用 call 等形式调用的状况。
2. 判断传入上下文对象是否存在，如果不存在，则设置为 window。
3. 将函数作为上下文对象的一个属性。
4. 判断参数值是否传入
4. 应用上下文对象来调用这个办法，并保留返回后果。
5. 删除方才新增的属性
6. 返回后果

bind 函数的实现步骤：

1. 判断调用对象是否为函数，即便咱们是定义在函数的原型上的，然而可能呈现应用 call 等形式调用的状况。
2. 保留以后函数的援用，获取其余传入参数值。
3. 创立一个函数返回
4. 函数外部应用 apply 来绑定函数调用，须要判断函数作为构造函数的状况，这个时候须要传入以后函数的 this 给 apply 调用，其余状况都传入指定的上下文对象。

详细资料能够参考：
《手写 call、apply 及 bind 函数》
《JavaScript 深刻之 call 和 apply 的模仿实现》

// 函数柯里化指的是一种将应用多个参数的一个函数转换成一系列应用一个参数的函数的技术。function curry(fn, args) {
  // 获取函数须要的参数长度
  let length = fn.length;

  args = args || [];

  return function() {let subArgs = args.slice(0);

    // 拼接失去现有的所有参数
    for (let i = 0; i < arguments.length; i++) {subArgs.push(arguments[i]);
    }

    // 判断参数的长度是否曾经满足函数所需参数的长度
    if (subArgs.length >= length) {
      // 如果满足，执行函数
      return fn.apply(this, subArgs);
    } else {
      // 如果不满足，递归返回科里化的函数，期待参数的传入
      return curry.call(this, fn, subArgs);
    }
  };
}

// es6 实现
function curry(fn, ...args) {return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
}

详细资料能够参考：
《JavaScript 专题之函数柯里化》

当计算机计算 0.1+0.2 的时候，实际上计算的是这两个数字在计算机里所存储的二进制，0.1 和 0.2 在转换为二进制示意的时候会呈现位数有限循环的状况。js 中是以 64 位双精度格局来存储数字的，只有 53 位的有效数字，超过这个长度的位数会被截取掉这样就造成了精度失落的问题。这是第一个会造成精度失落的中央。在对两个以 64 位双精度格局的数据进行计算的时候，首先会进行对阶的解决，对阶指的是将阶码对齐，也就是将小数点的地位对齐后，再进行计算，个别是小阶向大阶对齐，因而小阶的数在对齐的过程中，有效数字会向右挪动，挪动后超过有效位数的位会被截取掉，这是第二个可能会呈现精度失落的中央。当两个数据阶码对齐后，进行相加运算后，失去的后果可能会超过 53 位有效数字，因而超过的位数也会被截取掉，这是可能产生精度失落的第三个中央。对于这样的状况，咱们能够将其转换为整数后再进行运算，运算后再转换为对应的小数，以这种形式来解决这个问题。咱们还能够将两个数相加的后果和左边相减，如果相减的后果小于一个极小数，那么咱们就能够认定后果是相等的，这个极小数能够
应用 es6 的 Number.EPSILON

详细资料能够参考：
《十进制的 0.1 为什么不能用二进制很好的示意？》
《十进制浮点数转成二进制》
《浮点数的二进制示意》
《js 浮点数存储精度失落原理》
《浮点数精度之谜》
《JavaScript 浮点数陷阱及解法》
《0.1+0.2 !== 0.3？》
《JavaScript 中奇异的~ 运算符》

原码是计算机中对数字的二进制的定点示意办法，最高位示意符号位，其余位示意数值位。长处是易于分辨，毛病是不可能直接参与运算。负数的反码和其原码一样；正数的反码，符号位为 1，数值局部按原码取反。如 [+7]原 = 00000111，[+7]反 = 00000111；[-7]原 = 10000111，[-7]反 = 11111000。负数的补码和其原码一样；正数的补码为其反码加 1。例如 [+7]原 = 00000111，[+7]反 = 00000111，[+7]补 = 00000111；[-7]原 = 10000111，[-7]反 = 11111000，[-7]补 = 11111001

之所以在计算机中应用补码来示意正数的起因是，这样能够将加法运算扩大到所有的数值计算上，因而在数字电路中咱们只须要思考加法器的设计就行了，而不必再为减法设置新的数字电路。

详细资料能够参考：
《对于 2 的补码》

toPrecision 用于解决精度，精度是从左至右第一个不为 0 的数开始数起。toFixed 是对小数点后指定位数取整，从小数点开始数起。Math.round 是将一个数字四舍五入到一个整数。

XSS 攻打指的是跨站脚本攻打，是一种代码注入攻打。攻击者通过在网站注入歹意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的实质是因为网站没有对恶意代码进行过滤，与失常的代码混合在一起了，浏览器没有方法分辨哪些脚本是可信的，从而导致了恶意代码的执行。XSS 个别分为存储型、反射型和 DOM 型。存储型指的是恶意代码提交到了网站的数据库中，当用户申请数据的时候，服务器将其拼接为 HTML 后返回给了用户，从而导致了恶意代码的执行。反射型指的是攻击者构建了非凡的 URL，当服务器接管到申请后，从 URL 中获取数据，拼接到 HTML 后返回，从而导致了恶意代码的执行。DOM 型指的是攻击者构建了非凡的 URL，用户关上网站后，js 脚本从 URL 中获取数据，从而导致了恶意代码的执行。XSS 攻打的预防能够从两个方面动手，一个是恶意代码提交的时候，一个是浏览器执行恶意代码的时候。对于第一个方面，如果咱们对存入数据库的数据都进行的本义解决，然而一个数据可能在多个中央应用，有的中央可能不须要本义，因为咱们没有方法判断数据最初的应用场景，所以间接在输出端进行恶意代码的解决，其实是不太牢靠的。因而咱们能够从浏览器的执行来进行预防，一种是应用纯前端的形式，不必服务器端拼接后返回。另一种是对须要插入到 HTML 中的代码做好充沛的本义。对于 DOM 型的攻打，次要是前端脚本的不牢靠而造成的，咱们对于数据获取渲染和字符串拼接的时候应该对可能呈现的恶意代码状况进行判断。还有一些形式，比方应用 CSP，CSP 的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行，从而避免恶意代码的注入攻打。还能够对一些敏感信息进行爱护，比方 cookie 应用 http-only，使得脚本无奈获取。也能够应用验证码，防止脚本伪装成用户执行一些操作。

详细资料能够参考：
《前端平安系列（一）：如何避免 XSS 攻打？》

CSP 指的是内容安全策略，它的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行。咱们只须要配置规定，如何拦挡由浏览器本人来实现。通常有两种形式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的形式 <meta
http-equiv="Content-Security-Policy">

详细资料能够参考：
《内容安全策略（CSP）》
《前端面试之道》

CSRF 攻打指的是跨站申请伪造攻打，攻击者诱导用户进入一个第三方网站，而后该网站向被攻打网站发送跨站申请。如果用户在被
攻打网站中保留了登录状态，那么攻击者就能够利用这个登录状态，绕过后盾的用户验证，假冒用户向服务器执行一些操作。CSRF 攻打的实质是利用了 cookie 会在同源申请中携带发送给服务器的特点，以此来实现用户的假冒。个别的 CSRF 攻打类型有三种：第一种是 GET 类型的 CSRF 攻打，比方在网站中的一个 img 标签里构建一个申请，当用户关上这个网站的时候就会主动发动提
交。第二种是 POST 类型的 CSRF 攻打，比如说构建一个表单，而后暗藏它，当用户进入页面时，主动提交这个表单。第三种是链接类型的 CSRF 攻打，比如说在 a 标签的 href 属性里构建一个申请，而后诱导用户去点击。CSRF 能够用上面几种办法来防护：第一种是同源检测的办法，服务器依据 http 申请头中 origin 或者 referer 信息来判断申请是否为容许拜访的站点，从而对申请进行过滤。当 origin 或者 referer 信息都不存在的时候，间接阻止。这种形式的毛病是有些状况下 referer 能够被伪造。还有就是咱们这种办法同时把搜索引擎的链接也给屏蔽了，所以个别网站会容许搜索引擎的页面申请，然而相应的页面申请这种申请形式也可能被攻击者给利用。第二种办法是应用 CSRF Token 来进行验证，服务器向用户返回一个随机数 Token，当网站再次发动申请时，在申请参数中退出服务器端返回的 token，而后服务器对这个 token 进行验证。这种办法解决了应用 cookie 繁多验证形式时，可能会被冒用的问题，然而这种办法存在一个毛病就是，咱们须要给网站中的所有申请都增加上这个 token，操作比拟繁琐。还有一个问题是个别不会只有一台网站服务器，如果咱们的申请通过负载平衡转移到了其余的服务器，然而这个服务器的 session 中没有保留这个 token 的话，就没有方法验证了。这种状况咱们能够通过扭转 token 的构建形式来解决。第三种形式应用双重 Cookie 验证的方法，服务器在用户拜访网站页面时，向申请域名注入一个 Cookie，内容为随机字符串，而后当用户再次向服务器发送申请的时候，从 cookie 中取出这个字符串，增加到 URL 参数中，而后服务器通过对 cookie 中的数据和参数中的数据进行比拟，来进行验证。应用这种形式是利用了攻击者只能利用 cookie，然而不能拜访获取 cookie 的特点。并且这种办法比 CSRF Token 的办法更加不便，并且不波及到分布式拜访的问题。这种办法的毛病是如果网站存在 XSS 破绽的，那么这种形式会生效。同时这种形式不能做到子域名的隔离。第四种形式是应用在设置 cookie 属性的时候设置 Samesite，限度 cookie 不能作为被第三方应用，从而能够防止被攻击者利用。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何状况下都不可能作为第三方 Cookie 应用，在宽松模式下，cookie 能够被申请是 GET 申请，且会产生页面跳转的申请所应用。

详细资料能够参考：
《前端平安系列之二：如何避免 CSRF 攻打？》
[《[ HTTP 趣谈] origin, referer 和 host 区别》](https://www.jianshu.com/p/1f9…

Samesite Cookie 示意同站 cookie，防止 cookie 被第三方所利用。将 Samesite 设为 strict，这种称为严格模式，示意这个 cookie 在任何状况下都不可能作为第三方 cookie。将 Samesite 设为 Lax，这种模式称为宽松模式，如果这个申请是个 GET 申请，并且这个申请扭转了以后页面或者关上了新的页面，那么这个 cookie 能够作为第三方 cookie，其余状况下都不能作为第三方 cookie。应用这种办法的毛病是，因为它不反对子域，所以子域没有方法与主域共享登录信息，每次转入子域的网站，都回从新登录。还有一个问题就是它的兼容性不够好。

点击劫持是一种视觉坑骗的攻打伎俩，攻击者将须要攻打的网站通过 iframe 嵌套的形式嵌入本人的网页中，并将 iframe 设置为通明，在页面中透出一个按钮诱导用户点击。咱们能够在 http 相应头中设置 X-FRAME-OPTIONS 来进攻用 iframe 嵌套的点击劫持攻打。通过不同的值，能够规定页面在特
定的一些状况能力作为 iframe 来应用。

详细资料能够参考：
《web 平安之 – 点击劫持攻打与进攻技术简介》

SQL 注入攻打指的是攻击者在 HTTP 申请中注入歹意的 SQL 代码，服务器应用参数构建数据库 SQL 命令时，歹意 SQL 被一起构
造，毁坏原有 SQL 构造，并在数据库中执行，达到编写程序时意料之外后果的攻击行为。

详细资料能够参考：
《Web 安全漏洞之 SQL 注入》
《如何防备常见的 Web 攻打》

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，次要通过拆散关注点的形式来组织代码构造，优化咱们的开发效率。比如说咱们实验室在以前我的项目开发的时候，应用单页利用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简略我的项目时，可能看不出什么问题，过后一旦我的项目变得复杂，那么整个文件就会变得简短，凌乱，这样对咱们的我的项目开发和前期的我的项目保护是十分不利的。MVC 通过拆散 Model、View 和 Controller 的形式来组织代码构造。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 利用了观察者模式，当 Model 层产生扭转的时候它会告诉无关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它次要负责用户与利用的响应操作，当用户与页面产生交互的时候，Co
ntroller 中的事件触发器就开始工作了，通过调用 Model 层，来实现对 Model 的批改，而后 Model 层再去告诉 View 层更新。MVP 模式与 MVC 惟一不同的在于 Presenter 和 Controller。在 MVC 模式中咱们应用观察者模式，来实现当 Model 层数据发生变化的时候，告诉 View 层的更新。这样 View 层和 Model 层耦合在一起，当我的项目逻辑变得复杂的时候，可能会造成代码的凌乱，并且可能会对代码的复用性造成一些问题。MVP 的模式通过应用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的
Controller 只晓得 Model 的接口，因而它没有方法管制 View 层的更新，MVP 模式中，View 层的接口裸露给了 Presenter 因而咱们能够在 Presenter 中将 Model 的变动和 View 的变动绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦，Presenter 还蕴含了其余的响应逻辑。MVVM 模式中的 VM，指的是 ViewModel，它和 MVP 的思维其实是雷同的，不过它通过双向的数据绑定，将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候，ViewModel 就会自动更新；ViewModel 变动了，View 也会更新。这样就将 Presenter 中的工作给自动化了。我理解过一点双向数据绑定的原理，比方 vue 是通过应用数据劫持和公布订阅者模式来实现的这一功
能。

详细资料能够参考：
《浅析前端开发中的 MVC/MVP/MVVM 模式》
《MVC，MVP 和 MVVM 的图示》
《MVVM》
《一篇文章理解架构模式：MVC/MVP/MVVM》

vue 通过应用双向数据绑定，来实现了 View 和 Model 的同步更新。vue 的双向数据绑定次要是通过应用数据劫持和公布订阅者模式来实现的。首先咱们通过 Object.defineProperty() 办法来对 Model 数据各个属性增加拜访器属性，以此来实现数据的劫持，因而当 Model 中的数据发生变化的时候，咱们能够通过配置的 setter 和 getter 办法来实现对 View 层数据更新的告诉。数据在 html 模板中一共有两种绑定状况，一种是应用 v-model 来对 value 值进行绑定，一种是作为文本绑定，在对模板引擎进行解析的过程中。如果遇到元素节点，并且属性值蕴含 v-model 的话，咱们就从 Model 中去获取 v-model 所对应的属性的值，并赋值给元素的 value 值。而后给这个元素设置一个监听事件，当 View 中元素的数据发生变化的时候触发该事件，告诉 Model 中的对应的属性的值进行更新。如果遇到了绑定的文本节点，咱们应用 Model 中对应的属性的值来替换这个文本。对于文本节点的更新，咱们应用了公布订阅者模式，属性作为一个主题，咱们为这个节点设置一个订阅者对象，将这个订阅者对象退出这个属性主题的订阅者列表中。当 Model 层数据产生扭转的时候，Model 作为发布者向主题发出通知，主题收到告诉再向它的所有订阅者推送，订阅者收到告诉后更改本人的数
据。

详细资料能够参考：
《Vue.js 双向绑定的实现原理》

Object.defineProperty 函数一共有三个参数，第一个参数是须要定义属性的对象，第二个参数是须要定义的属性，第三个是该属性描述符。一个属性的描述符有四个属性，别离是 value 属性的值，writable 属性是否可写，enumerable 属性是否可枚举，configurable 属性是否可配置批改。

详细资料能够参考：
《Object.defineProperty()》

有一些对属性的操作，应用这种办法无奈拦挡，比如说通过下标形式批改数组数据或者给对象新增属性，vue 外部通过重写函数解决了这个问题。在 Vue3.0 中曾经不应用这种形式了，而是通过应用 Proxy 对对象进行代理，从而实现数据劫持。应用 Proxy 的益处是它能够完满的监听到任何形式的数据扭转，惟一的毛病是兼容性的问题，因为这是 ES6 的语法。

我对 Virtual DOM 的了解是，首先对咱们将要插入到文档中的 DOM 树结构进行剖析，应用 js 对象将其示意进去，比方一个元素对象，蕴含 TagName、props 和 Children 这些属性。而后咱们将这个 js 对象树给保留下来，最初再将 DOM 片段插入到文档中。当页面的状态产生扭转，咱们须要对页面的 DOM 的构造进行调整的时候，咱们首先依据变更的状态，从新构建起一棵对象树，而后将这棵新的对象树和旧的对象树进行比拟，记录下两棵树的的差别。最初将记录的有差别的中央利用到真正的 DOM 树中去，这样视图就更新了。我认为 Virtual DOM 这种办法对于咱们须要有大量的 DOM 操作的时候，可能很好的进步咱们的操作效率，通过在操作前确定须要做的最小批改，尽可能的缩小 DOM 操作带来的重流和重绘的影响。其实 Virtual DOM 并不一定比咱们实在的操作 DOM 要快，这种办法的目标是为了进步咱们开发时的可维护性，在任意的状况下，都能保障一个尽量小的性能耗费去进行操作。

详细资料能够参考：
《Virtual DOM》
《了解 Virtual DOM》
《深度分析：如何实现一个 Virtual DOM 算法》
《网上都说操作实在 DOM 慢，但测试后果却比 React 更快，为什么？》

两个树的齐全 diff 算法的工夫复杂度为 O(n^3)，然而在前端中，咱们很少会跨层级的挪动元素，所以咱们只须要比拟同一层级的元素进行比拟，这样就能够将算法的工夫复杂度升高为 O(n)。算法首先会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个序号。在深度遍历的时候，每遍历到一个节点，咱们就将这个节点和新的树中的节点进行比拟，如果有差别，则将这个差别记录到一个对象中。在对列表元素进行比照的时候，因为 TagName 是反复的，所以咱们不能应用这个来比照。咱们须要给每一个子节点加上一个 key，列表比照的时候应用 key 来进行比拟，这样咱们才可能复用老的 DOM 树上的节点。

详细资料能够参考：
《你须要晓得的 requestAnimationFrame》
《CSS3 动画那么强，requestAnimationFrame 还有毛线用？》

我过后应用 webpack 的一个最次要起因是为了简化页面依赖的治理，并且通过将其打包为一个文件来升高页面加载时申请的资源
数。我认为 webpack 的次要原理是，它将所有的资源都看成是一个模块，并且把页面逻辑当作一个整体，通过一个给定的入口文件，webpack 从这个文件开始，找到所有的依赖文件，将各个依赖文件模块通过 loader 和 plugins 解决后，而后打包在一起，最初输入一个浏览器可辨认的 JS 文件。Webpack 具备四个外围的概念，别离是 Entry（入口）、Output（输入）、loader 和 Plugins（插件）。Entry 是 webpack 的入口终点，它批示 webpack 应该从哪个模块开始着手，来作为其构建外部依赖图的开始。Output 属性通知 webpack 在哪里输入它所创立的打包文件，也可指定打包文件的名称，默认地位为 ./dist。loader 能够了解为 webpack 的编译器，它使得 webpack 能够解决一些非 JavaScript 文件。在对 loader 进行配置的时候，test 属性，标记有哪些后缀的文件应该被解决，是一个正则表达式。use 属性，指定 test 类型的文件应该应用哪个 loader 进行预处理。罕用的 loader 有 css-loader、style-loader 等。插件能够用于执行范畴更广的工作，包含打包、优化、压缩、搭建服务器等等，要应用一个插件，个别是先应用 npm 包管理器进行装置，而后在配置文件中引入，最初将其实例化后传递给 plugins 数组属性。应用 webpack 确实可能提供咱们对于我的项目的治理，然而它的毛病就是调试和配置起来太麻烦了。但当初 webpack4.0 的免配置肯定水平上解决了这个问题。然而我感觉就是对我来说，就是一个黑盒，很多时候呈现了问题，没有方法很好的定位。

详细资料能够参考：
《不聊 webpack 配置，来说说它的原理》
《前端工程化——构建工具选型：grunt、gulp、webpack》
《浅入浅出 webpack》
《前端构建工具倒退及其比拟》

clientWidth/clientHeight 返回的是元素的外部宽度，它的值只蕴含 content + padding，如果有滚动条，不蕴含滚动条。clientTop 返回的是上边框的宽度。clientLeft 返回的左边框的宽度。offsetWidth/offsetHeight 返回的是元素的布局宽度，它的值蕴含 content + padding + border 蕴含了滚动条。offsetTop 返回的是以后元素绝对于其 offsetParent 元素的顶部的间隔。offsetLeft 返回的是以后元素绝对于其 offsetParent 元素的左部的间隔。scrollWidth/scrollHeight 返回值蕴含 content + padding + 溢出内容的尺寸。scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。scrollLeft 属性返回的是元素滚动条到元素右边的间隔。

详细资料能够参考：
《最全的获取元素宽高及地位的办法》
《用 Javascript 获取页面元素的地位》

简略说，"函数式编程" 是一种 "编程范式"（programming paradigm），也就是如何编写程序的方法论。它具备以下个性：闭包和高阶函数、惰性计算、递归、函数是 "第一等公民"、只用 "表达式"。

详细资料能够参考：
《函数式编程初探》

相干材料：

回调函数
长处：简略、容易了解
毛病：不利于保护，代码耦合高

事件监听（采纳工夫驱动模式，取决于某个事件是否产生）：长处：容易了解，能够绑定多个事件，每个事件能够指定多个回调函数
毛病：事件驱动型，流程不够清晰

公布 / 订阅（观察者模式）相似于事件监听，然而能够通过‘音讯核心’，理解当初有多少发布者，多少订阅者

Promise 对象
长处：能够利用 then 办法，进行链式写法；能够书写谬误时的回调函数；毛病：编写和了解，绝对比拟难

Generator 函数
长处：函数体内外的数据交换、错误处理机制
毛病：流程治理不不便

async 函数
长处：内置执行器、更好的语义、更广的适用性、返回的是 Promise、构造清晰。毛病：错误处理机制

答复：

js 中的异步机制能够分为以下几种：第一种最常见的是应用回调函数的形式，应用回调函数的形式有一个毛病是，多个回调函数嵌套的时候会造成回调函数天堂，高低两层的回调函数间的代码耦合度太高，不利于代码的可保护。第二种是 Promise 的形式，应用 Promise 的形式能够将嵌套的回调函数作为链式调用。然而应用这种办法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。第三种是应用 generator 的形式，它能够在函数的执行过程中，将函数的执行权转移进来，在函数内部咱们还能够将执行权转移回来。当咱们遇到异步函数执行的时候，将函数执行权转移进来，当异步函数执行结束的时候咱们再将执行权给转移回来。因而咱们在 generator 外部对于异步操作的形式，能够以同步的程序来书写。应用这种形式咱们须要思考的问题是何时将函数的控制权转移回来，因而咱们须要有一个主动执行 generator 的机制，比如说 co 模块等形式来实现 generator 的主动执行。第四种是应用 async 函数的模式，async 函数是 generator 和 promise 实现的一个主动执行的语法糖，它外部自带执行器，当函数外部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会期待 promise 对象的状态变为 resolve 后再持续向下执行。因而咱们能够将异步逻辑，转化为同步的程序来书写，并且这个函数能够主动执行。

CSS3 的动画的长处

在性能上会略微好一些，浏览器会对 CSS3 的动画做一些优化
代码绝对简略

毛病

在动画管制上不够灵便
兼容性不好

JavaScript 的动画正好补救了这两个毛病，控制能力很强，能够单帧的管制、变换，同时写得好齐全能够兼容 IE6，并且功能强大。对于一些简单管制的动画，应用 javascript 会比拟靠谱。而在实现一些小的交互动效的时候，就多思考思考 CSS 吧

误区：咱们常常说 get 申请参数的大小存在限度，而 post 申请的参数大小是无限度的。实际上 HTTP 协定从未规定 GET/POST 的申请长度限度是多少。对 get 申请参数的限度是起源与浏览器或 web 服务器，浏览器或 web 服务器限度了 url 的长度。为了明确这个概念，咱们必须再次强调上面几点:

1.HTTP 协定未规定 GET 和 POST 的长度限度
2.GET 的最大长度显示是因为浏览器和 web 服务器限度了 URI 的长度
3. 不同的浏览器和 WEB 服务器，限度的最大长度不一样
4. 要反对 IE，则最大长度为 2083byte，若只反对 Chrome，则最大长度 8182byte

URI: Uniform Resource Identifier      指的是对立资源标识符
URL: Uniform Resource Location        指的是对立资源定位符
URN: Universal Resource Name          指的是对立资源名称

URI 指的是对立资源标识符，用惟一的标识来确定一个资源，它是一种形象的定义，也就是说，不论应用什么办法来定义，只有能惟一的标识一个资源，就能够称为 URI。URL 指的是对立资源定位符，URN 指的是对立资源名称。URL 和 URN 是 URI 的子集，URL 能够了解为应用地址来标识资源，URN 能够了解为应用名称来标识资源。

详细资料能够参考：
《HTTP 协定中 URI 和 URL 有什么区别？》
《你晓得 URL、URI 和 URN 三者之间的区别吗？》
《URI、URL 和 URN 的区别》

相干知识点：

get 申请相似于查找的过程，用户获取数据，能够不必每次都与数据库连贯，所以能够应用缓存。post 不同，post 做的个别是批改和删除的工作，所以必须与数据库交互，所以不能应用缓存。因而 get 申请适宜于申请缓存。

答复：

缓存个别只实用于那些不会更新服务端数据的申请。个别 get 申请都是查找申请，不会对服务器资源数据造成批改，而 post 申请个别都会对服务器数据造成批改，所以，个别会对 get 申请进行缓存，很少会对 post 申请进行缓存。

详细资料能够参考：
《HTML 对于 post 和 get 的区别以及缓存问题的了解》

相干知识点：

预加载：提前加载图片，当用户须要查看时可间接从本地缓存中渲染。懒加载：懒加载的次要目标是作为服务器前端的优化，缩小申请数或提早申请数。两种技术的实质：两者的行为是相同的，一个是提前加载，一个是缓慢甚至不加载。懒加载对服务器前端有肯定的缓解压力作用，预加载则会减少服务器前端压力。

答复：

懒加载也叫提早加载，指的是在长网页中提早加载图片的机会，当用户须要拜访时，再去加载，这样能够进步网站的首屏加载速度，晋升用户的体验，并且能够缩小服务器的压力。它实用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的实在门路保留在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出实在门路赋值给图片的 src 属性，以此来实现图片的提早加载。预加载指的是将所需的资源提前申请加载到本地，这样前面在须要用到时就间接从缓存取资源。通过预加载可能缩小用户的等待时间，进步用户的体验。我理解的预加载的最罕用的形式是应用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。这两种形式都是进步网页性能的形式，两者次要区别是一个是提前加载，一个是缓慢甚至不加载。懒加载对服务器前端有肯定的缓解压力作用，预加载则会减少服务器前端压力。

详细资料能够参考：
《懒加载和预加载》
《网页图片加载优化计划》
《基于用户行为的图片等资源预加载》

当鼠标挪动到元素上时就会触发 mouseenter 事件，相似 mouseover，它们两者之间的差异是 mouseenter 不会冒泡。因为 mouseenter 不反对事件冒泡，导致在一个元素的子元素上进入或来到的时候会触发其 mouseover 和 mouseout 事件，然而却不会触发 mouseenter 和 mouseleave 事件。

详细资料能够参考：
《mouseenter 与 mouseover 为何这般纠缠不清？》

相干知识点：

首先是三个事件，别离是 mousedown，mousemove，mouseup
当鼠标点击按下的时候，须要一个 tag 标识此时曾经按下，能够执行 mousemove 外面的具体方法。clientX，clientY 标识的是鼠标的坐标，别离标识横坐标和纵坐标，并且咱们用 offsetX 和 offsetY 来示意
元素的元素的初始坐标，挪动的举例应该是：鼠标挪动时候的坐标 - 鼠标按上来时候的坐标。也就是说定位信息为：鼠标挪动时候的坐标 - 鼠标按上来时候的坐标 + 元素初始状况下的 offetLeft.

答复：

一个元素的拖拽过程，咱们能够分为三个步骤，第一步是鼠标按下指标元素，第二步是鼠标放弃按下的状态挪动鼠标，第三步是鼠
标抬起，拖拽过程完结。这三步别离对应了三个事件，mousedown 事件，mousemove 事件和 mouseup 事件。只有在鼠标按下的状态挪动鼠标咱们才会
执行拖拽事件，因而咱们须要在 mousedown 事件中设置一个状态来标识鼠标曾经按下，而后在 mouseup 事件中再勾销这个状
态。在 mousedown 事件中咱们首先应该判断，指标元素是否为拖拽元素，如果是拖拽元素，咱们就设置状态并且保留这个时候鼠
标的地位。而后在 mousemove 事件中，咱们通过判断鼠标当初的地位和以前地位的绝对挪动，来确定拖拽元素在挪动中的坐标。最初 mouseup 事件触发后，革除状态，完结拖拽事件。

详细资料能够参考：
《原生 js 实现拖拽性能基本思路》

相干知识点：

// 思路是应用递归函数，一直地去执行 setTimeout 从而达到 setInterval 的成果

function mySetInterval(fn, timeout) {
  // 控制器，管制定时器是否继续执行
  var timer = {flag: true};

  // 设置递归函数，模仿定时器执行。function interval() {if (timer.flag) {fn();
      setTimeout(interval, timeout);
    }
  }

  // 启动定时器
  setTimeout(interval, timeout);

  // 返回控制器
  return timer;
}

答复：

setInterval 的作用是每隔一段指定工夫执行一个函数，然而这个执行不是真的到了工夫立刻执行，它真正的作用是每隔一段时间将事件退出事件队列中去，只有当以后的执行栈为空的时候，能力去从事件队列中取出事件执行。所以可能会呈现这样的状况，就是以后执行栈执行的工夫很长，导致事件队列里边积攒多个定时器退出的事件，当执行栈完结的时候，这些事件会顺次执行，因而就不能到距离一段时间执行的成果。针对 setInterval 的这个毛病，咱们能够应用 setTimeout 递归调用来模仿 setInterval，这样咱们就确保了只有一个事件完结了，咱们才会触发下一个定时器事件，这样解决了 setInterval 的问题。

详细资料能够参考：
《用 setTimeout 实现 setInterval》
《setInterval 有什么毛病？》

1. 申明的变量只在申明时的代码块内无效
2. 不存在申明晋升
3. 存在暂时性死区，如果在变量申明前应用，会报错
4. 不容许反复申明，反复申明会报错

rest 参数（模式为... 变量名），用于获取函数的多余参数。

尾调用指的是函数的最初一步调用另一个函数。咱们代码执行是基于执行栈的，所以当咱们在一个函数里调用另一个函数时，咱们会保留以后的执行上下文，而后再新建另外一个执行上下文退出栈中。应用尾调用的话，因为曾经是函数的最初一步，所以这个时候咱们能够不用再保留以后的执行上下文，从而节俭了内存，这就是尾调用优化。然而 ES6 的尾调用优化只在严格模式下开启，失常模式是有效的。

1.Symbol 函数前不能应用 new 命令，否则会报错。
2.Symbol 函数能够承受一个字符串作为参数，示意对 Symbol 实例的形容，次要是为了在控制台显示，或者转为字符串时，比拟容易辨别。
3.Symbol 作为属性名，该属性不会呈现在 for…in、for…of 循环中，也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回。
4.Object.getOwnPropertySymbols 办法返回一个数组，成员是以后对象的所有用作属性名的 Symbol 值。
5.Symbol.for 承受一个字符串作为参数，而后搜寻有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。
6.Symbol.keyFor 办法返回一个已登记的 Symbol 类型值的 key。

1.ES6 提供了新的数据结构 Set。它相似于数组，然而成员的值都是惟一的，没有反复的值。
2.WeakSet 构造与 Set 相似，也是不反复的值的汇合。然而 WeakSet 的成员只能是对象，而不能是其余类型的值。WeakSet 中的对象都是弱援用，即垃圾回收机制不思考 WeakSet 对该对象的援用，

1.Map 数据结构。它相似于对象，也是键值对的汇合，然而“键”的范畴不限于字符串，各种类型的值（包含对象）都能够当作键。
2.WeakMap 构造与 Map 构造相似，也是用于生成键值对的汇合。然而 WeakMap 只承受对象作为键名（null 除外），不承受其余类型的值作为键名。而且 WeakMap 的键名所指向的对象，不计入垃圾回收机制。

Proxy 用于批改某些操作的默认行为，等同于在语言层面做出批改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 能够了解成，在指标对象之前架设一层“拦挡”，外界对该对象的拜访，都必须先通过这层拦挡，因而提供了一种机制，能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理，用在这里示意由它来“代理”某些操作，能够译为“代理器”。

1. 将 Object 对象的一些显著属于语言外部的办法（比方 Object.defineProperty，放到 Reflect 对象上。
2. 批改某些 Object 办法的返回后果，让其变得更正当。
3. 让 Object 操作都变成函数行为。
4.Reflect 对象的办法与 Proxy 对象的办法一一对应，只有是 Proxy 对象的办法，就能在 Reflect 对象上找到对应的办法。这就让 Proxy 对象能够不便地调用对应的 Reflect 办法，实现默认行为，作为批改行为的根底。也就是说，不论 Proxy 怎么批改默认行为，你总能够在 Reflect 上获取默认行为。

当 Node 遇到 require(X) 时，按上面的程序解决。（1）如果 X 是内置模块（比方 require('http')）a. 返回该模块。b. 不再继续执行。（2）如果 X 以 "./" 或者 "/" 或者 "../" 结尾
  a. 依据 X 所在的父模块，确定 X 的绝对路径。b. 将 X 当成文件，顺次查找上面文件，只有其中有一个存在，就返回该文件，不再继续执行。X
    X.js
    X.json
    X.node

  c. 将 X 当成目录，顺次查找上面文件，只有其中有一个存在，就返回该文件，不再继续执行。X/package.json（main 字段）X/index.js
    X/index.json
    X/index.node（3）如果 X 不带门路
  a. 依据 X 所在的父模块，确定 X 可能的装置目录。b. 顺次在每个目录中，将 X 当成文件名或目录名加载。（4）抛出 "not found"

详细资料能够参考：
《require() 源码解读》

Promise 对象是异步编程的一种解决方案，最早由社区提出。Promises/A+ 标准是 JavaScript Promise 的规范，规定了一个 Promise 所必须具备的个性。Promise 是一个构造函数，接管一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，别离是 pending、resolved 和 rejected，别离代表了进行中、已胜利和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经扭转，就凝固了，无奈再被扭转了。状态的扭转是通过 resolve() 和 reject() 函数来实现的，咱们
能够在异步操作完结后调用这两个函数扭转 Promise 实例的状态，它的原型上定义了一个 then 办法，应用这个 then 办法能够为两个状态的扭转注册回调函数。这个回调函数属于微工作，会在本轮事件循环的开端执行。

详细资料能够参考：
《Promises/A+ 标准》
《Promise》

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保留初始化状态
  var self = this;

  // 初始化状态
  this.state = PENDING;

  // 用于保留 resolve 或者 rejected 传入的值
  this.value = null;

  // 用于保留 resolve 的回调函数
  this.resolvedCallbacks = [];

  // 用于保留 reject 的回调函数
  this.rejectedCallbacks = [];

  // 状态转变为 resolved 办法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态扭转必须期待前一个状态扭转后再进行扭转
    if (value instanceof MyPromise) {return value.then(resolve, reject);
    }

    // 保障代码的执行程序为本轮事件循环的开端
    setTimeout(() => {
      // 只有状态为 pending 时能力转变，if (self.state === PENDING) {
        // 批改状态
        self.state = RESOLVED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.resolvedCallbacks.forEach(callback => {callback(value);
        });
      }
    }, 0);
  }

  // 状态转变为 rejected 办法
  function reject(value) {
    // 保障代码的执行程序为本轮事件循环的开端
    setTimeout(() => {
      // 只有状态为 pending 时能力转变
      if (self.state === PENDING) {
        // 批改状态
        self.state = REJECTED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.rejectedCallbacks.forEach(callback => {callback(value);
        });
      }
    }, 0);
  }

  // 将两个办法传入函数执行
  try {fn(resolve, reject);
  } catch (e) {
    // 遇到谬误时，捕捉谬误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function"
      ? onResolved
      : function(value) {return value;};

  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function(error) {throw error;};

  // 如果是期待状态，则将函数退出对应列表中
  if (this.state === PENDING) {this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

  // 如果状态曾经凝固，则间接执行对应状态的函数

  if (this.state === RESOLVED) {onResolved(this.value);
  }

  if (this.state === REJECTED) {onRejected(this.value);
  }
};

用 JS 设置 DOM 的字体为某一个值，而后再取出来，如果值设置胜利，就阐明反对。

error 统计应用浏览器的 window.error 事件。

单例模式保障了全局只有一个实例来被拜访。比如说罕用的如弹框组件的实现和全局状态的实现。

策略模式次要是用来将办法的实现和办法的调用分来到，内部通过不同的参数能够调用不同的策略。我次要在 MVP 模式解耦的时候
用来将视图层的办法定义和办法调用拆散。

 代理模式是为一个对象提供一个代用品或占位符，以便管制对它的拜访。比如说常见的事件代理。

中介者模式指的是，多个对象通过一个中介者进行交换，而不是间接进行交换，这样可能将通信的各个对象解耦。

适配器用来解决两个接口不兼容的状况，不须要扭转已有的接口，通过包装一层的形式实现两个接口的失常合作。如果咱们须要一种
新的接口返回形式，然而老的接口因为在太多中央曾经应用了，不能随便更改，这个时候就能够应用适配器模式。比方咱们须要一种
自定义的工夫返回格局，然而咱们又不能对 js 工夫格式化的接口进行批改，这个时候就能够应用适配器模式。

更多对于设计模式的材料能够参考：
《前端面试之道》
《JavaScript 设计模式》
《JavaScript 中常见设计模式整顿》

公布订阅模式其实属于狭义上的观察者模式

在观察者模式中，观察者须要间接订阅指标事件。在指标收回内容扭转的事件后，间接接管事件并作出响应。而在公布订阅模式中，发布者和订阅者之间多了一个调度核心。调度核心一方面从发布者接管事件，另一方面向订阅者公布事件，订阅者须要在调度核心中订阅事件。通过调度核心实现了发布者和订阅者关系的解耦。应用公布订阅者模式更利于咱们代码的可维护性。

详细资料能够参考：
《观察者模式和公布订阅模式有什么不同？》

Vue 的生命周期指的是组件从创立到销毁的一系列的过程，被称为 Vue 的生命周期。通过提供的 Vue 在生命周期各个阶段的钩子函数，咱们能够很好的在 Vue 的各个生命阶段实现一些操作。

Vue 一共有 8 个生命阶段，别离是创立前、创立后、加载前、加载后、更新前、更新后、销毁前和销毁后，每个阶段对应了一个生命周期的钩子函数。（1）beforeCreate 钩子函数，在实例初始化之后，在数据监听和事件配置之前触发。因而在这个事件中咱们是获取不到 data 数据的。（2）created 钩子函数，在实例创立实现后触发，此时能够拜访 data、methods 等属性。但这个时候组件还没有被挂载到页面中去，所以这个时候拜访不到 $el 属性。个别咱们能够在这个函数中进行一些页面初始化的工作，比方通过 ajax 申请数据来对页面进行初始化。（3）beforeMount 钩子函数，在组件被挂载到页面之前触发。在 beforeMount 之前，会找到对应的 template，并编译成 render 函数。（4）mounted 钩子函数，在组件挂载到页面之后触发。此时能够通过 DOM API 获取到页面中的 DOM 元素。（5）beforeUpdate 钩子函数，在响应式数据更新时触发，产生在虚构 DOM 从新渲染和打补丁之前，这个时候咱们能够对可能会被移除的元素做一些操作，比方移除事件监听器。（6）updated 钩子函数，虚构 DOM 从新渲染和打补丁之后调用。（7）beforeDestroy 钩子函数，在实例销毁之前调用。个别在这一步咱们能够销毁定时器、解绑全局事件等。（8）destroyed 钩子函数，在实例销毁之后调用，调用后，Vue 实例中的所有货色都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。当咱们应用 keep-alive 的时候，还有两个钩子函数，别离是 activated 和 deactivated。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

详细资料能够参考：
《vue 生命周期深刻》
《Vue 实例》

（1）父子组件间通信

第一种办法是子组件通过 props 属性来承受父组件的数据，而后父组件在子组件上注册监听事件，子组件通过 emit 触发事
件来向父组件发送数据。第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来取得子组件，子组件通过 $parent 取得父组
件，这样也能够实现通信。第三种是应用 provider/inject，在父组件中通过 provider 提供变量，在子组件中通过 inject 来将变量注入到组件
中。不管子组件有多深，只有调用了 inject 那么就能够注入 provider 中的数据。（2）兄弟组件间通信

第一种是应用 eventBus 的办法，它的实质是通过创立一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实
例，通信的组件通过在这个实例上监听和触发事件，来实现音讯的传递。第二种是通过 $parent.$refs 来获取到兄弟组件，也能够进行通信。（3）任意组件之间

应用 eventBus，其实就是创立一个事件核心，相当于中转站，能够用它来传递事件和接管事件。如果业务逻辑简单，很多组件之间须要同时解决一些公共的数据，这个时候采纳下面这一些办法可能不利于我的项目的保护。这个时候
能够应用 vuex，vuex 的思维就是将这一些公共的数据抽离进去，将它作为一个全局的变量来治理，而后其余组件就能够对这个
公共数据进行读写操作，这样达到理解耦的目标。

详细资料能够参考：
《VUE 组件之间数据传递选集》

（1）computed 是计算一个新的属性，并将该属性挂载到 Vue 实例上，而 watch 是监听曾经存在且已挂载到 Vue 实例上的数据，所以用 watch 同样能够监听 computed 计算属性的变动。（2）computed 实质是一个惰性求值的观察者，具备缓存性，只有当依赖变动后，第一次拜访 computed 属性，才会计算新的值。而 watch 则是当数据发生变化便会调用执行函数。（3）从应用场景上说，computed 实用一个数据被多个数据影响，而 watch 实用一个数据影响多个数据。

详细资料能够参考：
《做面试的不倒翁：浅谈 Vue 中 computed 实现原理》
《深刻了解 Vue 的 watch 实现原理及其实现形式》

（1）全局的钩子函数 beforeEach 和 afterEach

beforeEach 有三个参数，to 代表要进入的路由对象，from 代表来到的路由对象。next 是一个必须要执行的函数，如果不传参数，那就执行下一个钩子函数，如果传入 false，则终止跳转，如果传入一个门路，则导航到对应的路由，如果传入 error，则导航终止，error 传入谬误的监听函数。（2）单个路由独享的钩子函数 beforeEnter，它是在路由配置上间接进行定义的。（3）组件内的导航钩子次要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它们是间接在路由组
件外部间接进行定义的。

详细资料能够参考：
《导航守卫》

$route 是“路由信息对象”，包含 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包含了路由的跳转办法，钩子函数等。

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件产生在该元素自身而不是子元素的时候会触发；

vue 中 key 值的作用能够分为两种状况来思考。第一种状况是 v-if 中应用 key。因为 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因而当咱们应用 v-if 来实现元素切换的时候，如果切换前后含有雷同类型的元素，那么这个元素就会被复用。如果是雷同的 input 元素，那么切换前后用户的输出不会被革除掉，这样是不合乎需要的。因而咱们能够通过应用 key 来惟一的标识一个元素，这个状况下，应用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。第二种状况是 v-for 中应用 key。用 v-for 更新已渲染过的元素列表时，它默认应用“就地复用”的策略。如果数据项的程序产生了扭转，Vue 不会挪动 DOM 元素来匹配数据项的程序，而是简略复用此处的每个元素。因而通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚构 DOM。

详细资料能够参考：
《Vue 面试中，常常会被问到的面试题 Vue 知识点整顿》
《Vue2.0 v-for 中 :key 到底有什么用？》
《vue 中 key 的作用》

computed 是计算属性，依赖其余属性计算值，并且 computed 的值有缓存，只有当计算值变动才会返回内容。watch 监听到值的变动就会执行回调，在回调中能够进行一些逻辑操作。

如果你须要在组件切换的时候，保留一些组件的状态避免屡次渲染，就能够应用 keep-alive 组件包裹须要保留的组件。

mixin 用于全局混入，会影响到每个组件实例。mixins 应该是咱们最常应用的扩大组件的形式了。如果多个组件中有雷同的业务逻辑，就能够将这些逻辑剥离进去，通过 mixins 混入代码，比方上拉下拉加载数据这种逻辑等等。另外须要留神的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并

详细资料能够参考：
《前端面试之道》
《混入》

（1）application/x-www-form-urlencoded

浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 形式提交数据。该种形式提交的数据放在 body 外面，数据依照 key1=val1&key2=val2 的形式进行编码，key 和 val 都进行了 URL
转码。（2）multipart/form-data

该种形式也是一个常见的 POST 提交形式，通常表单上传文件时应用该种形式。（3）application/json

通知服务器音讯主体是序列化后的 JSON 字符串。（4）text/xml

该种形式次要用来提交 XML 格局的数据。

详细资料能够参考：
《罕用的几种 Content-Type》

function getType(value) {
  // 判断数据是 null 的状况
  if (value === null) {return value + "";}

  // 判断数据是援用类型的状况
  if (typeof value === "object") {let valueClass = Object.prototype.toString.call(value),
      type = valueClass.split("")[1].split("");

    type.pop();

    return type.join("").toLowerCase();} else {
    // 判断数据是根本数据类型的状况和函数的状况
    return typeof value;
  }
}

详细资料能够参考：
《JavaScript 专题之类型判断(上)》

function checkNullObj(obj) {return Object.keys(obj).length === 0;
}

详细资料能够参考：
《js 判断一个 object 对象是否为空》

// 应用闭包实现
for (var i = 0; i < 5; i++) {(function(i) {setTimeout(function() {console.log(i);
    }, i * 1000);
  })(i);
}

// 应用 let 块级作用域

for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i);
  }, i * 1000);
}

function jsonp(url, params, callback) {
  // 判断是否含有参数
  let queryString = url.indexOf("?") === "-1" ? "?" : "&";

  // 增加参数
  for (var k in params) {if (params.hasOwnProperty(k)) {queryString += k + "=" + params[k] + "&";
    }
  }

  // 解决回调函数名
  let random = Math.random()
      .toString()
      .replace(".", ""),
    callbackName = "myJsonp" + random;

  // 增加回调函数
  queryString += "callback=" + callbackName;

  // 构建申请
  let scriptNode = document.createElement("script");
  scriptNode.src = url + queryString;

  window[callbackName] = function() {
    // 调用回调函数
    callback(...arguments);

    // 删除这个引入的脚本
    document.getElementsByTagName("head")[0].removeChild(scriptNode);
  };

  // 发动申请
  document.getElementsByTagName("head")[0].appendChild(scriptNode);
}

详细资料能够参考：
《原生 jsonp 具体实现》
《jsonp 的原理与实现》

var events = (function() {var topics = {};

  return {
    // 注册监听函数
    subscribe: function(topic, handler) {if (!topics.hasOwnProperty(topic)) {topics[topic] = [];}
      topics[topic].push(handler);
    },

    // 公布事件，触发观察者回调事件
    publish: function(topic, info) {if (topics.hasOwnProperty(topic)) {topics[topic].forEach(function(handler) {handler(info);
        });
      }
    },

    // 移除主题的一个观察者的回调事件
    remove: function(topic, handler) {if (!topics.hasOwnProperty(topic)) return;

      var handlerIndex = -1;
      topics[topic].forEach(function(item, index) {if (item === handler) {handlerIndex = index;}
      });

      if (handlerIndex >= 0) {topics[topic].splice(handlerIndex, 1);
      }
    },

    // 移除主题的所有观察者的回调事件
    removeAll: function(topic) {if (topics.hasOwnProperty(topic)) {topics[topic] = [];}
    }
  };
})();

详细资料能够参考：
《JS 事件模型》

class EventEmitter {constructor() {this.events = {};
  }

  on(event, callback) {let callbacks = this.events[event] || [];
    callbacks.push(callback);
    this.events[event] = callbacks;

    return this;
  }

  off(event, callback) {let callbacks = this.events[event];
    this.events[event] = callbacks && callbacks.filter(fn => fn !== callback);

    return this;
  }

  emit(event, ...args) {let callbacks = this.events[event];
    callbacks.forEach(fn => {fn(...args);
    });

    return this;
  }

  once(event, callback) {let wrapFun = function(...args) {callback(...args);

      this.off(event, wrapFun);
    };
    this.on(event, wrapFun);

    return this;
  }
}

function Foo() {getName = function() {alert(1);
  };
  return this;
}
Foo.getName = function() {alert(2);
};
Foo.prototype.getName = function() {alert(3);
};
var getName = function() {alert(4);
};
function getName() {alert(5);
}

// 请写出以下输入后果：Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3

详细资料能够参考：
《前端程序员常常漠视的一个 JavaScript 面试题》
《一道考查运算符优先级的 JavaScript 面试题》
《一道常被人鄙视的前端 JS 面试题》

Performance API 用于精确度量、管制、加强浏览器的性能体现。这个 API 为测量网站性能，提供以前没有方法做到的精度。应用 getTime 来计算脚本耗时的毛病，首先，getTime 办法（以及 Date 对象的其余办法）都只能准确到毫秒级别（一秒的千分之一），想要失去更小的工夫差异就无能为力了。其次，这种写法只能获取代码运行过程中的工夫进度，无奈晓得一些后盾事件的工夫进度，比方浏览器用了多少工夫从服务器加载网页。为了解决这两个不足之处，ECMAScript 5 引入“高精度工夫戳”这个 API，部署在 performance 对象上。它的精度能够达到 1 毫秒
的千分之一（1 秒的百万分之一）。navigationStart：以后浏览器窗口的前一个网页敞开，产生 unload 事件时的 Unix 毫秒工夫戳。如果没有前一个网页，则等于 fetchStart 属性。loadEventEnd：返回以后网页 load 事件的回调函数运行完结时的 Unix 毫秒工夫戳。如果该事件还没有产生，返回 0。

依据下面这些属性，能够计算出网页加载各个阶段的耗时。比方，网页加载整个过程的耗时的计算方法如下：

var t = performance.timing;
var pageLoadTime = t.loadEventEnd - t.navigationStart;

详细资料能够参考：
《Performance API》

（1）第一个字符必须是字母、下划线（_）或美元符号（$）（2）余下的字符能够是下划线、美元符号或任何字母或数字字符

个别咱们举荐应用驼峰法来对变量名进行命名，因为这样能够与 ECMAScript 内置的函数和对象命名格局保持一致。

详细资料能够参考：
《ECMAScript 变量》

在 ECMAScript 标准中，语句结尾的分号并不是必须的。然而咱们个别最好不要省略分号，因为加上分号一方面有
利于咱们代码的可维护性，另一方面也能够防止咱们在对代码进行压缩时呈现谬误。

Object.assign() 办法用于将所有可枚举属性的值从一个或多个源对象复制到指标对象。它将返回指标对象。

Math.ceil() === 向上取整，函数返回一个大于或等于给定数字的最小整数。Math.floor() === 向下取整，函数返回一个小于或等于给定数字的最大整数。

for (var i = 0, j = 0; i < 5, j < 9; i++, j++) {console.log(i, j);
}

// 当判断语句含有多个语句时，以最初一个判断语句的值为准，因而下面的代码会执行 10 次。// 当判断语句为空时，循环会始终进行。

咱们须要思考的问题：该解决是否必须同步实现？数据是否必须按程序实现？解决办法：（1）将数据分页，利用分页的原理，每次服务器端只返回肯定数目的数据，浏览器每次只对一部分进行加载。（2）应用懒加载的办法，每次加载一部分数据，其余数据当须要应用时再去加载。（3）应用数组分块技术，基本思路是为要解决的我的项目创立一个队列，而后设置定时器每过一段时间取出一部分数据，而后再应用定时器取出下一个要解决的我的项目进行解决，接着再设置另一个定时器。

在前端实现中咱们个别通过 setTimeout 和 setInterval 办法来实现一个倒计时成果。然而应用这些办法会存在工夫偏差的问题，这是因为 js 的程序执行机制造成的，setTimeout 和 setInterval 的作用是隔一段时间将回调事件退出到事件队列中，因而事件并不是立刻执行的，它会等到以后执行栈为空的时候再取出事件执行，因而事件期待执行的工夫就是造成误差的起因。个别解决倒计时中的误差的有这样两种方法：（1）第一种是通过前端定时向服务器发送申请获取最新的时间差，以此来校准倒计时工夫。（2）第二种办法是前端依据偏差工夫来主动调整间隔时间的形式来实现的。这一种形式首先是以 setTimeout 递归的形式来实现倒计时，而后通过一个变量来记录曾经倒计时的秒数。每一次函数调用的时候，首先将变量加一，而后依据这个变量和每次的间隔时间，咱们就能够计算出此时无偏差时应该显示的工夫。而后将以后的实在工夫与这个工夫相减，这样咱们就能够失去工夫的偏差大小，因而咱们在设置下一个定时器的距离大小的时候，咱们就从间隔时间中减去这个偏差大小，以此来实现因为程序执行所造成的时间误差的纠正。

详细资料能够参考：
《JavaScript 前端倒计时纠偏实现》

1. 管道通信
2. 音讯队列通信
3. 信号量通信
4. 信号通信
5. 共享内存通信
6. 套接字通信

详细资料能够参考：
《过程间 8 种通信形式详解》
《过程与线程的一个简略解释》

function findMostWord(article) {
  // 合法性判断
  if (!article) return;

  // 参数解决
  article = article.trim().toLowerCase();

  let wordList = article.match(/[a-z]+/g),
    visited = [],
    maxNum = 0,
    maxWord = "";

  article = "" + wordList.join("  ") +" ";

  // 遍历判断单词呈现次数
  wordList.forEach(function(item) {if (visited.indexOf(item) < 0) {let word = new RegExp("" + item +" ","g"),
        num = article.match(word).length;

      if (num > maxNum) {
        maxNum = num;
        maxWord = item;
      }
    }
  });

  return maxWord + " " + maxNum;
}

最初如果文章和笔记能带您一丝帮忙或者启发，请不要悭吝你的赞和珍藏，你的必定是我后退的最大能源 😁

1. 介绍 js 的根本数据类型。

2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？

3. 什么是堆？什么是栈？它们之间有什么区别和分割？

4. 外部属性 [[Class]] 是什么？

5. 介绍 js 有哪些内置对象？

6. undefined 与 undeclared 的区别？

7. null 和 undefined 的区别？

8. 如何获取平安的 undefined 值？

9. 说几条写 JavaScript 的根本标准？

10. JavaScript 原型，原型链？有什么特点？

11. js 获取原型的办法？

12. 在 js 中不同进制数字的示意形式

13. js 中整数的平安范畴是多少？

14. typeof NaN 的后果是什么？

15. isNaN 和 Number.isNaN 函数的区别？

16. Array 构造函数只有一个参数值时的体现？

17. 其余值到字符串的转换规则？

18. 其余值到数字值的转换规则？

19. 其余值到布尔类型的值的转换规则？

20. {} 和 [] 的 valueOf 和 toString 的后果是什么？

21. 什么是假值对象？

22. ~ 操作符的作用？

23. 解析字符串中的数字和将字符串强制类型转换为数字的返回后果都是数字，它们之间的区别是什么？

24. + 操作符什么时候用于字符串的拼接？

25. 什么状况下会产生布尔值的隐式强制类型转换？

26. || 和 && 操作符的返回值？

27. Symbol 值的强制类型转换？

28. == 操作符的强制类型转换规定？

29. 如何将字符串转化为数字，例如 ‘12.3b’?

30. 如何将浮点数点右边的数每三位增加一个逗号，如 12000000.11 转化为『12,000,000.11』?

31. 罕用正则表达式

32. 生成随机数的各种办法？

33. 如何实现数组的随机排序？

34. javascript 创建对象的几种形式？

35. JavaScript 继承的几种实现形式？

36. 寄生式组合继承的实现？

37. Javascript 的作用域链？

38. 谈谈 This 对象的了解。

39. eval 是做什么的？

40. 什么是 DOM 和 BOM？

41. 写一个通用的事件侦听器函数。

42. 事件是什么？IE 与火狐的事件机制有什么区别？如何阻止冒泡？

43. 三种事件模型是什么？

44. 事件委托是什么？

45. [“1”, “2”, “3”].map(parseInt) 答案是多少？

46. 什么是闭包，为什么要用它？

47. javascript 代码中的 “use strict”; 是什么意思 ? 应用它区别是什么？

48. 如何判断一个对象是否属于某个类？

49. instanceof 的作用？

50. new 操作符具体干了什么呢？如何实现？

51. Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

52. 对于 JSON 的理解？

53. [].forEach.call(&dollar;&dollar;(“_”),function(a){a.style.outline=”1px solid #”+(~~(Math.random()_(1<<24))).toString(16)}) 能解释一下这段代码的意思吗？

54. js 提早加载的形式有哪些？

55. Ajax 是什么? 如何创立一个 Ajax？

56. 谈一谈浏览器的缓存机制？

57. Ajax 解决浏览器缓存问题？

58. 同步和异步的区别？

59. 什么是浏览器的同源政策？

60. 如何解决跨域问题？

61. 服务器代理转发时，该如何解决 cookie？

62. 简略谈一下 cookie？

63. 模块化开发怎么做？

64. js 的几种模块标准？

65. AMD 和 CMD 标准的区别？

66. ES6 模块与 CommonJS 模块、AMD、CMD 的差别。

67. requireJS 的外围原理是什么？（如何动静加载的？如何防止屡次加载的？如何 缓存的？）

68. JS 模块加载器的轮子怎么造，也就是如何实现一个模块加载器？

69. ECMAScript6 怎么写 class，为什么会呈现 class 这种货色?

70. documen.write 和 innerHTML 的区别？

71. DOM 操作——怎么增加、移除、挪动、复制、创立和查找节点？

72. innerHTML 与 outerHTML 的区别？

73. .call() 和 .apply() 的区别？

74. JavaScript 类数组对象的定义？

75. 数组和对象有哪些原生办法，列举一下？

76. 数组的 fill 办法？

77. [,,,] 的长度？

78. JavaScript 中的作用域与变量申明晋升？

79. 如何编写高性能的 Javascript？

80. 简略介绍一下 V8 引擎的垃圾回收机制

24. `+` 操作符什么时候用于字符串的拼接？

67. requireJS 的外围原理是什么？（如何动静加载的？如何防止屡次加载的？如何缓存的？）