前端基础面试题小结

#博学谷IT学习技术支持#

一.什么是事件冒泡,它是如何工作的?如何阻止事件冒泡?

二.谈谈事件委托的理解?(必会)

三.event 对象的常见应用?

四.typeof 和 instanceof 区别(必会)

五.什么是闭包?(必会)

六.介绍 this 各种情况(必会)

七.数组中的 forEach 和 map 的区别?(必会)

八.for in 和 for of 的区别(必会)

九.谈谈你对 Javascript 垃圾回收机制的理解?(高薪常问)


一.什么是事件冒泡,它是如何工作的?如何阻止事件冒泡?

原理

在一个对象上触发某类事件(比如单击 onclick 事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即 document 对象(有些浏览器是 window)

阻止事件冒泡的几种方法

2.1)第一种:event.stopPropagation();

2.2)第二种:return false;

2.3)第三种:event.preventDefault();

二.谈谈事件委托的理解?(必会)

JavaScript 事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个上级元素上,这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事 件的时候,可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函

数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在 JavaSciprt 事件中常被忽略的特性:事件冒泡以及目标元素。

优点:

1、减少事件注册,节省内存。比如,

2、在 table 上代理所有 td 的 click 事件。

3、在 ul 上代理所有 li 的 click 事件。

4、简化了 dom 节点更新时,相应事件的更新。比如

5、不用在新添加的 li 上绑定 click 事件。

6、当删除某个 li 时,不用移解绑上面的 click 事件。

缺点:

1、事件委托基于冒泡,对于不冒泡的事件不支持

2、层级过多,冒泡过程中,可能会被某层阻止掉。

3、理论上委托会导致浏览器频繁调用处理函数,虽然很可能不需要处理。所以建议就近委托,比如在 table 上代理 td,而不是在 document 上代理 td。

4、把所有事件都用代理就可能会出现事件误判。比如,在 document 中代理了所有 button 的 click事件,另外的人在引用改 js 时,可能不知道,造成单击 button触发了两个 click 事件

三.event 对象的常见应用?

1、event.preventDefault(); // 阻止默认行为,阻止 a 链接默认的跳转行为

2、event.stopPropagation(); // 阻止冒泡

3、event.stopImmediatePropagation(); // 按钮绑定了 2 个响应函数,依次注册 a,b 两个事件,点击按钮,a 事件中加 event.stopImmediatePropagation()就能阻止 b 事件

4、event.currentTarget // 早期的 ie 不支持,当前绑定的事件event.target

四.typeof 和 instanceof 区别(必会)

在 javascript 中,判断一个变量的类型可以用 typeof

1、数字类型、typeof 返回的值是 number。比如说:typeof(1),返回值是 number

2、字符串类型,typeof 返回的值是 string。比如 typeof(“123”返回值时 string)

3、布尔类型,typeof 返回的值是 boolean。比如 typeof(true)返回值时 boolean

4、对象、数组、null 返回的值是 object。比如 typeof(window),typeof(document),typeof(null)返回的值都是 object

5、函数类型,返回的值是 function。比如:typeof(eval),typeof(Date)返回的值都是 function。

6、不存在的变量、函数或者 undefined,将返回 undefined。比如:typeof(abc)、typeof(undefined)都返回 undefined

在 javascript 中,instanceof 用于判断某个对象是否被另一个函数构造使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回”object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。Instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof方法要求开发者明确地确认对象为某特定类型

五.什么是闭包?(必会)

“闭包就是能够读取其他函数内部变量的函数。例如在 javascript 中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。”

举例:创建闭包最常见方式,就是在一个函数内部创建另一个函数。下面例子中的 closure 就是一个闭包,

function func(){

var a =1 ,b = 2;

funciton closure(){ return a+b; } return

closure; }

解决闭包产生的JS 内存泄漏

垃圾回收机制的标记清除

六.介绍 this 各种情况(必会)

this 的情况:

1、以函数形式调用时,this 永远都是 window

2、以方法的形式调用时,this 是调用方法的对象

3、以构造函数的形式调用时,this 是新创建的那个对象

4、使用 call 和 apply 调用时,this 是指定的那个对象

5、箭头函数:箭头函数的 this 看外层是否有函数

如果有,外层函数的 this 就是内部箭头函数的 this

如果没有,就是 window

6、特殊情况:通常意义上 this 指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象,那么 this 指向的就是那个返回的对象,如果返回值不是一个对象那么 this还是指向函数的实例

七.数组中的 forEach 和 map 的区别?(必会)

forEach 和 map 的相同点

相同点 都是循环遍历数组中的每一项

forEach 和 map 方法里每次执行匿名函数都支持 3 个参数,参数分别是 item(当前每一项),index(索引值),arr(原数组)

匿名函数中的 this 都是指向 window 只能遍历数组 都不会改变原数组 区别 map 方法

1.map 方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值

2.map 方法不会对空数组进行检测,map 方法不会改变原始数组。

3.浏览器支持:chrome、Safari1.5+、opera 都支持,IE9+, 若 arr 为空数组,则 map 方法返回的也是一个空数组。 forEach 方法

1.forEach 方法用来调用数组的每个元素,将元素传给回调函数

2.forEach 对于空数组是不会调用回调函数的。 无论 arr 是不是空数组,forEach 返回的都是undefined。这个方法只是将数组中的每一项作为 callback 的参数执行一次

八.for in 和 for of 的区别(必会)

1、推荐在循环对象属性的时候使用 for...in,在遍历数组的时候的时候使用 for...of

2、for...in 循环出的是 key,for...of 循环出的是 value

3、注意,for...of 是 ES6 新引入的特性。修复了 ES5 引入的 for...in 的不足

4、for...of 不能循环普通的对象,需要通过和 Object.keys()搭配使用

九.谈谈你对 Javascript 垃圾回收机制的理解?(高薪常问)

1、标记清除(mark and sweep)

这是 JavaScript 最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

2、引用计数(reference counting)

在低版本 IE 中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1,如果该变量的值变成了另外一个,则这个值得引用次数减

1,当这个值的引用次数变为 0 的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间在 IE 中虽然 JavaScript 对象通过标记清除的方式进行垃圾回收,但 BOM 与 DOM 对象却是通过引用计数回收垃圾的,也就是说只要涉及 BOM 及 DOM 就会出现循环引用问题

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容