2021前端面试题-JS篇

JavaScript017

2021前端面试题-JS篇,第1张

```

当查找一个对象的某个属性时,会先从它自身的属性上查找,

如果找不到的话会从它的_proto_属性上查找,就是这个构造函数的prototype属性,

如果还没找到就会继续在_proto_上查找,直到最顶层,找不到则为undefined,

像这样一层一层去查找形成一个链式的称为原型链

```

new一个函数,中间发生了什么

1.开辟一个内存空间,也就是创建一个空对象,obj={}或obj=new Object()

2.将这个新对象的_proto_属性指向它构造函数的prototype

3.将构造函数this绑定为这个新对象,在空对象上挂在属性和方法(call或apply方式)

4.返回这个新对象

相同:都是改变函数上下文this指向

不同:bind返回的是一个函数,不会立即执行

         传参的不同 apply第二个参数为数组形式

         call apply都是对函数的直接调用

1.作为普通函数直接调用,this指向window

2.作为对象方法去调用的话,this指向调用它的这个对象

3.箭头函数,没有this,this取决于外层离它最近的非箭头函数的this

4.构造函数的this,指向创建这个构造函数的实例对象

1.词法作用域(静态作用域)

  js采用的就是词法作用域

  只有函数可以限定作用域

  函数允许函数访问外层作用域的变量

  函数在定义的时候决定了函数作用域,词法作用域关心函数在何处被定义

2.动态作用域

  函数在调用的时候决定了函数作用域,动态作用域关心函数在何处被调用

变量取值会到创建这个变量的函数作用域中去查找,如果找不到会向上查找,直到查找到全局作用域,这就形成了一个作用域链

1.节流

2.防抖

1.原型链继承

2.构造函数继承

3.组合继承(原型链继承+构造函数继承)

4.原型式继承

5.寄生继承

6.组合寄生继承

定义在一个函数内部的函数,这个内部函数有权访问外部函数作用域的变量

优点:

缺点:

js在运行中的任务,有一套收集,排队,执行的特殊机制,这种机制就是事件循环

遇到同步事件直接执行,遇到异步事件分为宏任务和微任务

如果微任务列表里有任务,先执行微任务再执行宏任务

块级作用域  暂时性死区  能否被修改

没有this  call apply方法修改this无效

没有prototype属性

没有argument

不能使用new  不能用作构造函数,会报错

持续更新中.......

131.用原生 JavaScript 的实现过什么功能吗?

参考答案:轮播图、手风琴、放大镜、3D动画效果等,切记,所答的一定要知道实现原理!,不知道还不如不说!

参与互动

132.javascript 代码中的"use strict"是什么意思 ? 使用它区别是什么?

参考答案:意思是使用严格模式,使用严格模式,一些不规范的语法将不再支持

参与互动

133.简述创建函数的几种方式

参考答案:

参与互动

134.window.location.search() 返回的是什么?

参考答案:查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值:?ver=1.0&id=timlq 也就是问号后面的!

参与互动

135.window.location.hash 返回的是什么?

参考答案:锚点 , 返回值:#love ;

参与互动

136.window.location.reload() 作用?

参考答案:刷新当前页面

参与互动

137.为什么不能定义 1px 左右的 p 容器?

参考答案: IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如: overflow:hidden | zoom:0.08 | line-height:1px

参与互动

138.BOM 对象有哪些,列举 window 对象?

参考答案:

参与互动

139.简述 readonly 与 disabled 的区别

参考答案:

参与互动

140.为什么扩展 javascript 内置对象不是好的做法?

参考答案:

参与互动

141.什么是三元表达式?“三元”表示什么意思?

参考答案:三元如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2.这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

参与互动

142.我们给一个 dom 同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获

参考答案:所有事件的顺序是:其他元素捕获阶段事件 ->本元素代码顺序事件 ->其他元素冒泡阶段事件 。

参考

参与互动

144.简述一下 Handlebars 的基本用法?

参考答案:没有用过的话说出它是干什么的即可

参与互动

143.简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

参考答案:

参与互动

145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

参考答案:

参与互动

146.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?

参考答案:Webkit 是浏览器引擎,包括 html 渲染和 js 解析功能,手机浏览器的主流内核,与之相对应的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也称 MSHTML,IE 使用)。 对于浏览器的调试工具要熟练使用,主要是页面结构分析,后台请求信息查看,js 调试工具使用,熟练使用这些工具可以快速提高解决问题的效率

参与互动

147.如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

参考答案:了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念

参与互动

148.JavaScript 的循环语句有哪些?

参考答案:while for do while forEach

参与互动

149.作用域-编译期执行期以及全局局部作用域问题

参考答案:js 执行主要的两个阶段:预解析和执行期

参与互动

150.如何添加 html 元素的事件,有几种方法?请列举

参考答案:直接在标签里添加;在元素上添加、使用事件注册函数添加

参与互动

151.列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常用方法至少 5 个

参考答案:

对象:Window document location screen history navigator

方法:Alert() confirm() prompt() open() close()

参与互动

152.事件绑定的方式

参考答案:

参与互动

153.事件循环

参考答案:事件循环是一个单线程循环,用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数,则将回调函数出队并推送到调用堆栈中执行。

参与互动

154.事件模型

参考答案:

解析:参考

参与互动

155.如何自定义事件

参考答案:

1.原生提供了 3 个方法实现自定义事件 2.createEvent,设置事件类型,是 html 事件还是 鼠标事件 3.initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件 4.dispatchEvent 触发事件

MDN

参与互动

156.target 和 currentTarget 区别

参考答案:

参与互动

