前端面试–JS

Q：JS数据类型

JS简单数据类型：String、Number、Boolean、Null、undefined、Symbol。复杂数据类型Object、Array、Function。

Q：null和undefined的区别

（1）null是一个表示”无”的对象，转我数值是为0，undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined

（2）Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

（3）Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是：

a、变量被声明了，但没有赋值时，就等于undefined

b、调用函数时，应该提供的参数没有提供，该参数等于undefined

c、对象没有赋值属性，该属性的值为undefined

d、函数没有返回值时，默认返回undefined

（4）null表示”没有对象”，即该处不应该有值。典型用法是：

　a、作为函数的参数，表示该函数的参数不是对象

　b、作为对象原型链的终点

Q：拖拽涉及的事件

Q：垃圾回收

什么是垃圾回收

JS垃圾回收机制的目的是为了防止内存泄漏，内存泄漏是指有一些已经不被需要的变量但仍然存在在内存中，这样便会造成内存泄漏。垃圾回收机制就是为了回收这些不被需要的变量，并且释放掉他们所指向的内存。

JS垃圾回收的方法

①标记清除

这是最常见的回收方法，也是大部分浏览器使用的回收方法。

当变量进入执行环境是，就会被标记上“进入环境”，从逻辑上讲，被标记上“进入环境”的变量所指向的内存是永远不会被回收的。当某个变量离开执行环境时，就会被标上“离开环境”。被标记为“离开环境”的变量则是可以回收的。

②引用计数

这是一种不太常见的回收方式。引用计数法就是同级引用类型声明后被引用的次数，当次数为0时，该变量就会被回收。

有可能造成内存泄漏的案例

①全局变量造成的内存泄漏

②未销毁的定时器和回调函数造成的内存泄漏

③DOM引用造成的内存泄漏

https://www.cnblogs.com/pingzi-wq/p/11531185.html

Q：原型链

因为每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。

Q：JS定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

Q：数组和对象内置方法

数组内置方法

constructor 所建立对象的函数参考

prototype 能够为对象加入的属性和方法

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

对象内置方法

属性

constructor

prototype

实例方法

1、toString()返回当前对象的字符串形式，返回值为String类型。

2、toLocaleString()返回当前对象的"本地化"字符串形式，以便于当前环境的用户辨识和使用，返回值为String类型。

3、valueOf()返回指定对象的原始值。

静态方法

1.Object.assign(target, …sources)

功能：把一个或多个源对象的可枚举、自有属性值复制到目标对象中，返回值为目标对象。

2、Object.create(proto [,propertiesObject])

功能：创建一个对象，其原型为prototype，同时可添加多个属性。

3、Object.defineProperty(obj, prop, descriptor)

功能：在一个对象上定义一个新属性或修改一个现有属性，并返回该对象。

4、Object.defineProperties(obj, props)

功能：在一个对象上定义一个或多个新属性或修改现有属性，并返回该对象。

8、Object.getOwnPropertyNames(obj)

功能：获取目标对象上的全部自有属性名（包括不可枚举属性）组成的数组。

9.Object.getPrototypeOf(obj)

功能：获取指定对象的原型，即目标对象的prototype属性的值。

11、Object.keys(obj)

功能：获取目标对象上所有可枚举属性组成的数组。

Q：for in和for of的区别

a. for in 便历出来的是属性

b. for of 遍历的是value

c. 手动给对象添加属性后, for in 是可以将新添加的属性遍历出来 但是for of 不行

d. for in 的属性是使用[] 不可以使用 “.” eg: data[‘index’] instead of data.index

Q：继承的方式

1.原型链继承

2.借用构造函数（经典继承） 复制父类构造函数内的属性

call继承是在子类中把父类当做普通的函数去执行，让父类的this指向子类的实例，相当于给子类设置了很多私有的属性和方法。

3.组合继承

组合原型链继承和借用构造函数继承

背后的思路是：使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。

4.寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

可以理解为在原型式继承的基础上新增一些函数或属性。

5.寄生组合式继承

子类构造函数复制父类的自身属性和方法，子类原型只接收父类的原型属性和方法。

https://www.jianshu.com/p/85899e287694

Q：数据类型检测

第一种：typeof可以检测一些基本的数据类型

第二种：valueof可以看到数据最本质内容（原始值）

第三种：instanceof检测当前实例是否隶属于某各类

双目运算符 a instanceof b 判断a的构造器是否为b，返回值是布尔值

第四种：isArray判断是否为数组，isNaN（）判断是否为NaN

第五种：Object.prototype.toString

语法 Object.prototype.toString.call([value])

获取Object.prototype上的toString方法，让方法的this变为需要检测的数据类型值，并在Number、String、Array、Function…这些类的原型上都有一个toString方法：这个方法就是把本身的值转换为字符串

Q：怎么改变this指向

call、apply、bind

共同点：call和apply第一个参数都为改变this的指针，若为null/undefined，默认指向window

不同点：①call、apply可以自动执行，bind需手动调用

②call、bind都有无数个参数，apply只有两个参数，而且第二个参数为数组

Q：判断this指向

按照this指针的优先级，列出下面常会遇到的四种情况，从上到下依次是优先级从高到低（后面会详细比较优先级）。

1.函数是和new一起被调用的吗（new绑定）？如果是，this就是新构建的对象。

