前端面试练习24.3.4

普通问题

说一说严格模式和非严格模式

关键词：

具体：

SSL/TLS加密

很基础的重点

什么是原型链，说说相关的理解

接下来阐述什么原型：

关系：

说一说你对闭包的理解

闭包的核心概念有三个要素：

闭包的主要特点包括：

拓展：实现链式调用

说一说call apply bind的作用和区别，能手写一个吗

call:

apply

bind

手写：

说一说new会发生什么，能手写一个吗

说一说promise是什么与使用方法

Promise的作用：

Promise使用：

Promise的特点：

加分回答 Promise的其他方法：

说一说axios的拦截器原理及应用

拦截器的应用场景：

拦截器的原理

拓展：

说一说创建ajax过程

创建：

创建 XMLHttpRequest 对象：

设置请求参数：

设置回调函数：

发送请求：

拓展：

为什么使用虚拟DOM，而不操作真实DOM

vue的diff理解

Virtual DOM：

Diff 算法：

节点比较：

子节点比较：

遍历比较：

Diff 算法的优化：

Key 值：

同层比较：

什么是diff算法

TCP的三四

TCP：

过程：

HTTP和HTTPS

浏览器输入URL之后发生了什么

1.URL解析

2.DNS解析

3.TCP连接

4.发送HTTP请求

5.服务器处理请求

6.服务器发送响应

7.客户端接收并渲染

8.绘制页面

9.TCP断开连接

普通问题

说一说严格模式和非严格模式

关键词：

严格模式的使用，this指向，一些报错（delete时），eval函数的影响，变量声明

具体：

严格模式的使用，要在代码文件或函数的开头添加 'use strict';使用后JS引擎会额外的执行一些语法和规则

严格模式的 this全局环境中调用指向的是 undefined，非严格就是window

严格模式下，一些写法会报错
// 非严格模式下
var x = 10;
//delete 操作符用于删除对象的属性或数组的元素
delete x; // 在非严格模式下，delete 操作符可能会默默失败，不会报错console.log(x); // 输出：10// 严格模式下
'use strict';var x = 10;
delete x; // 在严格模式下，delete 操作符会抛出异常console.log(x); // TypeError: Cannot delete property 'x' of #<Object>
严格模式下必须使用var let const关键字对变量声明，非严格可以不使用 var 关键字声明变量，隐式创建全局变量。

eval()函数可以传入包含JS代码的字符串进行解析运行

非严格模式：eval 函数执行的代码在其执行位置的上下文中执行。
// 非严格模式下
var x = 10;function evalExample() {var y = 20;eval('var z = x + y;');console.log(z); // 输出：30，z 变量在 eval 函数内部创建，但是在 eval 函数外部可见
}evalExample();
严格模式：eval 函数执行的代码无法创建新的变量或者函数，并且执行环境被限制在 eval 函数内部。
// 严格模式下
'use strict';var x = 10;function evalExample() {var y = 20;eval('var z = x + y;');console.log(z); // 报错：ReferenceError: z is not defined，z 变量只存在于 eval 函数内部
}evalExample();

SSL/TLS加密

客户端发送支持的TLS版本和加密算法列表： 客户端向服务器发送一个Hello消息，包含支持的TLS版本和加密算法列表。

服务器选择TLS版本和加密算法： 服务器收到客户端的Hello消息后，选择与客户端相匹配的TLS版本和加密算法，并生成一个证书，包含服务器的公钥。

服务器发送证书给客户端： 服务器将包含公钥的证书发送给客户端。

客户端验证服务器证书： 客户端收到服务器的证书后，验证证书的有效性。这包括检查证书的签发机构是否受信任、证书是否过期、证书中包含的域名是否与实际域名匹配等。

客户端生成预主密钥并使用服务器公钥加密： 客户端生成一个随机的预主密钥，并使用服务器的公钥进行加密，然后将加密后的预主密钥发送给服务器。

服务器使用私钥解密预主密钥： 服务器收到客户端发送的预主密钥后，使用自己的私钥进行解密。

客户端和服务器生成主密钥： 客户端和服务器使用约定好的加密算法，以客户端发送的预主密钥和服务器解密后的预主密钥为输入，生成共享的主密钥。

客户端和服务器确认握手： 客户端和服务器互相发送消息，确认握手过程已经完成。

客户端和服务器开始安全通信： 客户端和服务器使用生成的主密钥进行安全通信，包括加密和解密数据。

很基础的重点

