前端js面试题本文将js做了部分总结，希望小伙伴们在脑海中拷贝这些知识点，在面试或者工作中能够灵活使用。。。。。。

基本数据类型

1、typeof和instanceof 区别（必会）

在javascript中，判断一个变量的类型可以用typeof

1、数字类型、typeof返回的值是number。比如说：typeof(1)，返回值是number

2、字符串类型，typeof返回的值是string。比如typeof(“123”返回值时string)

3、布尔类型，typeof返回的值是boolean。比如typeof(true)返回值时boolean

4、对象、数组、null返回的值是object。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object
5、函数类型，返回的值是function。比如：typeof(eval)，typeof(Date)返回的值都是function。
6、不存在的变量、函数或者undefined，将返回undefined。比如：typeof(abc)、typeof(undefined)都返回undefined
在javascript中，instanceof用于判断某个对象是否被另一个函数构造
使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回”object”。ECMAScript引入了另一个Java运算符instanceof来解决这个问题。Instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof方法要求开发者明确地确认对象为某特定类型

2、js使用typeof能得到的哪些类型？（必会）

typeof只能区分值类型

typeof undefined // undefined

typeof null // object

typeof console.log // function

typeof NaN // number

3、解释一下什么是回调函数，并提供一个简单的例子？（必会）

软件模块之间总是存在着一定的接口，从调用方式上，可以把他们分为三类：同步调用、回调和异步调用

同步调用是一种阻塞式调用，调用方要等待对方执行完毕才返回，它是一种单向调用；回调是一种双向调用模式，也就是说，被调用方在接口被调用时也会调用对方的接口；

异步调用是一种类似消息或事件的机制，不过它的调用方向刚好相反，接口的服务在收到某种讯息或发生某种事件时，会主动通知客户方（即调用客户方的接口）。回调和异步调用的关系非常紧密，通常我们使用回调来实现异步消息的注册，通过异步调用来实现消息的通知。同步调用是三者当中最简单的，而回调又常常是异步调用的基础，因此，下面我们着重讨论回调机制在不同软件架构中的实现

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应

案例：

#include<stdio.h>
//callbackTest.c
//1.定义函数onHeight（回调函数）
//@onHeight 函数名
//@height   参数
//@contex   上下文
void onHeight(double height, void *contex)
{
 printf("current height is %lf", height);
}
//2.定义onHeight函数的原型
//@CallbackFun 指向函数的指针类型
//@height      回调参数，当有多个参数时，可以定义一个结构体
//@contex      回调上下文，在C中一般传入nullptr，在C++中可传入对象指针
typedef void (*CallbackFun)(double height, void *contex);
//定义全局指针变量
CallbackFun m_pCallback;
//定义注册回调函数
void registHeightCallback(CallbackFun callback, void *contex)
{
 m_pCallback = callback;
}
//定义调用函数
void printHeightFun(double height)
{
 m_pCallback(height, NULL);
}
//main函数
int main()
{
 //注册回调函数onHeight
 registHeightCallback(onHeight, NULL);
 //打印height
 double h = 99;
 printHeightFun(99);
}

4、什么是闭包？（必会）

“闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。”

举例：创建闭包最常见方式，就是在一个函数内部创建另一个函数。下面例子中的 closure 就是一个闭包，

function func(){
var a =1 ,b = 2;
funciton closure(){ return a+b; } return
closure; }

5、什么是内存泄漏（必会）

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在

6、哪些操作会造成内存泄漏？（必会）

1、垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收

2、setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

3、闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

7、JS内存泄漏的解决方式（必会）

1、global variables：对未声明的变量的引用在全局对象内创建一个新变量。在浏览器中，全局对象就是 window。

function foo(arg) {
bar = 'some text'; // 等同于window.bar = 'some text';
}

1.1）解决：

1.1.1）创建意外的全局变量

function foo() {
this.var1 = 'potential accident'
}

1.1.2）可以在 JavaScript 文件开头添加 “use strict”，使用严格模式。这样在严格模式下解析 JavaScript 可以防止意外的全局变量

1.1.3）在使用完之后，对其赋值为 null 或者重新分配

1.2）被忘记的 Timers 或者 callbacks

在 JavaScript 中使用 setInterval 非常常见

大多数库都会提供观察者或者其它工具来处理回调函数，在他们自己的实例变为不可达时，会让回调函数也变为不可达的。对于 setInterval，下面这样的代码是非常常见的：