var bar = new foo()

2.函数是用call或apply被调用（明确绑定），甚至是隐藏在bind 硬绑定 之中吗？如果是，this就是明确指定的对象。

var bar = foo.call( obj2 )

3.函数是用环境对象（也称为拥有者或容器对象）被调用的吗（隐含绑定）？如果是，this就是那个环境对象。

var bar = obj1.foo()

4.否则，使用默认的this（默认绑定）。如果在strict mode下，就是undefined，否则是global对象。 var bar = foo()

Q：设计模式

（不全）

js设计模式有：单例，工厂，观察者等。

单例模式：保证一个类只有一个实例。实现方法：判断实际是否存在，不存在，创建实际，存在直接返回。

观察者模式：当改变一个对象会同时改变其他对象时，应该使用观察者模式。观察者模式主要作用是解耦。

工厂模式：通过对产品类的抽象使其创建业务主要负责用于创建多类产品实例。

Q：new实现

new的实现原理

• 以构造器的prototype属性为原型，创建新对象；

• 将this(也就是上一句中的新对象)和调用参数传给构造器，执行；

• 如果构造器没有手动返回对象，则返回第一步创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象。

通过new创建对象经历4个步骤

1、创建一个新对象；[var o = {};]

2、将构造函数的作用域赋给新对象（因此this指向了这个新对象）；[Person.apply(o)] [Person原来的this指向的是window]

3、执行构造函数中的代码(为这个新对象添加属性)；

4、返回新对象。

https://blog.csdn.net/weixin_47047317/article/details/107567674

Q：防抖、节流

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

防抖和节流都是为了限制事件的执行次数，防止出现事件的响应速度跟不上触发的速度，导致出现卡顿延迟的现象。

Q：哪些操作会造成内存泄漏

1.意外的全局变量

2.被遗忘的计时器或回调函数

3.脱离 DOM 的引用

4.闭包

第一种情况是我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。

第二种情况是我们设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留

在内存中，而无法被回收。

第三种情况是我们获取一个 DOM 元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。

第四种情况是不合理的使用闭包，从而导致某些变量一直被留在内存当中。

Q：event loop

事件循环机制

JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。

在异步函数中，可以细分为两种任务，宏任务与微任务。

宏任务有以下几种：

①I/O

②setTimeout

③setInterval

④setImmediate

⑤requestAnimationFrame

微任务有以下几种：

①process.nextTick

②MutationObserver

③Promise.then catch finally

js执行顺序： 同步函数 -> 微任务 -> 宏任务

async function async1() {

console.log(‘async1 start’);

await async2();

console.log(‘async1 end’);

}

async function async2() {

console.log(‘async2’);

}

console.log(‘script start’);

setTimeout(function() {

console.log(‘setTimeout’);

}, 0)

async1();

new Promise(function(resolve) {

console.log(‘promise1’);

resolve();

}).then(function() {

console.log(‘promise2’);

});

console.log(‘script end’);

Q：promise

（还需了解使用与实现、并行执行与顺序执行）

原理

在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。

(1) promise 对象初始化状态为 pending。

(2) 当调用resolve(成功)，会由pending => fulfilled。

(3) 当调用reject(失败)，会由pending => rejected

Q：闭包

闭包概念

能够读取其他函数内部变量的函数。或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。

闭包用途

1、读取函数内部的变量

2、让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。

3、方便调用上下文的局部变量。利于代码封装。

原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后被自动清除。

https://www.cnblogs.com/Renyi-Fan/p/11590231.html

Q：垃圾回收和内存泄露

垃圾回收

Javascript具有周期性的自动垃圾收集机制，执行环境会负责管理代码运行过程中使用的内存。

1.标记清除(mark-and-sweep)。常用的垃圾收集方式。当变量进入环境，就将这个变量标记为“进入环境”。离开环境就标记“离开环境”。

工作流程：

1）垃圾收集器在运行时给内存中的所有变量加上标记。

2）去掉环境中的变量和被环境中的变量引用的变量标记。

3）后来再加上的变量会被视为准备删除的变量。

4）销毁带标记的值并回收他们所占用的空间。

2.引用计数：

不太常用的垃圾收集策略（reference counting）。意为：跟踪记录每个值被引用的次数。

工作流程：

1）声明一个变量并将一个引用类型值赋给该变量，则这个值的引用次数为1。

2）同一个值若再次赋给另一个变量，则改值引用次数加1。

3）包含对这个值引用的变量又取得了另一个值，引用次数减1。

4）当引用次数变为0，则无法在访问这个值，就可以将其占用的内存回收回来。

5）垃圾回收器下次再运行时，释放引用次数为零的值被占用的内存。

内存泄露

对内存使用不当的话会造成内存泄露。以下这几种情况会造成内存的泄漏：

1.意外的全局变量引起的内存泄漏。

原因：全局变量，不会被回收。

解决：使用严格模式避免。

2.闭包引起的内存泄漏

原因：闭包可以维持函数内局部变量，使其得不到释放。

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3.没有清理的DOM元素引用

原因：虽然别的地方删除了，但是对象中还存在对dom的引用

解决：手动删除。

4.被遗忘的定时器或者回调

原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

解决：手动删除定时器和dom。

5.子元素存在引用引起的内存泄漏

原因：div中的ul li 得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。

解决：手动删除清空。