2021年前端面试题——JS
目录:
DOM事件流有那些阶段?
通常,我们将DOM事件流向分为三个阶段:捕获阶段,目标阶段,冒泡阶段。
- 捕获阶段是指事件响应从最外层的Window开始,逐级向内层前进,直到具体事件目标元素。在捕获阶段,不会处理响应元素注册的冒泡事件。
- 目标阶段指触发事件的最底层的元素。
- 冒泡阶段与捕获阶段相反,事件的响应是从最底层开始一层一层往外传递到最外层的Window。
解释事件冒泡以及如何阻止它?
事件由具体的dom节点接收,然后这个事件顺着嵌套顺序在父元素上触发。
防止事件冒泡的一种方法是使用 event.stopPropagation()或 event.cancelBubble (低于 IE 9)。
事件委派/事件委托是什么?
事件委派/事件委托适用于未来的元素(动态添加的元素)
利用事件冒泡,将后代元素上事件的处理程序委派给祖先元素。
参考:事件委派的使用及作用
如何理解 JS 中的this关键字?
上下文环境:全局上下文、函数上下文
- 全局函数:this 指向 window 对象
- 作为对象的方法:当函数作为对象的方法调用时,它的
this值是调用该函数的对象。(箭头函数除外) - 作为构造函数:函数作为构造函数,那函数当中的 this 便 new 出来的对象
- 函数调用 apply、call、 bind 时: this 的值就取传入对象的值 (与 apply、call 不同,使用 bind 只会改变一次this的值,无论之后怎么调用)
- 箭头函数:this 的值与创建箭头函数的上下文的 this 一致
也可以用简洁的方式来回答:
- ES5中:this 永远指向最后调用它的那个对象
- ES6箭头函数:箭头函数的 this 始终指向函数定义时的 this,而非执行时。
更改this指向的方法有那些?
- 使用 ES6 的箭头函数
- 在函数内部使用 _this = this
- 使用 apply、call、bind
- new 实例化一个对象
apply、call、bind 区别?
apply 和 call 的区别
其实 apply 和 call 基本类似,他们的区别只是传入的参数不同。
call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面
apply 的所有参数都必须放在一个数组里面传进去
bind与apply、call最大的区别就是:bind不会立即调用,其他两个会立即调用
参考:JavaScript 中 call()、apply()、bind() 的用法、更改this指向的方法及其区别
讲讲JavaScript 作用域
全局作用域:定义在所有函数之外的变量,其作用范围是在整个脚本中
局部作用域(函数作用域):使用var定义在函数内部的变量,其作用范围是整个函数结构,超出函数 {} 花括号的范围则不能使用。
块级作用域:ES6声明变量的方式:let / const 在变量声明的代码段之外是不可见的
参考:JS作用域与声名提升
js函数声明三种方式
//(1) Function()构造器
var f =new Function()
//(2) 函数声明
function f (){
console.log(2);
}
//(3) 函数表达式
var f = function() {
console.log(1);
}
参考:1-1 声明
js变量声明
var、let、const
var声明的变量会挂载在window上,而let和const声明的变量不会
var声明变量存在变量提升,let和const不存在变量提升(严格来说,let也存在)
let和const声明形成块作用域存在暂存死区
const声明必须赋值
参考:1-1 声明、较详细的:JS声明变量的六种方式
拓展:如果用 const 声明一个对象,改变对象中某个属性的值会发生什么?
如图:

为什么 对象中的b的值变了?如果换成直接给 a={b:3}可以吗?

