第十八天web前端面试题

from郝晨光

1,什么是函数防抖和函数节流?有什么区别

防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会清除前一次重新开启计算函数执行时间

相比于防抖,节流就是在让函数在特定的时间内只执行一次

函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案

函数防抖 debounce

原理将若干函数调用合成为一次,并在给定时间过去之后,或者连续事件完全触发完成之后,调用一次

例如:滚动scroll事件,不停滑动滚轮会连续触发多次滚动事件,从而调用绑定的回调函数,我们希望当我们停止滚动的时,才触发一次回调,这时可以使用函数防抖。

函数节流 throttle

原理:当达到了一定的时间间隔就会执行一次;可以理解为是缩减执行频率

例如:还是以scroll滚动事件来说吧,滚动事件是及其消耗浏览器性能的,不停触发。以我在项目中碰到的问题,移动端通过scroll实现分页,不断滚动,我们不希望不断发送请求,只有当达到某个条件,比如,距离手机窗口底部150px才发送一个请求,接下来就是展示新页面的请求,不停滚动,如此反复;这个时候就得用到函数节流。

函数节流与函数防抖的区别:

我们以一个案例来讲一下它们之间的区别:设定一个间隔时间为一秒,在一分钟内,不断的移动鼠标,让它触发一个函数,打印一些内容。

函数防抖:会打印1次,在鼠标停止移动的一秒后打印。

函数节流:会打印60次,因为在一分钟内有60秒,每秒会触发一次。

2,什么是函数柯里化及有什么用?

函数的多参,变成单参或减少

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。

通过函数柯里化,我们可以实现参数复用、提前返回和延迟执行。通过函数柯里化,在不同的情况下传递不同的参数

3,谈谈模块化开发

模块化就是将一个复杂的系统分解成多个独立的模块的代码组织方式。

什么是模块化开发?

模块就是完成单一的职责的功能函数或者代码块。

模块化开发是指如何开发新的模块和复用已有的模块来实现应用的功能。

为什么要模块化开发?

可维护性

可测试性

按需加载

代码复用

利于架构

利于协作

模块化开发的规范

CommonJS

用于服务端模块化编程,Node.js就采用此规范;

一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.exports对象;

AMD

require.js(前端模块化管理的工具库)实现js文件的异步加载,避免网页失去响应;管理模块之间的依赖性,便于代码的编写和维护;require.js是使用创建script元素,通过指定script元素的src属性来实现加载模块的;

依赖前置,尽早的执行模依赖块,执行顺序不一定;

CMD

Sea.js 依赖就近,且在真正需要使用依赖模块时才执行该模块,顺序固定;

AMD和CMD最大的区别是对依赖模块的执行时机处理不同,而不是加载的时机或者方式不同,二者皆为异步加载模块;

AMD依赖前置,js可以方便知道依赖模块是谁,立即加载;而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块。

ES6

ES6使用的是基于文件的模块。所以必须一个文件一个模块,不能将多个模块合并到单个文件中去。

ES6模块API是静态的,一旦导入模块后,无法再在程序运行过程中增添方法。

ES6模块采用引用绑定(可以理解为指针)。这点和CommonJS中的值绑定不同,如果你的模块在运行过程中修改了导出的变量值,就会反映到使用模块的代码中去。所以,不推荐在模块中修改导出值,导出的变量应该是静态的。

ES6模块采用的是单例模式,每次对同一个模块的导入其实都指向同一个实例。

另外,ES6模块好处很多,但是并不支持按需加载的功能, 而按需加载又是Web性能优化中重要的一个环节。好在我们可以借助Webpack来弥补这一缺陷

更多关于模块化开发的知识:浅谈模块化开发

4,谈谈你对作用域链的理解

什么是作用域?

作用域就是变量与函数的可访问范围。在JavaScript中,变量的作用域有全局作用域和局部作用域,在ES6之后,又添加了块级作用域的概念,所以在JavaScript中有三种作用域。

作用域链

对于javascript而言,我们定义在局部作用域或者块级作用的变量,会存放在scope局部作用域对象上,而定义在全局作用域的变量,会存放在window/global这个全局对象上。

当我们在局部/块级作用域中,调用一个外部的变量时,就会产生作用域链。

当我们在一个函数内部访问当前作用域内不存在的变量时,就会逐层向外查找,如果一直没有找到就会报错。

对于函数而言,函数在哪里创建,它就会从哪里开始向上查找变量;而不是函数在哪里调用。

最常见的就是闭包,通过闭包定义的函数来访问函数的内部变量。

5,什么是深拷贝?什么是浅拷贝?如何实现一个深拷贝函数?

深拷贝和浅拷贝都是针对于引用类型(Object)而言,对于基本数据类型而言,赋值直接就是深拷贝。

浅拷贝

浅拷贝有两种定义,一种是直接赋值引用,另一种是只拷贝对象的第一层属性,更深层次的引用还是相同的;对于这两种,哪一种是正确的答案,这里不做多的解释,看个人理解,像我平时更倾向于第二种。

深拷贝

对于浅拷贝有概念之后,就比较容易理解深拷贝了。

深拷贝就是将原有对象重新拷贝一份,不论是修改哪一部分的值,都不会对原有对象造成影响。拷贝的永远是值,而不是引用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345