var serverData = loadData();
setInterval(function() {
var renderer = document.getElementById('renderer');
if(renderer) {
renderer.innerHTML = JSON.stringify(serverData);
}
}, 5000); //This will be executed every ~5 seconds.

这个例子阐述着 timers 可能发生的情况：计时器会引用不再需要的节点或数据

1.3）闭包：一个可以访问外部（封闭）函数变量的内部函数

JavaScript 开发的一个关键方面就是闭包：一个可以访问外部（封闭）函数变量的内部函数。由于 JavaScript 运行时的实现细节，可以通过以下方式泄漏内存：

var theThing = null;
var replaceThing = function () {
 var originalThing = theThing;
var unused = function () {
 if (originalThing) // a reference to 'originalThing'
 console.log("hi");
 };
 theThing = {
 longStr: new Array(1000000).join('*'),
 someMethod: function () {
 console.log("message");
 }
 };
};
setInterval(replaceThing, 1000);

1.4）DOM 引用

有时候，在数据结构中存储 DOM 结构是有用的。假设要快速更新表中的几行内容。将每行 DOM 的引用存储在字典或数组中可能是有意义的。当这种情况发生时，就会保留同一 DOM 元素的两份引用：一个在 DOM 树种，另一个在字典中。如果将来某个时候你决定要删除这些行，则需要让两个引用都不可达。
var elements = {
 button: document.getElementById('button'),
 image: document.getElementById('image')
};
function doStuff() {
 elements.image.src = 'http://example.com/image_name.png';
}
function removeImage() {
 // The image is a direct child of the body element.
 document.body.removeChild(document.getElementById('image'));
 // At this point, we still have a reference to #button in the
 //global elements object. In other words, the button element is
 //still in memory and cannot be collected by the GC.
}

8、说说你对原型（prototype）理解（必会）

JavaScript是一种通过原型实现继承的语言与别的高级语言是有区别的，像java，C#是通过类型决定继承关系的，JavaScript是的动态的弱类型语言，总之可以认为JavaScript中所有都是对象，在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该对象的原型

“prototype”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome内核的JavaScript引擎中提供了”proto“这个非标准的访问器（ECMA新标准中引入了标准对象原型访问器”Object.getPrototype(object)”）

原型的主要作用就是为了实现继承与扩展对象

9、介绍下原型链（解决的是继承问题吗）（必会）

JavaScript原型：每个对象都会在其内部初始化一个属性，就是prototype(原型)

原型链：
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

10、常见的js中的继承方法有哪些（必会）

继承有以下六种方法

1、原型链继承 JavaScript实现继承的基本思想：通过原型将一个引用类型继承另一个引用类型的属性和方法
2、借用构造函数继承(伪造对象或经典继承) JavaScript实现继承的基本思想：在子类构造函数内部调用超类型构造函数。通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数
3、组合继承(原型+借用构造)(伪经典继承) JavaScript实现继承的基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式
将原型链和借用构造函数的技术组合到一起，从而取长补短发挥两者长处的一种继承模式
4、型式继承 JavaScript实现继承的基本思想：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型
5、寄生式继承 JavaScript实现继承的基本思想：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。
寄生式继承是原型式继承的加强版
6、寄生组合式继承 JavaScript实现继承的基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法

11、`[...undefined]` 输出什么？

... 可以称之为 展开语法(Spread syntax)，又可以叫 扩展运算符。可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

首先我们来看数组中常见的用法：

const foo = [1, 2, 3];
const bar = [0, ...foo];

console.log(bar);
// [0, 1, 2, 3]

这种方式类似数组中的 slice() ，将 foo 浅拷贝到 bar 数组里。

我们在浏览器上输出结果：

[...undefined]

// Uncaught TypeError: undefined is not iterable

看到代码报错 Uncaught TypeError，因为 undefined 是不可迭代的。那什么可迭代呢，试试普通对象：

[...{}]

// Uncaught TypeError: {} is not iterable

从这里可以看出普通对象也不行。在数组或函数参数中使用展开语法时, 该语法只能用于 可迭代对象

12、什么是 `可迭代对象`？

要成为可迭代对象，一个对象必须实现 @@iterator 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性

什么意思呢，看一个简单的例子最直接：

const counter = {
  *[Symbol.iterator]() {
    yield 1;
  },
};

[...counter];
// 正常执行，结果：
// [1]

