看看这些前端面试题，带你搞定高频知识点（八）-今日视点

本篇文章给大家整理总结一些JavaScript 面试题，带你搞定高频知识点，希望对大家有所帮助！

【资料图】

var、let、const

三者的区别

区别	let	const	var
重复声明	不能重复声明，会报SyntaxError错	const 定义常量，值不能修改的变量叫做常量，一定要赋初始值，因为不能修改。	可以重复声明
块级作用域	拥有	拥有	不拥有
会不会污染全局变量(挂载在window上)	不会	不会	会

说明 1.let和const也存在变量提升，只是提升的方式不同

var变量提升:变量的声明提升到顶部，值为undefinedlet、const变量提升: 变量声明提升到顶部，只不过将该变量标记为尚未初始化let 和 const存在暂时性死区,代码执行过程中的一段时间内，在此期间无法使用标识符，也不能引用外层作用域的变量。

let answer;function fn(){//如果此时没有将变量变量提升到这里，answer应该取外层answer的值console.log(answer); //Uncaught ReferenceError: Cannot access "answer" before initializationlet answer=42;}

2.var创建的全局变量->全局对象的属性，let和const在全局作用域声明的变量->不是全局对象的属性

3.如果常量是个数组或对象，对其内部元素修改，不算对常量的修改，不会报错。常量指向了一个地址，地址不变就不会报错。

变量提升和函数提升

变量声明升级通过var定义(声明)的变量，在定义语句之前的就可以访问到但是值是undefined

函数声明提升通过function声明的函数，在之前就可以直接调用。值是函数体

//变量提升先于函数提升,提升后被函数声明function覆盖,所以就算换了顺序也是functionfunction a(){}var a ;console.log(typeof a); //functionvar f1 = function () {    console.log(1);}function f1 () {    console.log(2);}f1() ; //1//变量提升后var f1;//变量提升function f1(){};//函数提升f1 = function () {    console.log(1);}f1() ;

变量提升练习题

作用域和作用域链

理解:一个代码段所在的区域，是静态的，在编写代码时就确定了。作用:变量绑定在这个作用域内有效，隔离变量，不同作用域下同名变量不会有冲突。作用域分类

全局作用域

函数作用域

块级作用域

作用域链:多个作用域嵌套，就近选择，先在自己作用域找，然后去就近的作用域找。

函数的作用域在声明的时候就已经决定了，与调用位置无关所以执行aaa()的时候先在aaa的作用域里面找，没有找到a，再去父级作用域window里面找，找到a=10

var a = 10; function aaa() { alert(a);}function bbb() { var a = 20; aaa();}bbb();

执行上下文

对当前JavaScript的执行环境的抽象，每当JavaScript开始执行的时候，它都在执行上下文中运行。

全局执行上下文:在执行全局代码前将window确定为全局执行上下文

对全局数据进行预处理

var定义的全局变量 --> undefined，添加为window的属性

function声明的全局函数 --> 赋值(函数体),添加为window的方法

this --> 赋值window

开始执行全局代码

函数执行上下文:在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象

对局部数据进行预处理

形参变量 --> 赋值（实参）–> 添加到函数执行上下文的属性arguments(形参列表封装成的伪数组)–>赋值(实参列表)，添加到函数执行上下文的属性var定义的局部变量–>undefined，添加为函数执行上下文的属性function声明的函数–>赋值(函数体)，添加为函数执行上下文的方法this–>赋值(调用函数的对象)开始执行函数体代码

执行上下文栈1.在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象 2.在全局执行上下文(window)确定后，将其添加到栈中(压栈) 3.在函数执行上下文创建后，将其添加到栈中(压栈) 4.在当前函数执行完成后，将栈顶的对象移除(出栈) 5.当所有的代码执行完后，栈中只剩下window

作用域	执行上下文
定义了几个函数 + 1 = 几个作用域	执行了几个函数 + 1 = 几个执行上下文
函数定义时就确定了，一直存在，不会再变化，是静态的	全局执行上下文环境实在全局作用域确定之后，js代码执行之前创建的调用函数时创建，函数调用结束被释放，是动态的

var foo = 1;function bar () {    console.log(foo);    var foo = 10;    console.log(foo);}bar();//变量提升后var foo = 1;function bar () {var foo = undefined;    console.log(foo); //undefined    foo = 10;    console.log(foo);//10}bar();

如何用ES5实现let和const

let：使用立即执行函数创造出一个块级作用域

(function(){ var a = 1; console.log("内部a:", a);})();

const1.使用立即执行函数创造出一个块级作用域。 2.对于不可变性，可以利用Object.defineProperty将变量挂载在对象上

var __const = function __const(data, value) {this.data = value // 把要定义的data挂载到某个对象，并赋值valueObject.defineProperty(this，data, { // 利用Object.defineProperty的能力劫持当前对象，并修改其属性描述符enumerable: false,configurable: false,get: function () {return value},set: function (data) {if (data !== value) { // 当要对当前属性进行赋值时，则抛出错误！throw new TypeError("Assignment to constant variable.")} else {return value}}})}//然后和立即执行函数结合(function(){ var obj = {}_const.call(obj,"a",10)})()//当执行完毕后，全局上就不会有obj，也不会有obj.a这个变量，进而实现了块级作用域的功能

代码输出题

function a(){  a.name ="aaa";  return this.name;}var b = {  a,  name:"bbb",  getName:function(){    return this.name;  }}var c =b.getName;console.log(a()); //this指向window,window上没有name,所以输出undefinedconsole.log(b.a()); //b.a 是function,b调用a函数，所以this指向b，所以输出"bbb"console.log(b.getName);//通过b调用getName，所以getName指向b,所以输出"bbb"console.log(c());//c是function，this指向window，window上没有name,所以输出undefined

数据类型

笔记链接

JS数据类型有哪些介绍一下Symbol和Bigint如何判断一个数据类型Object.prototype.toString.call() 的缺点？各个方法的原理是什么typeof(NaN) typeof(Null)手写 instanceof 方法null==undefined 和 null===undefined隐式转换规则 === 和 == 的区别map和weakmap区别map和object区别for in、for of 区别，分别对对象和数组使用问结果讲一下数组的遍历方法，filter与map的使用场景，some，every的区别map的操作原理map和forEach的区别使用迭代器实现for-of手写数组去重手写数组扁平化map和filter的区别数组的常用方法用reduce实现map

ES6 class和 ES5类的区别

ES5 function类	ES6 class
可以new可以调用	必须new调用，不能直接执行
function存在变量提升	class不存在变量提升
static静态方法只能通过类调用，不会出现在实例上

this的指向

一般函数中this的指向会在调用时向函数传递执行上下文对象中设置。以函数形式调用，指向window以方法形式调用，this指向调用的方法以构造函数的形式调用，this是新创建的对象箭头函数:本身没有this，它的this可以沿作用域链(定义时就确定了的)查找

bind、call、apply的区别与实现

apply、call、bind 函数可以改变 this 的指向。

区别	call	apply	bind
调用函数	√	√	×
参数	从第二个参数开始依次传递	封装成数组传递	从第二个参数开始依次传递

bind函数的特殊点多次绑定,只指向第一次绑定的obj对象。多次绑定，一次生效。原因:返回函数，后续bind修改的是返回函数的this

call函数的实现

//从第二个参数开始依次传入，所以接收时使用rest参数Function.prototype.call=function(obj,...args){obj = obj || window;args = args ? args : [];//给obj新增一个独一无二的属性以免覆盖原有属性    const key = Symbol()obj[key] = this;const res = obj[key](...args);delete obj[key];return res;}

apply函数的实现

Function.prototype.apply=function(obj,args){obj = obj || window;args = args ? args : [];//给obj新增一个独一无二的属性以免覆盖原有属性    const key = Symbol()obj[key] = this;const res = obj[key](...args);delete obj[key];return res;}

bind函数的实现

Function.prototype.bind=function(obj,...args){obj = obj || window;args = args ? args : [];return (...args2) => {return this.apply(obj,[...args,...args2])}}

一般函数和箭头函数

箭头函数的作用:确保函数内部的this和外部的this是一样的

箭头函数是普通函数的语法糖，书写要更加简洁

区别	一般函数	箭头函数
this指向	调用时确定	定义时确定,没有自己的this，沿着作用域链找父级的this
改变this指向	call,apply,bind	不能改变，静态
arguments	有	没有，可以用rest参数代替
作为构造函数	√	× 没有prototype属性
匿名函数	可以匿名可以不匿名	匿名函数

闭包

是什么闭包就是在函数中能够读取其他函数内部变量

function foo(){var a=2;function bar(){ //覆盖foo()内部作用域的闭包console.log(a++);}return bar;}var bar = foo(); //foo执行创建一个执行上下文环境，由于bar引用了其内部变量，也就是bar持有foo本次执行上下文的引用，foo本次的执行上下文不会被销魂bar();//2bar();//3var fn = foo(); //foo执行创建一个新的执行上下文环境，fn持有了foo本次执行上下文的引用fn();//2

有什么用1.可以读取函数内部的变量 2.使函数的内部变量执行完后，仍然存活在栈内存中(延长了局部变量的生命周期)。

JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量，而这些变量是不会随上一级函数的执行完成而销毁

常用场景:节流防抖缺点是什么1.函数执行完后，函数内的局部变量没有释放，占用内存时间会变长 2.容易造成内存泄露怎么解决及时释放:让内部函数成为垃圾对象(将闭包手动设置为null)–> 回收闭包

手写节流和防抖函数

作用是:控制回调函数触发的频率，进行性能优化参数: 控制触发频率的回调函数和时间wait 输出: 到时间后，返回callback函数

节流:在函数被频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次。一个时间段，只触发一次语法:throttle(callback, wait) 常用场景:比如拖动、滚动和输入框联想

//使用形式，绑定时候throttle函数就会执行,所以this是windowwindow.addEventListener("scroll",throttle(()=>{},500))/*思路需要记录上一次触发的时间，才可以和当前时间比较，是否超过了间隔时间第一次必然立刻触发*/function throttle(callback,wait){let pre = new Date();//这里的this是windowreturn function(...args){//这里的this是绑定的DOMconst now = new Date();if(now-pre>=wait){callback.apply(this,args);pre = now;}}}/*使用setTimeout实现第一次需要延迟delay后触发*/function throttle(callback,delay){let timer = null;//这里的this是windowreturn function(...args){if(timer){//说明已经触发了return;}timer = setTimeout(()=>{callback.apply(this,args);timer = null;},delay)}}

函数防抖:指定时间间隔内只会执行一次任务。如果在等待的过程中再一次触发了事件，计时器重新开始计时，直到达到时间后执行最后一次的回调语法:debounce(callback, wait) 常用场景: 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。

function debounce(callback,delay){let timer = null;//这里的this是windowreturn function(){if(timer){//说明已经触发了clearTimeout(timer);}timer = setTimeout(()=>{callback.apply(this,arguments);timer = null;},delay)}}//立即执行function debounce(func,delay) {  let timeout;  return function (...args) {      if (timeout) clearTimeout(timeout);      const callNow = !timeout;      timeout = setTimeout(() => {          timeout = null;      }, delay)      if (callNow) func.apply(this, args)  }}

原型和原型链

笔记链接

原型和原型链继承

JavaScript 线程机制与事件循环机制

笔记链接

内容

进程和线程进程的通信方式浏览器多进程架构如何实现浏览器多标签之间的通讯H5 Web Workers JS多线程运行浏览器的事件循环机制Node的事件循环机制node事件循环代码输出题用于理解代码输出题

DOM渲染

笔记

内容

DOM的渲染过程DOM渲染的时机与渲染进程的概述 -浏览器的渲染流程CSS、JS、DOM解析和渲染阻塞问题JS加载阻塞DOM渲染问题，怎么解决？ - 异步JS，JS三种异步加载的方式script 标签中的 async 和 defer 属性DOMContentLoaded和LoadDOM渲染优化

重绘和回流

笔记

内容

什么是重绘和回流回流和重绘触发的时机优化方案GPU加速，如何开启GPU加速JS优化减少重绘和回流的触发

setTimeout 、setInterval、requestAnimationFrame

笔记

内容

setTimeout(cb, 0)会立刻执行吗？settimeout定时的时间准确吗？为什么不准确？怎么解决？setTimeout和requestAnimation的区别requestAnimationFrame讲一下你的理解setTimeout实际延迟时间用setTimeout实现setInterval，实现一个随时停止的版本setTimeout 和 setInterval区别JS实现动画的方式requestAnimationFrame与requestIdleCallback分别是什么？requestAnimationFrame的执行时机？requestanimationframe回调函数中进行大量计算，会阻塞页面的渲染吗每隔一秒输出一个数字

观察者模式和发布订阅机制

观察者是软件设计模式中的一种，但发布订阅只是软件架构中的一种消息范式

观察者模式

观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

被依赖的对象叫做subject,依赖的对象叫做观察者Observer 。被依赖的对象首先需要提供一个添加观察者方法，以供观察者调用。所以还需要维护一个观察者列表，自身发生变化后，依次通知观察者。

//subject 被观察者class Subject {  constructor() {    this.observerList = [];  }  addObserver(observer) {    this.observerList.push(observer);  }  removeObserver(observer) {    const index = this.observerList.findIndex(o => o.name === observer.name);    this.observerList.splice(index, 1);  }  notifyObservers(message) {    const observers = this.observeList;    observers.forEach(observer => observer.notified(message));  }}//Observer 观察者class Observer {  constructor(name, subject) {    this.name = name;    if (subject) {      subject.addObserver(this);    }  }  notified(message) {    console.log(this.name, "got message", message);  }}//使用const subject = new Subject();const observerA = new Observer("observerA", subject);const observerB = new Observer("observerB");subject.addObserver(observerB);subject.notifyObservers("Hello from subject");subject.removeObserver(observerA);subject.notifyObservers("Hello again");

发布订阅机制发布者和订阅者不直接进行通信，通过事件调度中心进行管理。发布者将要发布的消息交由事件调度中心管理，订阅者也是根据自己的情况，按需订阅事件调度中心的消息。

//事件调度中心class PubSub {  constructor() {        // 存储格式: warTask: [], routeTask: []        // {订阅事件:[回调1,回调2...],订阅事件2:[回调1,回调2..]}        this.events = {}     }     // 订阅方法 订阅哪个类型type就把对应的回调函数放入      subscribe(type, cb) {         if (!this.events[type]) {            this.events[type] = [];        }        this.events[type].push(cb);     }     // 发布方法    publish(type, ...args) {        if (this.events[type]) {            this.events[type].forEach(cb => cb(...args))        }    }// 取消订阅方法 的某一个类型的某一个回调    unsubscribe(type, cb) {        if (this.events[type]) {            const cbIndex = this.events[type].findIndex(e=> e === cb)            if (cbIndex != -1) {                this.events[type].splice(cbIndex, 1);            }        }        if (this.events[type].length === 0) {            delete this.events[type];        }    }}//测试let pubsub = new PubSub();//订阅pubsub.subscribe("warTask", function (taskInfo){    console.log("宗门殿发布战斗任务，任务信息:" + taskInfo);})pubsub.subscribe("routeTask", function (taskInfo) {    console.log("宗门殿发布日常任务，任务信息:" + taskInfo);});pubsub.subscribe("allTask", function (taskInfo) {    console.log("宗门殿发布五星任务，任务信息:" + taskInfo);});//发布pubsub.publish("warTask", "猎杀时刻");pubsub.publish("allTask", "猎杀时刻");pubsub.publish("routeTask", "种树浇水");pubsub.publish("allTask", "种树浇水");

区别

类型	描述	特点
观察者模式	观察者和被观察者互相知道身份，目标直接将通知分发到观察者身上	高耦合
发布订阅机制	发布订阅机制通过事件调度中心来协调，订阅者和发布者互相不知道身份	低耦合

异步编程解决方案 Generator生成器函数 async/await、Promise

笔记链接

笔记内容

Generator生成器函数Generator生成器函数使用上的补充了解基于Promise对象的简单自动执行器iterator迭代器async/await是什么？使用场景是什么？await/async与generator函数的区别await/async内部实现原理 Generator函数和自动执行器async错误捕获方式promise概述promise知识点了解promise.then、catch、finally的原理与实现Promise.all/Promise.race/Promise.allSettled的原理和实现手写题：请求五秒未完成则终止promise实现并发的异步任务调度器

扩展运算符的原理和应用

浅拷贝和深拷贝

深浅拷贝只是针对引用数据类型区分点: 复制之后的副本进行修改会不会影响到原来的

浅拷贝：修改拷贝以后的数据会影响原数据。使得原数据不安全。(只拷贝一层)深拷贝：修改拷贝以后的数据不会影响原数据，拷贝的时候生成新数据。

浅拷贝

扩展运算符，适用于数组/对象

Aarry.prototype.concat(拷贝对象1，拷贝对象2...)数组的合并方法，将多个数组或对象拷贝进目标数组，返回新数组。

Object.assign(目标对象1,拷贝对象1,拷贝对象2.....)对象的合并方法，将拷贝对象拷贝进目标对象

深拷贝

方式一: JSON.parse(JSON.stringify())

JSON.stringify()：将JavaScript对象转换为JSON字符串JSON.parse()：可以将JSON字符串转为一个对象。

问题1: 函数属性会丢失，不能克隆方法问题2: 循环引用会出错

//循环引用:b中引用了c，c中又有bobj = {b:["a","f"],c:{h:20}}obj.b.push(obj.c);obj.c.j = obj.b;b:["a","f",{h:20,j:[]}],c:{h:20,j:["a","f",[]]}function deepClone1(target) {    //通过数组创建JSON格式的字符串    let str = JSON.stringify(target);    //将JSON格式的字符串转换为JS数据    let data = JSON.parse(str);    return data;}

方式二：递归+map递归：实现深拷贝，不丢失属性 map：存储已经拷贝过的对象，解决循环引用问题

//map存放已经拷贝过的对象，key为需要拷贝的对象，value为拷贝后的对象function deepClone(target,map=new Map()){//1.判断是否是引用类型if(typeof target === "object" && target !==null ){if(map.has(target))return map.get(target); //说明已经拷贝过了let isArr = Array.isArray(target);let res = isArr?[]:{};map.set(target,res)if(isArr){//拷贝的是数组target.forEach((item,index) => {res[index] = deepClone(item,map);});}else{//拷贝的是对象Object.keys(target).forEach(key=>{res[key]=deepClone(target[key],map);})} return res; //返回的是一个数组或对象}else{return target;}}//测试console.log(deepClone([1,[1,2,[3,4]]]))