为什么会报错?
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。JS的数据类型有哪些?
基本类型:
- string(字符串)--原始类型
- boolean(布尔值)--原始类型
- number(数字)--原始类型
- symbol(符号)--原始类型
- null(空值)undefined(未定义)
- BigInt(BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值,精度在(2^53-1)范围内,BigInt(10)值为:10n)
对象类型(引用类型):Array - - (数组)、Function - - (函数)、Date - - (时间)等
参考:1-2 数据类型的分类:、JavaScript的数据类型详细介绍
如何判断JS变量的数据类型?
typeof:只能判断string、boolean、number、null、symbol
instanceof:判断对象类型:测试构造函数的 prototype 是否出现在被检测对象的原型链上
延展:为什么typeof null为object?
js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息,而 000代表对象,null的所有机器码均为0,所以,typeof 在判断 null 的时候就出现问题了,由于null 的所有机器码均为0,因此直接被当做了对象来看待。
参考:1-3 数据类型的判断:
什么是闭包?
闭包指的是能够访问另一个函数作用域的变量的函数。
闭包就是一个函数,这个函数能够访问其他函数的作用域中的变量。
闭包经典理解
- 由于var 变量的提升,循环的时候赋值都是用一个i;
- 因为setTimeout为宏任务,由于JS中单线程eventLoop机制,在主线程同步任务执行完后才去执行宏任务,因此循环结束后 才执行setTimeout,但输出i的时候当前作用域没有,往上一级再找,发现了i,此时循环已经结束,i变成了10;
- 使用let可以解决 let形成块级作用域不会提升
for (var i = 0; i < 10; i++) {
//这个时候 i已经 = 10了 var i提升 每次进行赋值都是同一个i;
setTimeout(() => {
console.log(i);// 打印10个10
}, 1000)
}
「使用闭包 」
for (var i = 0; i < 10; i++) {
((i) => {
setTimeout(() => {
console.log(i);//打印0-9
}, 1000)
})(i)
}
优点:避免全局变量的污染、希望一个变量长期存储在内存中(缓存变量)
缺点:内存泄露(消耗)、常驻内存,增加内存使用量
参考:4 闭包、闭包到底是什么?、闭包的概念?优缺点?、破解前端面试(80% 应聘者不及格系列):从闭包说起
谈谈你对JavaScript原型,原型链的理解
prototype:构造函数的原型对象
原型链:JS在创建对象的时候,会在新对象上产生一个__proto__的属性,这个属性指向了它构造函数的原型的prototype。由此一级一级向上直到到达Object.prototype.proto === null的这个链条我们称之为原型链。
谈谈你对面向对象编程思想的理解,它有什么特点?
面向对象编程是一种解决软件复用的设计和编程方法。 这种方法把软件系统中相近相似的操作逻辑和操作 应用数据、状态,以类的型式描述出来,以对象实例的形式在软件系统中复用,以达到提高软件开发效率的作用。
面向对象的理解:
面向对象是一种设计思想
- 符合人们的思考习惯
- 把执行者变成指挥者
- 简化功能,把复杂的事情简单化
面向对象有三大特征:、封装、继承、多态
什么是封装?
类是一种封装,将属性和方法封装。
函数也是一种封装,将具有一定共的逻辑代码封装到一个函数中,使用的时候调用即可
什么是继承?
js 执行机制、事件循环
同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入 Event Table 并注册函数。当指定的事情完成时,Event Table 会将这个函数移入 Event Queue。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的函数,进入主线程执行。上述过程会不断重复,也就是常说的 Event Loop(事件循环)。
主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为 Event Loop(事件循环)。只要主线程空了,就会去读取"任务队列",这就是 JavaScript 的运行机制。
参考:js 执行机制、事件循环
拓展:宏任务、微任务
宏任务:整体代码 script,setTimeout,setInterval
微任务:Promise,process.nextTick
我们知道setTimeout这个函数,是经过指定时间后,把要执行的任务(本例中为task())加入到Event Queue中,又因为是单线程任务要一个一个执行,
如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于你定义的延时时间。https://juejin.cn/post/6844903512845860872#heading-1
我们还经常遇到setTimeout(fn,0)这样的代码,0秒后执行又是什么意思呢?是不是可以立即执行呢?
答案是不会的,setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,意思就是不用再等多少秒了,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。
同步和异步的区别?
异步:客户端与服务器请求数据的过程中,可以做其他的事情
同步:客户端与服务器请求数据的过程中,不能做其他的事情
参考:同步和异步的区别?
对前端性能优化有什么了解?一般都通过那几个方面去优化的?
前端性能优化的七大手段
- 减少请求数量
- 减小资源大小
- 优化网络连接
- 优化资源加载
- 减少重绘回流
- 性能更好的API
- webpack优化
参考:对前端性能优化有什么了解?一般都通过那几个方面去优化的?
JavaScript的数组的常用方法
向数组添加元素的方法:
- Array.push:向数组的末尾追加 返回值是添加数据后数组的新长度,改变原有数组
- Array.unshift:向数组的开头添加 返回值是添加数据后数组的新长度,改变原有数组
- splice:向数组的指定index处插入 返回的是被删除掉的元素的集合,会改变原有数组
向数组删除元素的方法:
- pop():从尾部删除一个元素 返回被删除掉的元素,改变原有数组
- shift():从头部删除一个元素 返回被删除掉的元素,改变原有数组
- splice:在index处删除howmany个元素 返回的是被删除掉的元素的集合,会改变原有数组
数组排序的方法:
- reverse():反转,倒置 改变原有数组
- sort():按指定规则排序 改变原有数组
参考:JavaScript的数组的常用方法(一)、js常用数组方法
持续更新呦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
2021年前端面试题——JS的更多相关文章
- 2021年前端面试题-HTML篇
1.<img>的title和alt有什么区别? 1.alt:图片加载失败时,显示在网页的替代文字 2.title:鼠标放在上面时显示的文字 3.alt是必要属性,title非必要 2.WE ...
- 前端面试题 -- JS篇
前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...
- 前端面试题(js)
js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...
- 微信前端面试题----js实现LazyMan
这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...
- 前端面试题 | JS部分(附带答案)
目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...
- 前端面试题-----js和jquery的区别是什么?
最近我有一个朋友问我js和jquery的区别是什么,于是我打算写一篇文章说下到底有什么区别. 首先你要知道: 1.js是网页的脚本语言,记住哈,js是语言! 2.jquery是用js语言写出来的一个框 ...
- 2019年前端面试题 | CSS篇 (更新于4月15日)
虽说刷面试题有走捷径之嫌,但我发现,对于我这样没有工作经历的人来说,其实是拓展自己实战技能和加深知识理解的一个好机会. 分享出来,也希望大家不要背完了事,正经的去细细琢磨各种原由. 本篇是一个题目合集 ...
- 某一线互联网公司前端面试题js部分总结
js部分 1,使用严格模式的优点 - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度 ...
- 常见前端面试题JS部分
1.闭包 2.JS操作和获取cookie //创建cookie function setCookie(name, value, expires, path, domain, secure) { var ...
- 前端面试题(js部分)
一.==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...
随机推荐
- 洛谷 P1336 最佳课题选择 题解
P1336 最佳课题选择 题解 状态:考虑\(f_{i,j}\)表示前\(i\)种论文里面,一共写了\(j\)篇,的最少花费时间. 转移策略:我们一次考虑每一种论文写多少篇.假设写\(k\)篇,\(k ...
- [nginx]编译安装openresty
前言 OpenResty是一个基于Nginx和Lua的高性能Web平台,其内部集成了大量精良的Lua库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极高的动态 Web 应用.W ...
- [minio]挂载minio到本地
前言 将minio的bucket挂载到本地文件系统 环境 客户端系统版本:centos 7 MinIO节点IP:192.168.0.20 s3fs方式步骤 安装s3fs客户端(可能需要先安装epel- ...
- 知识图谱(Knowledge Graph)- Neo4j 5.10.0 使用 - Java SpringBoot 操作 Neo4j
上一篇使用了 CQL 实现了太极拳传承谱,这次使用JAVA SpringBoot 实现,只演示获取信息,源码连接在文章最后 三要素 在知识图谱中,通过三元组 <实体 × 关系 × 属性> ...
- trino on yarn
一.前言 最近在研究trino on yarn 功能,网上大部分都是关于presto on yarn文章,关于trino on yarn 资料很少,但是本质上差不多,需要修改一些内容比,主要在调试方面 ...
- LeetCode952三部曲之一:解题思路和初级解法(137ms,超39%)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 题目描述 难度:困难 编程语言:Java 给定一个由不 ...
- [译]这几个CSS小技巧,你知道吗?
前言 在网页设计和前端开发中,CSS属性是非常重要的一部分.掌握常用的CSS属性不仅可以使你的网页看起来更美观,还能提升用户体验,今天小编为大家介绍8个常见的CSS小技巧: 1.修改滚动条样式 下图是 ...
- JAVA-Springboot实践项目-用户注册
Smiling & Weeping ----我本没喜欢的人, 见你的次数多了, 也就有了. 1.创建数据表 1.1.选中数据表: use store 1.2.创建t_user表: 2创建用户实 ...
- 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(4) -- 实现DataGrid数据的导入和导出操作
在我们设计软件的很多地方,都看到需要对表格数据进行导入和导出的操作,主要是方便客户进行快速的数据处理和分享的功能,本篇随笔介绍基于WPF实现DataGrid数据的导入和导出操作. 1.系统界面设计 在 ...
- VOLTE:MIUI14无5G信号、通话质量差、短信收不到的原因之一
在最近一次miui版本更新后的一段时间里,先后出现以下一些情况: 1. 在"双卡与移动网络"设置中,无论如何折腾"5G网络"开关或者"5G网络模式选择 ...