一个普通对象中，必须包含一个 Symbol.iterator 属性，并规定是一个无参数的函数，其返回值为一个符合 迭代器协议 的对象。迭代器协议 属于 迭代协议。迭代协议 并不是新的内置实现或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。

##13、什么是迭代器？

只有实现了 迭代器协议 的一个对象才能成为迭代器。例如：

const counter = {
  next() {
    return { value: undefined, done: true };
  },
};

迭代器是通过使用 next() 方法实现 迭代器协议 的任何一个对象，该方法返回具有两个属性的对象： value，这是序列中的 next 值；和 done ，如果已经迭代到序列中的最后一个值，则它为 true 。如果 value 和 done 一起存在，则它是迭代器的返回值。

13、 `可迭代对象` 和 `迭代器` 有什么区别呢？

如果实现了 迭代器协议 和 可迭代协议，那么它就是一个 可迭代对象。

const counter = {
  next() {
    return { value: undefined, done: true };
  },
  [Symbol.iterator]() {
    return this;
  },
};

[Symbol.iterator]() 通过返回 this 以便调用该方法后获得一个迭代器，以下方式也许会更好理解：

const counter = {
  [Symbol.iterator]() {
    // 返回一个迭代器
    return {
      next() {
        return { value: undefined, done: true };
      },
    };
  },
};

当一个对象需要被迭代的时候，首先，会不带参数调用它的 @@iterator 方法，然后使用此方法返回的迭代器获得要迭代的值。此函数可以是普通函数，也可以是生成器函数，以便在调用时返回迭代器对象。在此生成器函数的内部，可以使用 yield 提供每个条目。

如果 `@@iterator` 方法不返回迭代器呢？

const counter = {
  [Symbol.iterator]() {
    return 1;
  },
};

[...counter];
// Uncaught TypeError: Result of the Symbol.iterator method is not an object

如果一个可迭代对象的 @@iterator 方法不能返回迭代器对象，那么可以认为它是一个不符合标准的可迭代对象。

13、生成器（Generator）对象到底是一个迭代器，还是一个可迭代对象？

生成器对象既是迭代器，也是可迭代对象，因为它符合 可迭代协议 和 迭代器协议。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

[...gen()];
// [1, 2, 3]

14、那内置可迭代对象有哪些呢？

目前所有的内置可迭代对象有：

String
Array
TypedArray
Map
Set
arguments
NodeList

它们的原型对象都实现了 @@iterator 方法。

15、那想实现 `[...obj]` 展开一个普通对象，有办法吗？

顾名思义，那就是要将普通对象转换为 可迭代对象。

展开对象的 key： [...Object.keys(obj)]
展开对象的 value： [...Object.values(obj)]
展开整个对象： [...Object.entries(obj)]

16、那 `{...undefined}` 执行结果是什么？

展开语法在字面量对象的行为细节与数组中有很大差别，可以看作是 Object.assign({}, undefined)，主要区别是 Object.assign() 函数会触发 setters，而展开语法则不会

执行结果则是返回一个 {} 空对象，{...true}、{...1}、{...null} 亦是如此。

17、`{ ...[1, 2, 3] }` 执行结果呢？

首先在对象中不能将 ... 后面当作 可迭代对象 看待，应该看作是一个普通对象，即包含 key：

{ ...[1, 2, 3] }
// {0: 1, 1: 2, 2: 3}

18、那请说 `...` 语法作为剩余参数的特性

展开语法可以用于函数的最后一个命名参数，它由剩余参数组成的真数组。它与 arguments 对象的区别主要有三个：

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参
arguments 对象不是一个真正的数组，而剩余参数是真正的 Array 实例
arguments 对象还有一些附加的属性（如 callee 属性）

展开语法还可以用于数组/对象解构，剩余元素必须是数组/对象的最后一个元素。

前端js面试题

11、[...undefined] 输出什么？

12、什么是 可迭代对象？

13、 可迭代对象 和 迭代器 有什么区别呢？

如果 @@iterator 方法不返回迭代器呢？

13、生成器（Generator）对象到底是一个迭代器，还是一个可迭代对象？

14、那内置可迭代对象有哪些呢？

15、那想实现 [...obj] 展开一个普通对象，有办法吗？

16、那 {...undefined} 执行结果是什么？

17、{ ...[1, 2, 3] } 执行结果呢？

18、那请说 ... 语法作为剩余参数的特性