14万字 | 400多道JavaScript 面试题及详细答案03（建议收藏）

21.什么是暂时性死区？

暂时性死区是 JavaScript 中的一种行为，在使用 let 和 const 关键字声明变量时发生，但不使用 var 声明变量。在 ECMAScript 6 中，在其声明之前（在其范围内）访问letorconst变量会导致 ReferenceError。发生这种情况的时间跨度，即变量绑定的创建和声明之间，称为时间死区。

让我们用一个例子来看看这个行为，

function somemethod() {
  console.log(counter1); // undefined
  console.log(counter2); // ReferenceError
  var counter1 = 1;
  let counter2 = 2;
}

22.什么是IIFE（立即执行函数表达式）？

IIFE（立即调用函数表达式）是一个 JavaScript 函数，它在定义后立即运行。它的签名如下，
(function ()
    {
      // 在这里写逻辑
    }
 )
();

使用 IIFE 的主要原因是为了获得数据隐私，因为在 IIFE 中声明的任何变量都不能被外界访问。即，如果您尝试使用 IIFE 访问变量，则会引发如下错误，

(function ()
        {
          var message = "IIFE";
          console.log(message);
        }
 )
();
console.log(message); //Error: message is not defined(消息未定义)

23.使用模块有什么好处？

使用模块有利于扩展有很多好处。其中一些好处是，

可维护性

可重用性

命名空间

24.什么是memoization(记忆)？

Memoization 是一种编程技术，它试图通过缓存先前计算的结果来提高函数的性能。每次调用 memoized 函数时，都会使用其参数来索引缓存。如果数据存在，则可以返回它，而无需执行整个函数。否则执行该函数，然后将结果添加到缓存中。

让我们举一个添加记忆化功能的例子，

const memoizAddition = () => {
  let cache = {};
 return (value) => {
  if (value in cache) {
   console.log('Fetching from cache');
   return cache[value]; // 在这里， cache.value 不能用作以数字开头的属性名称，该数字不是有效的 JavaScript 标识符。 因此，只能使用方括号表示法访问。
  }
  else {
   console.log('Calculating result');
   let result = value + 20;
   cache[value] = result;
   return result;
  }
 }
}
// memoizAddition 返回的函数
const addition = memoizAddition();
console.log(addition(20)); //输出: 40 calculated
console.log(addition(20)); //输出: 40 cached

25.什么是Hoisting(变量提升)？

Hoisting是一种 JavaScript 机制，其中变量和函数声明在代码执行之前被移动到其作用域的顶部。请记住，JavaScript 只提升声明，而不是初始化。

我们举一个简单的变量提升的例子，

console.log(message); //输出: undefined

var message = 'The variable Has been hoisted';

上面的代码看起来像下面的解释器，

var message;

console.log(message);

message = 'The variable Has been hoisted';

26.ES6 中的类是什么？

在 ES6 中，Javascript 类主要是对 JavaScript 现有的基于原型的继承的语法糖。

例如，在函数表达式中编写的基于原型的继承如下，

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
Bike.prototype.getDetails = function() {
    return this.model + ' bike has' + this.color + ' color';
};

而 ES6 类可以定义为替代

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
  getDetails() {
    return this.model + ' bike has' + this.color + ' color';
  }
}

27.什么是closures(闭包)？

闭包是函数和声明该函数的词法环境的组合。即，它是一个内部函数，可以访问外部或封闭函数的变量。闭包有三个作用域链

自己的范围，其中在其大括号之间定义变量

外部函数的变量

全局变量

让我们举一个闭包概念的例子，

function Welcome(name){
  var greetingInfo = function(message){
   console.log(message+' '+name);
  }
return greetingInfo;
}
var myFunction = Welcome('Haiyong');
myFunction('Welcome '); //输出: Welcome Haiyong
myFunction('Hello Mr.'); //输出: Hello Mr.Haiyong

根据上面的代码，即使在外部函数返回之后，内部函数（即，greetingInfo）也可以访问外部函数作用域（即 Welcome）中的变量。

28.什么是modules(模块)?