157.prototype 和__proto__的关系是什么

参考答案:

所有的对象都拥有__proto__属性,它指向对象构造函数的 prototype 属性

所有的函数都同时拥有__proto__和 protytpe 属性 函数的__proto__指向自己的函数实现 函数的 protytpe 是一个对象 所以函数的 prototype 也有__proto__属性 指向 Object.prototype

Object.prototype.__proto__指向 null

参与互动

158.什么是原型属性?

参考答案:从构造函数的prototype属性出发找到原型,这时候就把原型称之为构造函数的原型属性

参与互动

159.什么是原型对象?

参考答案:从实例的__proto__出发,找到原型,这时候就把原型称之为实例的原型对象。

参与互动

160.使用 let、var 和 const 创建变量有什么区别

参考答案:

let 和 const 的区别在于:let 允许多次赋值,而 const 只允许一次。

JavaScript面试题:字符串处理

在应聘前端程序员时,在笔试部分经常会考到字符串处理的问题。这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来。就具体的字符串处理问题,郑州尚学堂给大家分享一下。

1、字符串转换

字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种:

var num= 19// 19

var myStr = num.toString()// "19"

你同样可以这么做:

var num= 19// 19

var myStr = String(num)// "19"

或者,再简单点儿:

var num= 19// 19

var myStr = "" +num// "19"

2、字符串分割

字符串分割,即将一个字符串分割为多个字符串,JavaScript中给我们提供了一个非常方便的函数,如:

var myStr = "I,Love,You,Do,you,love,me"

var substrArray = myStr .split(",")// ["I", "Love", "You", "Do", "you", "love", "me"]

var arrayLimited = myStr .split(",", 3)// ["I", "Love", "You"]

split()的第二个参数,表示返回的字符串数组的最大长度。

3、获取字符串长度

字符串长度是在开发中经常要用到的,非常简单如下:

var myStr = "I,Love,You,Do,you,love,me"

var myStrLength = myStr.length//25

4、查询子字符串

很多人都会忘记这几个JavaScript的自带的方法,或者忘记它们的具体用法,从而导致在做题的时候不得不嵌套for循环来做。

第一个函数:indexOf(),它从字符串的开头开始查找,找到返回对应坐标,找不到返回-1,如下:

var myStr = "I,Love,you,Do,you,love,me"

var index = myStr.indexOf("you")// 7 ,基于0开始,找不到返回-1

第二个函数:lastIndexOf(),它从字符串的末尾开始查找,找到返回对应坐标,找不到返回-1,如下:

var myStr = "I,Love,you,Do,you,love,me"

var index = myStr.lastIndexOf("you")// 14

以上两个函数同样接收第二个可选的参数,表示开始查找的位置。

5、字符串替换

单单查到字符串应该还不会停止,一般题目都还经常会遇到让你查到并替换为你自己的字符串,例如:

var myStr = "I,love,you,Do,you,love,me"

var replacedStr = myStr.replace("love","hate")//"I,hate,you,Do,you,love,me"

默认只替换第一次查找到的,想要全局替换,需要置上正则全局标识,如:

var myStr = "I,love,you,Do,you,love,me"

var replacedStr = myStr.replace(/love/g,"hate")//"I,hate,you,Do,you,hate,me"

6、查找给定位置的字符或其字符编码值

想要查找给定位置的字符,你可以使用如下函数:

var myStr = "I,love,you,Do,you,love,me"

var theChar = myStr.charAt(8)// "o",同样从0开始

同样,它的一个兄弟函数就是查找对应位置的字符编码值,如:

var myStr = "I,love,you,Do,you,love,me"

var theChar = myStr.charCodeAt(8)//111

7、字符串连接

字符串连接操作可以简单到用一个加法运算符搞定,如:

var str1 = "I,love,you!"

var str2 = "Do,you,love,me?"

var str = str1 + str2 + "Yes!"//"I,love,you!Do,you,love,me?Yes!"

同样,JavaScript也自带了相关的函数,如:

var str1 = "I,love,you!"

var str2 = "Do,you,love,me?"

var str = str1.concat(str2)//"I,love,you!Do,you,love,me?"

其中concat()函数可以有多个参数,传递多个字符串,拼接多个字符串。

8、字符串切割和提取

有三种可以从字符串中抽取和切割的方法,如:

第一种,使用slice():

var myStr = "I,love,you,Do,you,love,me"

var subStr = myStr.slice(1,5)//",lov"

第二种,使用substring():

var myStr = "I,love,you,Do,you,love,me"

var subStr = myStr.substring(1,5)//",lov"

第三种,使用substr():

var myStr = "I,love,you,Do,you,love,me"

var subStr = myStr.substr(1,5)//",love"

与第一种和第二种不同的是,substr()第二个参数代表截取的字符串最大长度,如上结果所示。

9、字符串大小写转换

常用的转换为大写或者小写字符串函数,如下:

var myStr = "I,love,you,Do,you,love,me"

var lowCaseStr = myStr.toLowerCase()//"i,love,you,do,you,love,me"

var upCaseStr = myStr.toUpperCase()//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字符串匹配

字符串匹配可能需要你对正则表达式有一定的了解,先来看看match()函数:

var myStr = "I,love,you,Do,you,love,me"

var pattern = /love/

var result = myStr.match(pattern)//["love"]

console.log(result .index)//2

console.log(result.input )//I,love,you,Do,you,love,me

如你所见,match()函数在字符串上调用,并且接受一个正则的参数。来看看第二个例子,使用exec()函数:

var myStr = "I,love,you,Do,you,love,me"

var pattern = /love/