JavaScript面试宝典

JS的原始类型有哪几种？

在 JS 中，存在这6种原始值，分别是：

number
string
boolean
undefined
null
symbol

null 是对象吗？

对于 null 来说，很多人会认为他是个对象类型，其实这是错误的。虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表对象，然而 null 表示为全零，所以将它错误地判断为 object。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

栈内存和堆内存的区别

栈内存：栈是一种先进后出（FILO，First-In-Last-Out）的数据结构。栈内存中存放变量
堆内存：堆是一种经过排序的树形数据结构，每个结点都有一个值。堆的存取是随意的。堆内存中存放复杂对象

基本类型和引用类型的值

ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。

保存方式

在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。基本类型的值是直接保存在变量中的，因此可以直接操作保存在变量中的实际值，所以基本类型的值是按值访问的。引用类型的值是保存在内存中的对象，在操作对象时，实际上是在操作对象的引用而不是实际的对象，但在为对象添加属性时，操作的是实际的对象，为此，引用类型的值是按引用访问的。

动态的属性

基本类型的值是不可变的，是没有函数可以调用的。对于引用类型的值，它的属性则是动态的，我们可以为其添加属性和方法，也可以改变和删除其属性和方法。

复制变量值

除了保存的方式不同之外，在从一个变量向另一个变量复制基本类型值和引用类型值时，也存在不同。如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一个变量。

对象类型和原始类型的不同之处？

在 JS 中，除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是，原始类型存储的值，对象类型存储的是地址（指针）。当你创建了一个对象类型的时候，计算机会在内存中帮我们开辟一个空间来存放值，但是我们需要找到这个空间，这个空间会拥有一个地址（指针）。

函数参数是对象会发生什么问题？

在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用 ECMAScript 的概念来说，就是 arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。当在函数内部重写引用类型的值时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕之后立即被销毁。

typeof 是否能正确判断类型？

typeof 对于原始类型来说，除了 null 都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'
typeof null // 'object'

typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能准确判断变量到底是什么类型

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

instanceof 能正确判断对象的原理是什么？

如果我们想判断一个对象的正确类型，这时候可以考虑使用 instanceof，因为内部机制是通过原型链来判断的。

类型转换

值	转字符串	转数字	转布尔值	转对象
`undefined`	`”undefined“`	`NaN`	`false`	throws TypeError
`null`	`"null"`	`0`	`false`	throws TypeError
`true`	`"true"`	`1`		new Boolean(true)
`false`	`"false"`	`0`		new Boolean(false)
`""`（空字符串）		`0`	`false`	new String("")
`"1.2"`（非空数字字符串）		`1.2`	`true`	new String("1.2")
`"one"`（非空非数字字符串）		`NaN`	`true`	new String("one")
`0`	`"0"`		`false`	new Number(0)
`-0`	`"-0"`		`false`	new Number(-0)
`NaN`	`"NaN"`		`false`	new Number(NaN)
`Infinity`	`"Infinity"`		`true`	new Number(Infinity)
`-Infinity`	`"-Infinity"`		`true`	new Number(-Infinity)
`1`（非零无穷大）	`"1"`		`true`	new Number(1)
`Symbol("name")`	throws TypeError	throws TypeError	`true`
`{}`（任意对象）	`"[object Object]"`	`NaN`	`true`
`[]`（任意数组）	`""`	`0`	`true`
`[9]`（1个数字元素）	`"9"`	`9`	`true`
`['a']`（其他数组）	使用`join` 方法	`NaN`	`true`
`function() {}`（任意函数）	参考对象转基本类型	`NaN`	`true`

转换为Boolean

除了 0、-0、NaN、''、false、undefined、null，其他所有值都转为 true,包括对象

对象转基本类型

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 对象，对于该函数来说，算法逻辑一般来说如下：

如果已经是基本类型了，那就不需要转换了
如果需要转字符串类型就调用x.toString()，转换为基本类型的话就返回转换的值。不是字符串类型的话就先调用 x.valueOf()，如果转换为基本类型，就返回转换的值
如果都没有返回原始类型，就会报错

当然你也可以重写 Symbol.toPrimitive ，该方法在转原始类型时调用优先级最高。

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  },
  [Symbol.toPrimitive]() {
    return 2
  }
}
1 + a // => 3

加法运算符

加法运算符比较特别，它有以下几个特点：

运算中其中一方为字符串，那么就会把另一方也转换为字符串
如果一方不是字符串或者数字，那么会将它转换为数字或者字符串

undefined + '' // -> "undefined"
null + '' // -> "null"
true + '' // -> "true"
false + '' // -> "false"
1 + '' // -> "1"
NaN + ''
({}) +'' // -> "[object Object]"
{} + '' // -> 0
[] + '' // -> ""
undefined + 1 // -> NaN
null + 1 // -> 1
true + 1 // -> 2
false + 1 // -> 1
({}) + 2 // -> "[object Object]2"
{} + 2 // -> 2
[] + 1 // -> "1"
+ '' // -> 0
+ 'b' // -> NaN
+ {} // -> NaN
+ [] // -> 0
'a' + + 'b' // -> "aNaN"

比较运算符

如果是对象，就通过[[toPrimitive]] 转换对象
如果是字符串，就通过 unicode 字符串索引来比较

