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.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...
随机推荐
- 痞子衡嵌入式:借助i.MXRT10xx系列INIT_VTOR功能可以缩短程序热重启时间
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是借助i.MXRT10xx系列INIT_VTOR功能可以缩短程序热重启时间. 最近痞子衡写了篇文章 <i.MXRT从Serial N ...
- 用Python语言进行多元时间序列ARIMAX模型分析
1.ARIMAX模型定义 ARIMAX模型是指带回归项的ARIMA模型,又称扩展的ARIMA模型.回归项的引入有利于提高模型的预测效果.引入的回归项一般是与预测对象(即被解释变量)相关程度较高的变量. ...
- Web攻防--xxe实体注入
web攻防--xxe实体注入 漏洞简介 XML 外部实体注入(也称为 XXE)是一种 Web 安全漏洞,允许攻击者干扰应用程序对 XML 数据的处理.它通常允许攻击者查看应用程序服务器文件系统上的文件 ...
- .NET Core多线 (5) 常见性能问题
合集:.NET Core多线程温故知新 .NET Core多线程(1)Thread与Task .NET Core多线程(2)异步 - 上 .NET Core多线程(3)异步 - 下 .NET Core ...
- Go/C++/Java中的数组对比
数组是大多数编程语言中的基本数据结构.然而,不同的编程语言对数组的实现和语义有所不同.以下是 Go.C++ 和 Java 中数组的主要区别: 1. 基本性质 Go: 数组是值类型.赋值或将数组传递给函 ...
- .NET爬取美图官网首页数据实战
前言: 在当今信息化社会,网络数据分析越来越受到重视.而作为开发人员,掌握一门能够抓取网页内容的语言显得尤为重要.在此篇文章中,将分享如何使用 .NET构建网络抓取工具.详细了解如何执行 HTTP 请 ...
- [ABC151E] Max-Min Sums
2023-03-11 题目 题目传送门 翻译 翻译 难度&重要性(1~10):5 题目来源 AtCoder 题目算法 数学 解题思路 对于一个正数 \(x,x\in A\) 一定会有 \(C_ ...
- PhotoShop Beta(爱国版)安装教程-内置AI绘画功能
PS beta版安装教程 Window和Mac版都有,里面内置AI绘画功能 ps Beta版真的太爽了,今天来和大家分享下安装教程. 很多人拿这资料卖5块 9.9 19.9,球友们直接用,建议赶紧装, ...
- 一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 问题现象 7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值8 ...
- 使用API接口获取商品数据
在当今的数字化时代,商品数据的获取对于各种规模的企业来说都至关重要.这些数据可以帮助企业进行市场分析,制定销售策略,优化库存管理,以及实现精准营销.API(应用程序编程接口)是一种便捷的方式来获取 ...