模块是指独立、可重用代码的小单元，也是许多 JavaScript 设计模式的基础。大多数 JavaScript 模块导出对象字面量、函数或构造函数

29.为什么需要模块?

以下是在 javascript 生态系统中使用模块的好处

可维护性

可重用性

命名空间

⬆ 返回顶部

30.javascript中的作用域是什么?

作用域是在运行时代码的某些特定部分中变量、函数和对象的可访问性。换句话说，范围决定了代码区域中变量和其他资源的可见性。

⬆ 返回顶部

31.什么是Service Worker？

Service Worker 基本上是一个在后台运行的脚本（JavaScript 文件），与网页分离并提供不需要网页或用户交互的功能。Service Worker 的一些主要功能是丰富的离线体验（离线第一个 Web 应用程序开发）、定期后台同步、推送通知、拦截和处理网络请求以及以编程方式管理响应缓存。

⬆ 返回顶部

32.如何使用 Service Worker 操作 DOM？

Service Worker 不能直接访问 DOM。但是它可以通过响应通过postMessage接口发送的消息与它控制的页面进行通信，并且这些页面可以操作 DOM。

⬆ 返回顶部

33.你如何在 Service Worker 重新启动时重用信息？

Service Worker 的问题在于它在不使用时会被终止，并在下次需要时重新启动，因此您不能依赖 Service Worker onfetch和onmessage处理程序中的全局状态。在这种情况下，服务工作者将有权访问 IndexedDB API，以便在重新启动时保持和重用。

⬆ 返回顶部

34.什么是 IndexedDB？

IndexedDB 是用于客户端存储大量结构化数据（包括文件/blob）的低级 API。此 API 使用索引来启用此数据的高性能搜索。

⬆ 返回顶部

35.什么是 web storage？

Web 存储是一种 API，它提供了一种机制，浏览器可以通过该机制以比使用 cookie 更直观的方式在用户浏览器中本地存储键/值对。Web 存储提供了两种在客户端存储数据的机制。

本地存储：它存储当前来源的数据，没有到期日期。

会话存储：存储一个会话的数据，关闭浏览器选项卡时数据丢失。

⬆ 返回顶部

36.什么是 post message？

post message是一种启用 Window 对象之间的跨源通信的方法。（即，在页面和它产生的弹出窗口之间，或在页面和嵌入其中的 iframe 之间）。通常，当且仅当页面遵循同源策略（即页面共享相同的协议、端口号和主机）时，允许不同页面上的脚本相互访问。

⬆ 返回顶部

37.什么是 Cookie ？

你可以在这篇文章中更详细地了解Cookie ：

https://haiyong.blog.csdn.net/article/details/117837835

cookie 是存储在您的计算机上以供浏览器访问的一段数据。Cookie 保存为键/值对。

例如，您可以创建一个名为 username 的 cookie，如下所示，

document.cookie = "username=Haiyong";

38.为什么需要 Cookie ？

Cookie 用于记住有关用户个人资料的信息（例如用户名）。它基本上包括两个步骤，

当用户访问网页时，用户个人资料可以存储在 cookie 中。

下次用户访问页面时，cookie 会记住用户配置文件。

39.cookie 中有哪些选项 ？

以下选项可用于 cookie，

默认情况下，cookie 会在浏览器关闭时被删除，但您可以通过设置到期日期（UTC 时间）来更改此行为。

document.cookie = "username=Haiyong; expires=Sat, 8 Jun 2019 12:00:00 UTC";

1

默认情况下，cookie 属于当前页面。但是您可以使用路径参数告诉浏览器 cookie 所属的路径。

document.cookie = "username=Haiyong; path=/services";

40.你如何删除cookie ？

您可以通过将到期日期设置为已通过日期来删除 cookie。在这种情况下，您不需要指定 cookie 值。 例如，您可以删除当前页面中的用户名 cookie，如下所示。

document.cookie = "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";

1

注意：您应该定义 cookie 路径选项以确保您删除正确的 cookie。除非您指定路径参数，否则某些浏览器不允许删除 cookie。

41.cookie、本地存储和会话存储有什么区别 ？

以下是 cookie、本地存储和会话存储之间的一些区别，