笔记整理4.21

最新推荐文章于 2025-08-01 15:01:36 发布

原创最新推荐文章于 2025-08-01 15:01:36 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #笔记 #面试

experience 专栏收录该内容

2 篇文章

订阅专栏

文章目录

1.BFC

块级格式化上下文

决定了对本身内容如何定位排列及对其他元素的关系，可以看做是一个css的元素属性，块级元素，独立容器，外边距会重叠，它可以解决使用Float脱离文档流，高度塌陷，Margin边距重叠，两栏布局遮挡问题。

举例触发BFC使用的CSS属性：

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

2.三栏布局

两端固定，中间自适应的一种页面布局

1）左右浮动，中间形成BFC

2）双飞翼布局：（如果中间内容需要优先加载，把中间盒子排在第一）

左、中、右三栏都设置为左浮动
中间栏宽度设置为100%
通过设置左右两栏的margin-left负边距，让三栏保证在同一行

3）圣杯布局：

父级元素分别设置左右外边距，给左右两栏留出空间
左中右三栏分别设置左浮动
中间栏设置宽度100%
左边栏设置左负边距-100%加定位，右边距通过负边距和定位来实现在最右边的效果

4）Flex 布局：

父元素设置成弹性盒子，左右设宽，中间设置flex:1

3.Object.prototype.toString.call()

Object原型上的toString方法作用在传入的obj的上下文中（通过call将this指向obj）

在基础Object类的时候重写了toString（）方法，所以不能直接使用数组上的toString方法

// 定义一个数组
var arr = [1, 2, 3]

// 数组原型上是否具有 toString() 方法
console.log(Array.prototype.hasOwnProperty('toString')) //true

// 数组直接使用自身的 toString() 方法
console.log(arr.toString()) // '1,2,3'

// delete操作符删除数组原型上的 toString()
delete Array.prototype.toString

// 删除后，数组原型上是否还具有 toString() 方法
console.log(Array.prototype.hasOwnProperty('toString')) //false

// 删除后的数组再次使用 toString() 时，会向上层访问这个方法，即 Object 的 toString()
console.log(arr.toString()) // '[object Array]'

4.作用域和作用域链

作用域：

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。作用域最大的用处就是隔离变量，不同作用域下的同名变量不会有冲突。

ES6之前JavaScript，没有块级作用域，只有全局作用域和函数作用域。ES6的到来，为我们提供了“块级作用域”，可通过let和const来体现。

作用域链：

访问变量时，自己的作用域中没有，一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃，这种一层一层的关系，就是作用域链。

5.js的继承和优缺点

eg：

原型链继承：

最简单的方式，将子类的原型指向父类的实例即可。

构造函数继承：

在子类构造函数中调用父类构造函数，可以在子类构造函数中使用call()和apply()方法改变this指向

ES6 class继承

参照寄生组合继承,基本原理是一样,语法糖

[https://blog.youkuaiyun.com/qq_56088882/article/details/125823829]:

6.请求方式xhr、ajax、fetch与axios对比

1）xhr

现代浏览器，最开始与服务器交换数据，都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。

优点：

不重新加载页面的情况下更新网页
在页面已加载后从服务器请求/接收数据
在后台向服务器发送数据。

缺点：

使用起来也比较繁琐，需要设置很多值。
早期的IE浏览器有自己的实现，这样需要写兼容代码。

2）Ajax

为了更快捷的操作 DOM，并且规避一些浏览器兼容问题，产生了jQuery。它里面的AJAX请求也兼容了各浏览器，可以有简单易用的方法.get.post。简单点说，就是对XMLHttpRequest对象的封装。

优点：

对原生XHR的封装，做了兼容处理，简化了使用。
增加了对JSONP的支持，可以简单处理部分跨域。

缺点：

如果有多个请求，并且有依赖关系的话，容易形成回调地狱。
本身是针对MVC的编程，不符合现在前端MVVM的浪潮。
ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。

3）fetch

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案，fetch函数就是原生的js，没有使用XMLHttpRequest对象

优点：

跨域的处理，在配置中，添加mode： 'no-cors’就可以跨域了

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式

缺点：

fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项。
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
fetch没有办法原生监测请求的进度，而XHR可以。

4）axios

axios 是一个基于 promise 的HTTP库，可以用在浏览器和 node.js 中。它本质也是对原生 XMLHttpRequest 的封装，只不过它是 Promise 的实现版本，符合最新的ES规范。

优点：

从浏览器中创建XMLHttpRequests
可在 node.js 中使用
支持 Promise API
提供了并发请求的接口
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

缺点：

只支持现代浏览器.

7.事件循环event loop，宏任务与微任务

JavaScript 是一门单线程的语言，它的异步和多线程的实现是通过 Event Loop 事件循环机制来实现的。

什么是宏任务和微任务

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

event loop刚开始时会从全局栈的代码开始一行一行执行遇到函数调用就把函数压入调用栈中，被压入的函数叫做帧，当函数返回后会从调用栈中弹出，JavaScript中的异步操作fetch、事件回调、settimeout、setinterval中的函数会入队到消息队列中，称为消息，当调用栈清空的时候，消息队列将消息压入调用栈中执行，只有promise、async、await创建的异步操作会加入到微任务中，它会在调用栈清空的时候执行，并且处理期间新加入的微任务也会一同执行

请添加图片描述

8.Diff算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

有两个特点：
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较
https://blog.youkuaiyun.com/weixin_44187983/article/details/126520560

9.ES6模块和CommonJS模块的区别

CommonJS规范->AMD规范->CMD规范->官方ES6模块化

CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用

CommonJS模块是运行时加载，ES6模块是编译时输出接口

因为CommonJS的require语法是同步的，所以就导致了CommonJS模块规范只适合用在服务端，而ES6模块无论是在浏览器还是服务端都可以使用

在NodeJS中，两种模块方案是分开处理的

10.如何在JavaScript中实现不可变对象（数据）

深克隆，但是深克隆的性能⾮常差，不适合⼤规模使用

1、使用JSON.stringify()以及JSON.parse()

2、通过for in实现

**3、递归 **（判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝）

4.concat（数组的深拷贝）
Immutable.js，Immutable.js 性能良好，但是需要学习额外的API
immer，利用Proxy特性，⽆需学习额外的api，性能良好