Take a look at these front-end interview questions to help you master high-frequency knowledge points (8)

This article summarizes some JavaScript interview questions for you, and helps you to master high-frequency knowledge points. I hope it will be helpful to everyone!

##var, let, const

The difference between the three

DIFFERENCEletconstvarRepeated declarationCannot be declared repeatedly, a SyntaxError will be reportedconst Define constants. Variables whose values ​​cannot be modified are called constants. They must be assigned an initial value because they cannot be modified. Can be declared repeatedly##Block-level scopeWill it pollute global variables (mounted on the window)

Explanation
1. Variable promotion also exists for let and const, but the promotion methods are different

• var variable promotion: the declaration of the variable is promoted to the top, and the value is undefined
• let and const variable promotion: the variable declaration is promoted to the top, but the variable is marked as Not yet initialized
  There is a temporary dead zone for let and const, During a period of time during code execution, identifiers cannot be used and variables in the outer scope cannot be referenced.

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

2. Global variables created by var -> attributes of the global object, variables declared in the global scope by let and const -> are not attributes of the global object

3 .If the constant is an array or object, modifications to its internal elements are not counted as modifications to the constant, and no error will be reported. The constant points to an address, and no error will be reported if the address remains unchanged.

Variable promotion and function promotion

• Variable declaration promotion
  Variables defined (declared) through var, You can access
  before the definition statement, but the value is undefined

• Function declaration promotion
  Functions declared through function can be called directly before.
  The value is the function body

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


var f1 = function () {
    console.log(1);
}
function f1 () {
    console.log(2);
}
f1() ; //1
//变量提升后
var f1;//变量提升
function f1(){};//函数提升
f1 = function () {
    console.log(1);
}
f1() ;

Variable promotion exercises

Scope and scope chain

Understanding: The area where a code segment is located, is static, and is determined when writing the code.
Function: Variable binding is valid within this scope , isolates variables, and there will be no conflict with variables with the same name in different scopes.
Scope classification

• Global scope

• Function scope

• Block level Scope

Scope chain: Multiple scopes are nested, choose the nearest one, first search in your own scope, and then go to the nearest scope.

The scope of the function is determined when it is declared, and has nothing to do with the calling position
So when executing aaa(), first search in the scope of aaa, but it is not found. a, then go to the parent scope window and find a=10

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

execution context

for the current JavaScript execution environment Abstract: Whenever JavaScript starts executing, it runs in an execution context.

• Global execution context: Determine window as the global execution context before executing global code

##Preprocess global data# Global variables defined by

##var --> undefined, add global functions declared as properties of window
function --> Assignment (function body) , add method as window
this --> Assign window
Start executing global code
Function execution context: Before calling the function and preparing to execute the function body, create the corresponding function execution context object

Preprocess local data

Formal parameter variables--> Assignment (actual parameters)–> Attributes added to the function execution context

• arguments (pseudo array encapsulated into a formal parameter list)–> Assignment (actual parameter list), added to the local variable defined by the attribute
• var of the function execution context –>undefined, added to the function declared as the attribute
• function of the function execution context –> assignment (Function body), add a method as the function execution context
• this–>Assign value (the object of the calling function)
• Start executing the function body code

Execution context stack

1. Before the global code is executed, the JS engine will create a stack to store and manage all execution context objects 2. After the global execution context (window) is determined, the Add it to the stack (push)
3. After the function execution context is created, add it to the stack (push)
4. After the current function is executed, remove the object on the top of the stack (Pop the stack)
5. When all the code is executed, only the window

owned	owned	not owned
No	No	Yes

scope#Defined several functions 1 = several scopesExecuted several functions 1 = several execution contextsIt is determined when the function is defined. It always exists and will not change again. It is staticThe global execution context is created after the global scope is determined and before the js code is executed.

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);
})();

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

var __const = function __const(data, value) {
	this.data = value // 把要定义的data挂载到某个对象，并赋值value
	Object.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,所以输出undefined
console.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类的区别

execution context## is left on the stack
It is created when the function is called and is released after the function call is completed. It is dynamic

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();//2
bar();//3
var fn = foo(); //foo执行创建一个新的执行上下文环境，fn持有了foo本次执行上下文的引用
fn();//2

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

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

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

手写节流和防抖函数

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

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

//使用形式，绑定时候throttle函数就会执行,所以this是window
window.addEventListener('scroll',throttle(()=>{},500))

/*
思路
需要记录上一次触发的时间，才可以和当前时间比较，是否超过了间隔时间
第一次必然立刻触发
*/
function throttle(callback,wait){
	let pre = new Date();
	//这里的this是window
	return function(...args){
		//这里的this是绑定的DOM
		const now = new Date();
		if(now-pre>=wait){
			callback.apply(this,args);
			pre = now;
		}
	}
}


/*
使用setTimeout实现
第一次需要延迟delay后触发
*/
function throttle(callback,delay){
	let timer = null;
	//这里的this是window
	return 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是window
	return 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和Load
• DOM渲染优化

重绘和回流

笔记

内容

• 什么是重绘和回流
  • 回流和重绘触发的时机
• 优化方案
  • 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中又有b
obj = {
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]]]))

commonJS和ES6模块化

笔记链接

内容

• commonJs实现原理
• 模块执行的原理
• require模块加载原理
• ES6 module的特性
• import() 函数 动态引入
• commonJs和es module的区别

【推荐学习：javascript高级教程】

The above is the detailed content of Take a look at these front-end interview questions to help you master high-frequency knowledge points (8). For more information, please follow other related articles on the PHP Chinese website!