前端面试题目小结 之一（精选10题）_前端技术栈有哪些 面试

let res = fun1();
// 执行12次,fn2中的变量的生命周期变长了，fun2函数中的n被外部使用了
for (let i = 0; i < 12; i++) {
  console.log(res()+"执行的第"+(i+1)+"次");
}

复制代码

### 2、原型、原型链（高频）


* **原型链**：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，这就是原型链。  ![](https://img-blog.csdnimg.cn/img_convert/0e7507b6e10690085cd11ca1a7fe40d4.webp?x-oss-process=image/format,png)
* 原型链的尽头一般来说都是`Object.prototype`所以这就是我们新建的对象为什么能够使用`toString()`等方法的原因。 `Object.prototype.toString.call([])//tostring可以返回一个精确的类型`
* **原型**：在 `JS`中，每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中每个`函数对象`都有一个`prototype` 属性，这个属性指向函数的`原型对象`


### 3、`this`指向


* 全局函数中，this指向window
* 作为对象的方法调用 this 指向调用对象
* 自定义构造函数中，this指向新的实例化对象（new 会改变 this 的指向）
* 事件绑定中this指向事件源
* 定时器函数中this指向window


### 4、`JS`继承的方式有哪些？


* 原型链的方式继承
* 借用构造函数来实现继承
* 组合继承
* `ES6`中使用`extends`和`super`关键字来实现继承


### 5、JS事件循环机制或js的执行机制？


#### [一次弄懂Event Loop]( )


`EventLoop`，就像是一个银行叫号系统，负责去找到对应任务队列中的函数，然后放入执行栈中进行调用，任务队列分为宏任务和微任务。在执行过程中，某个宏任务执行结束后，然后查看是否有微任务，如果没有，则执行下一个宏任务，以此类推直到全部执行结束。


js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制


所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步 任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程， 某个异步任务可以执行了，该任务才会进入主线程执行。


宏任务包含

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
复制代码

微任务

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
复制代码

### 请写出下段代码的输出结果（js事件循环机制）

new Promise(resolve => {
console.log(1);
setTimeout(() => console.log(2), 0)
Promise.resolve().then(() => console.log(3))
resolve();
}).then(() => console.log(4))
console.log(5)
复制代码

1 5 3 4 2


### 6、原生ajax


#### `ajax`是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。


**实现步骤**：


* 创建XMLHttpRequest对象;
* 调用open方法传入三个参数 请求方式(GET/POST)、url、同步异步(true/false);
* 监听onreadystatechange事件，当readystate等于4时返回responseText;
* 调用send方法传递参数。


### 7、事件冒泡、委托（捕获）


* 事件冒泡指在在一个对象上触发某类事件，如果此对象绑定了事件，就会触发事件，如果没有，就会向这个对象的父级对象传播，最终父级对象触发了事件。
* 事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以在父节点上定义监听函数，我们就可以到具体触发事件的元素，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。

 `event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡`


### 8、promise？（高频）


是异步编程解决的一种方案，可以浅显的认为他就是个容器，里面存放着未来才会结束的事情的结果。同时Promise也是一个对象，可以从该对象获取异步操作的消息。可以解决回调层层嵌套的问题。


#### promise有几种状态？三种


* `promise`有三种状态pending（等待）、已完成（fullled）、已拒绝（rejected）
* 一个`promise`的状态只可能从“`等待`”转到“`完成`”态或者“`拒绝`”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换


#### promise的方法有哪些？


* `promise.all`-----同时多个异步操作时，同时发生，等待最后一个结束才结束。只要有一个出错，则都获取不到

const request1 => () => axios.get()
const request2 => () => axios.get()
const request3 => () => axios.get()
const request4 => () => axios.get()
Promise.all([request1(), request2(), request3(), request4()]).then(res => {
// res中就包含了四个请求得到的结果
})
复制代码

* `promise.race`-----可以在同时多个异步操作时，同时发生，第一个结束就结束 在一些异步处理中，我们想要设置超时时间的话，xhr对象可以调用xhr.abort()让请求结束，但是其他的没有

const asyncFn = () => new Promise(() => {
// 代码
})
Promise.race([asyncFn(), new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 5000)
})])
复制代码

* Promise.reject （返回一个失败的 promise）
* Promise.resolve （返回一个成功的 promise）
* Promise.prototype.finally （无论成功还是失败都会执行 finally）
* Promise.prototype.catch （就是调用 promise 自身的 then 方法，只传入失败的回调）


#### Async和await


* sync/await是生成器函数的语法糖 async/await是基于promise实现的，他们不能用于普通的函数回调 async/await更符合同步语义 使得异步代码看起来更像同步代码 async/await与promise一样，是非阻塞的 执行async函数返回的都是promise对象


### 9、函数防抖和节流（高频---笔试+面试）


函数防抖：在规定时间内多次执行代码，只执行最后一次（按钮频繁点击时，只让最后一次生效） 函数节流：定义一个执行频率时间，在执行的过程每隔对应的频率时间执行一次（表单验证中输入内容时、滚动条事件）


平时项目中我们会直接使用`lodash`库，来解决对应的问题


* [防抖函数用法]( )
* [节流函数用法]( )

// 防抖
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}

// 节流函数
function throttle(fn, delay) {
// 记录上一次函数触发的时间
var lastTime = 0;
return function() {
// 记录当前函数触发的时间
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向问题
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log(‘scroll事件触发’ + Date.now()) }, 200)

复制代码

### 10、let；const；var区别？


#### 不同点：


作用域：


### 常用的JavaScript设计模式

* 单体模式

* 工厂模式

* 例模式

  ![](https://img-blog.csdnimg.cn/20210616215753130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

  

### 函数

* 函数的定义

* 局部变量和全局变量

* 返回值

* 匿名函数

* 自运行函数

* 闭包



  ![](https://img-blog.csdnimg.cn/20210616215826268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)