什么是原型链，说说相关的理解

首先要明白一点：原型存在于对象中的。

接下来阐述什么原型：

在js中，每个构造函数内部都有一个prototype属性，该属性的值是个对象，该对象包含了该构造函数所有实例共享的属性和方法。当我们通过构造函数创建对象的时候，在这个对象中有一个指针，这个指针指向构造函数的prototype的值，我们将这个指向prototype的指针称为原型。或者用另一种简单却难理解的说法是：js中的对象都有一个特殊的[[Prototype]]内置属性，其实这就是原型。

关系：

所有的引用类型（包括数组，对象，函数）都有隐性原型属性（proto）, 值也是一个普通的对象。

所有的函数，都有一个 prototype 属性，值也是一个普通的对象。

所有的引用类型的proto属性值都指向构造函数的 prototype 属性值

所以得出以下关系：

构造函数.prototype===原型

原型.constructor===构造函数

实例对象.__proto__===原型

说一说你对闭包的理解

闭包的核心概念有三个要素：

函数（Function）：闭包是一个函数，它可以执行特定的代码逻辑。
函数定义时的环境（Environment）：闭包还包含了在函数定义时所处的作用域中的变量。
函数返回值（Return Value）：闭包可以返回一个函数或者值，这取决于函数的具体实现。

闭包的主要特点包括：

记忆状态：闭包可以记住定义时的上下文信息，即使在定义之后，这些上下文已经不再存在。
封装性：闭包将变量和函数绑定在一起，形成一个封闭的单元，避免了全局变量的污染。
延迟执行：闭包中的函数可以延迟执行，等待外部条件满足后再执行。
function outerFunction(x) {// 内部函数可以访问外部函数的参数和局部变量function innerFunction(y) {return x + y; // innerFunction 可以访问 outerFunction 的参数 x}return innerFunction; // 返回内部函数
}// 创建一个闭包
var closure = outerFunction(5);// 调用闭包，传入参数 3
var result = closure(3);console.log(result); // 输出：8
拓展：实现链式调用
function fun1(x) {let total = x;function sum(value) {total += value;return sum; // 返回自身以便链式调用}sum.toString = function () {return total;}return sum;
}console.log(fun1(1)(2)(3).toString()); // 输出 6

说一说call apply bind的作用和区别，能手写一个吗

call:

用来改变调用函数的this指向，后面可以紧跟参数，立即执行

function.call(newThis,arg1,arg2...)

apply

用来改变调用函数的this指向,区别在于传递的参数是数组形式，立即执行

function.apply(newThis,[arg1,arg2...])

bind

也可以用来改变函数this指向，但是，它是返回一个新的函数，需要我们后续手动再次调用。

// 示例函数
function greet(name) {console.log(`Hello, ${name}! My name is ${this.name}.`);
}// 创建一个对象作为上下文
const context = {name: 'John'
};// 使用 call() 方法调用函数，并指定上下文和参数列表
greet.call(context, 'Alice'); // 输出: "Hello, Alice! My name is John."// 使用 apply() 方法调用函数，并指定上下文和参数数组
const args = ['Bob'];
greet.apply(context, args); // 输出: "Hello, Bob! My name is John."// 使用 bind() 方法创建一个新的绑定函数
const boundGreet = greet.bind(context, 'Charlie');// 稍后调用绑定函数
// 此时David是第二个参数，不是name,如果要显示，需要在greet函数添加后续参数
boundGreet('David'); // 输出: "Hello, Charlie! My name is John."

手写：

// 手写实现 call 方法
Function.prototype.myCall = function(thisArg, ...args) {// 判断是否传入了有效的上下文，如果传入的上下文为 null 或者 undefined，则默认为全局对象（浏览器中为 window）thisArg = thisArg || window;// 将当前函数设置为传入的上下文的属性thisArg.__fn__ = this;// 调用函数const result = thisArg.__fn__(...args);// 删除临时属性delete thisArg.__fn__;return result;
};// 手写实现 apply 方法
Function.prototype.myApply = function(thisArg, argsArray) {thisArg = thisArg || window;thisArg.__fn__ = this;// 使用扩展运算符将数组展开为参数列表const result = thisArg.__fn__(...argsArray);delete thisArg.__fn__;return result;
};// 手写实现 bind 方法
Function.prototype.myBind = function(thisArg, ...args) {const fn = this;return function(...innerArgs) {return fn.apply(thisArg, args.concat(innerArgs));};
};