Jetez un œil à ces questions d'entretien préliminaires pour vous aider à maîtriser les points de connaissances à haute fréquence (8)

Cet article résume pour vous quelques questions d'entretien JavaScript et vous aide à maîtriser les points de connaissances à haute fréquence. J'espère qu'il sera utile à tout le monde !

var, let, const

La différence entre les trois

Explication
1. La promotion de variable existe également pour let et const, mais les méthodes de promotion sont différentes

• var variable promotion : la déclaration de la variable est promue en haut, et la valeur est undefined undefined
• let、const变量提升: 变量声明提升到顶部，只不过将该变量标记为尚未初始化
  let 和 const存在暂时性死区
let, promotion de variable const : la déclaration de variable est promue vers le haut, mais la variable est marquée comme Pas encore initialisée

Il y a une zone morte temporaire pour let et const. Pendant une période de temps pendant l'exécution du code, ici les identifiants ne peuvent pas être utilisés pendant cette période et les variables dans les portées externes ne peuvent pas être référencées.

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

2. Variables globales créées par var -> attributs de l'objet global, variables déclarées dans la portée globale par let et const -> pas les attributs de l'objet global

3 Si la constante est un tableau ou un objet, La modification des éléments internes ne compte pas comme une modification des constantes et aucune erreur ne sera signalée. La constante pointe vers une adresse et aucune erreur ne sera signalée si l'adresse reste inchangée.

Promotion de variable et promotion de fonction

• 
  
  Mise à niveau de la déclaration de variable

  Les variables définies (déclarées) via var sont accessibles avant l'instruction de définition
Mais la valeur n'est pas définie

• 
  
  Promotion de la déclaration de fonction Fonctions déclarées via la fonction peut être appelée directement avant. La valeur est le corps de la fonction. ça .

  Fonction :
La liaison de variable est valide dans cette portée

, isole les variables et il n'y aura aucun conflit avec les variables du même nom dans différentes portées.

Classification de la portée

Portée globalePortée de la fonction

Portée au niveau du bloc

Chaîne de portées : plusieurs portées sont imbriquées, choisissez la plus proche, trouvez-la d'abord dans votre propre portée, puis allez au télescope le plus proche pour le trouver.

• La portée de la fonction est déjà déterminée lorsqu'elle est déclarée, quel que soit l'emplacement appelant
  Ainsi, lors de l'exécution de aaa(), recherchez d'abord dans la portée de aaa, si a n'est pas trouvé, puis accédez à la portée parent window Find, find a=10

//变量提升先于函数提升,提升后被函数声明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() ;

Le contexte d'exécution

• est une abstraction de l'environnement d'exécution JavaScript actuel. Chaque fois que JavaScript commence à s'exécuter, il s'exécute dans le contexte d'exécution.

Contexte d'exécution global : déterminez window comme contexte d'exécution global avant d'exécuter le code global

Prétraitez les données globales

Variables globales définies par var --> non définies, ajoutées en tant qu'attribut de window

fonction déclarée fonction globale --> Assignation (corps de la fonction), ajouter comme méthode de fenêtre

this --> Fenêtre d'affectation

Démarrer l'exécution du code global

• contexte d'exécution de la fonction : Avant d'appeler la fonction et préparez-vous à exécuter le corps de la fonction, créez l'objet de contexte d'exécution de fonction correspondant

• pour prétraiter les données locales

• variable de paramètre formel --> Affectation (paramètre réel) –>
• arguments (pseudo-tableau encapsulé dans la liste formelle des paramètres) -> Assignation (liste des paramètres réels), ajouté aux propriétés du contexte d'exécution de la fonction
  Variables locales définies par var -> non défini, ajouté en fonction Attributs du contexte d'exécution
• fonction déclarée –> affectation (corps de la fonction), ajouter une méthode pour le contexte d'exécution de la fonction
  this–> affectation (objet de la fonction appelante)

Commencer à exécuter le code du corps de la fonction

Pile de contexte d'exécution

• 1. Avant que le code global ne soit exécuté, le moteur JS créera une pile pour stocker et gérer tous les objets de contexte d'exécution
2. Une fois le contexte d'exécution global (fenêtre) déterminé, ajoutez-le à la pile (push it) )
• 3. Une fois le contexte d'exécution de la fonction créé, ajoutez-le à la pile (push)
4. Une fois la fonction actuelle exécutée, supprimez l'objet en haut de la pile (pop-le)
• 5. Quand tout est terminé le code est exécuté Après cela, seule la fenêtre
scope
contexte d'exécution

défini plusieurs fonctions + 1 = plusieurs scopes

exécuté plusieurs fonctions + 1 = plusieurs Le contexte d'exécution

Différence	let	const	var
Déclaration en double	Impossible de faire déclarations répétées, SyntaxError sera signalé	const Définir des constantes. Les variables dont les valeurs ne peuvent pas être modifiées sont appelées constantes. Elles doivent se voir attribuer une valeur initiale car elles ne peuvent pas être modifiées. "Peut être déclaré à plusieurs reprises"

est déterminé lorsque la fonction est définie. Il existe toujours et ne changera plus. .

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类的区别

Le contexte d'exécution global est créé après la détermination de la portée globale. Il est créé avant l'exécution du code js. la fonction est appelée. Elle est libérée une fois l'appel terminé, ce qui est dynamique

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高级教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!