JavaScript相关面试题目总结

最新推荐文章于 2024-04-11 12:11:32 发布

qq_42951233

最新推荐文章于 2024-04-11 12:11:32 发布

阅读量121

点赞数

文章标签： javaScript

本文链接：https://blog.csdn.net/qq_42951233/article/details/102548909

版权

一、js阻止事件冒泡和阻止js默认事件

1、防止冒泡和捕获

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。
解释：冒泡事件指事件会从目标元素依次在它的父级元素中被触发直到document对象。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

2、取消默认事件

w3c的方法是e.preventDefault()，IE则是使用return false.
js事件默认行为：当一个事件发生的时候浏览器自己会默认做的事。
js事件默认行为有哪些？
1.a标签链接跳转，如点击后链接地址跳转就是a标签的默认行为。
2.form表单提交,如表单验证输入问题而去阻止提交。

二、javaScript垃圾回收机制

JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

1、标记清楚

工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。
去掉环境中的变量以及被环境中的变量引用的变量的标记。
再被加上标记的会被视为准备删除的变量。
垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

2、引用计数

工作原理：跟踪记录每个值被引用的次数。

工作流程：

声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。
同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.
当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.
当引用次数变成0时，说明没办法访问这个值了。
当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

对IE中循环引用的理解：

循环引用就是对象A中包含另一个指向对象B的指针，B中也包含一个指向A的引用。但是循环引用的时候就会释放不掉内存。
因为IE中的BOM、DOM的实现使用了COM，而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题。
解决：手工断开js对象和DOM之间的链接。赋值为null。IE9把DOM和BOM转换成真正的JS对象了，所以避免了这个问题。

三、JavaScript中引起内存泄漏的操作

1、意外的全局变量引起的内存泄漏。

原因：全局变量，不会被回收。

解决：使用严格模式避免。

2、闭包引起的内存泄漏

原因：闭包可以维持函数内局部变量，使其得不到释放。

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3、没有清理的DOM元素引用

原因：虽然别的地方删除了，但是对象中还存在对dom的引用

解决：手动删除。

4、被遗忘的定时器或者回调

原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

解决：手动删除定时器和dom。

5、子元素存在引用引起的内存泄漏

原因：div中的ul li 得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。

四、事件委托（事件代理）

事件委托原理：事件冒泡机制

优点：

1.大量减少内存占用，减少事件注册。

2.新增元素实现动态绑定事件

用法：

1、element.addEventListener(event, function, useCapture)；所有主流浏览器，除了IE8及更早IE版本。

（1）、useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行(true-事件句柄在捕获阶段执行；false-默认。事件句柄在冒泡阶段执行)。

（2）.移除事件监听：element.removeEventListener(event, function,useCapture)。移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。

（3）.功能：可多次绑定同一个事件，并且不会覆盖上一个事件。

2、element.attachEvent(event,function)；IE8及IE更早版本

（1）没有第三个参数，因为IE只有冒泡，没有反向冒泡。

（2）执行顺序按照绑定的反序（先执行后绑定的方法）。

（3）移除事件监听：element.detachEvent(event,function)。

3、事件代理实例

将li元素的事件代理到它的父级元素ul上，代码如下：

ul.addEventListener("click",function(e){
	var target=e.target
	if(target.nodeName=="li"){
		console.log(target.name)
	}
})

五、用call实现bind代码

Function.prototype.mybind=function(that,...args){
	var me = this;
    return function(...args){
    	me.call(that,...args);
 	}
}

六、13. 防抖和节流

防抖：当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间。

节流：将一个函数的调用频率限制在一定阈值内，例如1s内一个函数不能被调用两次。

七、设计模式

1. 装饰者模式

给对象动态地添加职责的方式称为装饰者模式。传统的面向对象语言中给对象添加功能常常使用继承的方式，但是继承的方式不灵活，而与之相比，装饰者模式更加灵活，“即用即付”。

2. 发布-订阅模式

发布-订阅模式又叫做观察者模式,定义了对象之间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖与它的对象都将得到通知.

定义：对象间的一种一对多的依赖关系。
需求：当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。

3. 代理模式

代理有很多种类:

保护代理会过滤请求，代理B可以拒绝将A发起的请求给传递给C,保护代理用于控制不同权限的对象对目标对象的访问，但在JavaScript中并不太容易实现保护代理，因为我们无法判断谁访问了某个对象。
虚拟代理会将一些操作交给代理执行，代理B可以在A满足某些条件下再执行操作，即虚拟代理会把一些开销大的对象延迟到真正需要它的时候再去创建。

代理和本体的接口必须保持一致性，对于用户，他们并不清楚代理和本体的区别，在任何使用本体的地方都可以替换成使用代理。场景：图片预加载。

4. 职责链模式

职责链模式: 类似多米诺骨牌, 通过请求第一个条件, 会持续执行后续的条件, 直到返回结果为止。

场景: 某电商针对已付过定金的用户有优惠政策, 在正式购买后, 已经支付过 500 元定金的用户会收到 100 元的优惠券, 200 元定金的用户可以收到 50 元优惠券, 没有支付过定金的用户只能正常购买。

5. 单例模式

单例模式的定义是保证一个类只有一个实例，并且提供一个访问它的全局访问点。有些时候一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象等。单例模式的优点是：

产生一个类的唯一实例
好处就是节约内存
可以用来划分命名空间，减少全局变量的数量
使用单例模式可以使代码组织的更为一致，使代码容易阅读和维护
可以被实例化，且实例化一次

案例：

function createPeople() {
    let name
    return function (userName) {
        return name || (name = userName)
    }
}

let single = createPeople()
console.log(single('人')) // '人'
// 不管再传递任何值，也只会返回 '人'
console.log(single('马')) // '马'

6. 工厂模式 —— Factory

顾名思义，工厂模式就是像是工厂一样流水线般生产处一个个对象。

核心
1.return一个对象
2.创建不同的引用类型

案例：

function createPerson() {
    // 定义工厂
    let person = {
        name: '人',
        walk: function () {
            console.log('walk')
        }
    }
    
    return person // 返回一个对象
}

let xiaoming = createPerson() // 工厂生产对象

7、模块模式 —— Module

核心：函数表达式中定义的变量和方法在外界是访问不到的,只能通过其向外部提供的接口( return ),即常常使用闭包的形式来实现。"有限制"地访问，通过函数作用域解决了属性和方法的封装问题。

案例

let Person = (function () {
    let name = '小明'
    function sayName() {
        console.log(name)
    }

    return {
        name: name,
        sayName: sayName
    }
})()

八、JavaScript闭包实现模块化

function module() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        alert( something );
    }
    function doAnother() {
        alert( another.join( " ! " ) );
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = module();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3