this对象

this 对象是在运行时基于函数的执行环境绑定的：

在全局函数中，this 等同于 window
当函数被作为某个对象的方法调用时，this 等于那个对象
匿名函数的执行环境具有全局性，因此其 this对象通常指向 window
new：this 被固化到实例上，不会被任何方式改变
bind、apply、call：this 对象是第一个参数
箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this

== 和 === 有什么区别

对于 == 来说，如果对比双方的类型不一样的话，就会进行隐式类型转化。假如我们需要对比 x 和 y 是否相同，就会进行如下判断流程：

首先会判断两者类型是否相同。相同的话就是比大小了
类型不同的话，那么就会进行类型转换
会先判断是否在对比 null 和 undefined，是的话就会返回 true
判断两者类型是否为 string 和 number，是的话就会将字符串转为 number
判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断
判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断

[] == ![] => true

闭包（Closure）

什么是闭包

函数A里面包含了函数B，而函数B里面使用了函数A的变量，那么函数B被称为闭包函数。在JS中，闭包的意义是能让你从内部函数访问外部函数作用域。

在计算机科学中，闭包（Closure），又称词法闭包（Lexical Closure）或函数闭包（Function Closure），是在支持头等函数的编程语言中实现词法绑定的一种技术。闭包实际上是一个结构体，它存储了一个函数和一个关联环境。环境里是若干对符号和值的对应关系，它既要包括约束变量（该函数内部的变量），也要包括自由变量（在函数外部定义但在函数内被引用）。闭包跟函数最大的不同在于，当捕捉闭包的时候，它的自由变量会在捕捉时被确定，这样即便脱离了捕捉时的上下文，它也能照常运行。

闭包的副作用

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。
闭包只能取得包含函数中任何变量的最后一个值。闭包保存的是整个变量对象，而不是某个特殊的变量。
在IE9之前的浏览器中，如果闭包的作用域链中保存着HTML元素，那么就意味着该元素将无法被销毁。

循环中使用闭包解决 `var` 定义函数的问题

for(var i = 1; i <=5: i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

首先因为 setTimeout 是个异步函数，所以会把循环全部执行完毕，这时候 i 就是 6 了，所以会输出 5 个 6。

使用闭包解决

for(var i = 1; i <= 5; i++) {
  ;(function(j) {
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
}

在上述代码中，我们首先使用了立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j，从而达到目的。

使用 setTimeout 的第三个参数

for (var i = 1; i <= 5; i++) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
}

第三个参数会被当成 timer 函数的参数传入。

使用let定义i

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

深浅拷贝

对于引用类型的值，复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一个变量。通常在开发中我们不希望出现这样的问题，我们可以使用深浅拷贝来解决这个问题。

浅拷贝

浅复制只复制一层对象的属性，也就是说拷贝原对象的实例，但是对其内部的引用类型值，拷贝的是其引用。实现浅拷贝：

Object.assign({}, ...)
... 扩展操作符
lodash _.clone

深拷贝

深拷贝是对对象以及对象的所有子对象进行拷贝。我们可以使用 lodash 的 cloneDeep 方法，但是深拷贝大数据的时候，由于内部实现是递归，所以最好换实现思路。

JSON.parse(JSON.stringify(object)) 深拷贝的局限：

会忽略 undefined、symbol、function
如果被拷贝的对象中有正则表达式，则拷贝之后的正则表达式会变成 Object
不能解决循环引用的对象

原型、原型链

原型

每个 JS 对象都有 __proto__ 属性，这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了，这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。原型也是一个对象，并且这个对象包含了很多函数。原型对象通过 constructor 指向了构造函数，构造函数又通过 prototype 指向了原型。

原型链

原型链就是多个对象通过 __proto__ 的方式连接了起来。

执行环境及作用域链

执行环境（execution context）/作用域

执行环境也称作用域，定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），执行环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

在 JS 中，执行环境分为全局执行环境和函数执行环境：

全局执行环境：最外围的执行环境，根据 ECMAScript 实现所在的宿主环境不同，表示执行环境的对象也不一样。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。全局执行环境直到应用程序退出（例如关闭网页或浏览器）时才会被销毁
函数执行环境：每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。

作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对象在最开始只包含一个变量，即 arguments 对象（这个对象在全局执行环境中是不存在的）。作用域的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程从作用域的前端开始，然后逐级地向后回溯，直到找到标识符为止（如果找不到标识符，通常会导致错误发生）。

var、let、const的区别

什么是声明提升（hoisting）？

函数声明提升：解析器会率先读取函数声明，并使其在任何代码之前可用（可以访问）
变量声明提升：和函数声明一样，但是赋值操作是在代码执行时才进行的，所以函数表达式不能被提升
函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部

let、const与var的区别

let、const支持块级作用域、不允许重复声明、因为存在暂时性死区所以不存在变量提升、在全局作用域下使用 let 和 const 声明变量，变量并不会被挂在到 window 上，这一点就和 var 声明有了区别。

let 和 const 的区别

let 声明的变量可以改变，值和类型都可以改变，没有限制
const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
对于引用类型的值，如数组和对象，变量保存的是值的引用。const 命令只是保证引用不变，并不保证值不变。

事件代理

事件代理（Event Delegation）,又称之为事件委托。是JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。