高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (8)

この記事は、JavaScript の面接での質問をいくつかまとめたもので、使用頻度の高い知識ポイントを習得するのに役立ちます。

var、let、const

3 つの違い

#違いletconstvar繰り返しの宣言繰り返し宣言することはできません。SyntaxError が報告されますconst 定数を定義します。値を変更できない変数を定数と呼びます。初期値を割り当てる必要があります。変更できないからです。 繰り返し宣言可能##ブロックレベルのスコープ#グローバル変数 (ウィンドウにマウントされている) を汚染しますか #No

所有

所有

所有されていない

No

Yes

説明
1. 変数の昇格は let と const にも存在しますが、昇格方法が異なります。

• var 変数の昇格: 変数の宣言が先頭に昇格し、値は 未定義
• let および const 変数の昇格: 変数宣言は先頭に昇格されますが、変数は 未初期化
  とマークされています。 let および const の一時的なデッド ゾーン、コード実行中の一定期間、識別子は使用できず、外側のスコープ内の変数は参照できません。
#

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

2. var によって作成されたグローバル変数 -> グローバル オブジェクトの属性、let および const -> によってグローバル スコープで宣言された変数は、グローバル オブジェクトの属性ではありません

3 定数が配列またはオブジェクトの場合、その内部要素への変更は定数への変更としてカウントされず、エラーは報告されません。定数はアドレスを指します。アドレスが変更されない場合、エラーは報告されません。

変数のプロモーションと関数のプロモーション

• 変数宣言のプロモーション

  var を通じて定義 (宣言) された変数、あなた定義ステートメントの前で
  にアクセスできますが、値は未定義です
  

• 関数宣言の促進

  function を通じて宣言された関数は、直前に呼び出すことができます。
  #値は関数本体です
  

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

変数プロモーションの演習

# #スコープとスコープ チェーン理解: コード セグメントが配置される領域。 は静的であり、

はコードの作成時に決定されます。

関数: 変数バインディングはこのスコープ 内で有効であり、変数を分離し、異なるスコープ内の同じ名前の変数と競合することはありません。
スコープ分類

グローバル スコープ

• 関数スコープ

• ブロック レベル スコープ

• スコープ チェーン: 複数のスコープがネストされているため、最も近いスコープを選択し、最初に独自のスコープ内を検索してから、最も近いスコープに移動します。

関数のスコープは宣言時に決定され、呼び出し位置とは関係ありません。

したがって、aaa() を実行するときは、まず aaa のスコープ内を検索します。 a、親スコープ ウィンドウに移動し、 a=10

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

実行コンテキスト を見つけます。現在の JavaScript 実行環境 要約: JavaScript は実行を開始するたびに、実行コンテキストで実行されます。

#グローバル実行コンテキスト: グローバル コードを実行する前にウィンドウをグローバル実行コンテキストとして決定します

• ##グローバル データの前処理

で定義されるグローバル変数

#var --> 未定義、ウィンドウのプロパティとして宣言されたグローバル関数を追加

• function --> 代入 (関数本体) 、メソッドをウィンドウとして追加

• this --> ウィンドウの割り当て

• グローバル コードの実行開始

• 関数実行コンテキスト:関数を呼び出して関数本体を実行する準備をする前に、対応する関数実行コンテキスト オブジェクトを作成します

• #ローカル データの前処理

Formalパラメータ変数 --> 割り当て (実際のパラメータ) --> 関数実行コンテキストに追加された属性

arguments (仮パラメータ リストにカプセル化された擬似配列) --> 割り当て (実際のパラメータ リスト)、に追加関数実行コンテキストの属性

var で定義されたローカル変数 –>未定義、関数実行コンテキストの属性

• function として宣言された関数に追加 –>代入 (関数body)、関数実行コンテキストとしてメソッドを追加します。
• this–>Assign value (呼び出し元関数のオブジェクト)
• 関数本体コードの実行を開始します
• 実行コンテキスト スタック
• 1. グローバル コードが実行される前に、JS エンジンはすべての実行コンテキスト オブジェクトを保存および管理するためのスタックを作成します
2. グローバル実行コンテキスト (ウィンドウ) の実行後）が決定されたら、スタックに追加（プッシュ）

3. 関数実行コンテキストが作成されたら、スタックに追加（プッシュ）

4. 現在の関数が実行された後、オブジェクトを削除しますスタックの最上位 (スタックをポップ) 5. すべてのコードが実行されると、ウィンドウ



スコープ

実行コンテキスト#のみが実行されます。 # スタックに残ります #複数の関数を定義しました 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);
})();

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

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

以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (8)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。