1.写出下面程序的运行结果:
console.log([] == ![]) // true
console.log([] == []) // false
console.log([] == {}) // false
console.log(new String('a') == new String('a')) // false
console.log(isNaN(NaN)) // true
console.log(isNaN('32131dsafdas')) // true
console.log(NaN === NaN) // false
console.log(NaN === undefined) // false
console.log(undefined === undefined) // true
console.log(typeof NaN) // number
console.log({} + []) // 0
console.log([] + {}) // "[object Object]"
console.log({} + {}) // "[object Object][object Object]"
console.log([]+ []) // ""
console.log({} + 1) // 1
console.log([] + 1) // "1"
隐式类型转换参考:https://blog.csdn.net/m0_37793545/article/details/87862847
2.写出下面程序的运行结果:
var name = 'world';
(function () {
if (typeof name === 'undefined') {
var name = 'jack'
console.log('hi' + name)
} else {
console.log('hello' + name)
}
})()
// hijack
这个题比较坑的点:
- typeof 未定义的变量,未赋值的变量都会返回undefined!(即if内name改为name1,照样返回 hijack)
- if中的var name =‘jack’,定义会被提升到IIFE内顶部,所以if中的name为undefined,不是未定义
3.写出下面程序的运行结果:
var test = (function (a) {
this.a = a;
return function (b) {
return this.a + b
}
}(function (a, b) {
return a
}(1, 2)))
test(4)
// 5
4.写出下面程序的运行结果:
var x = 1,
y = z = 0
function add(n) {
return n = n + 1
}
y = add(x)
function add(n) {
return n = n + 3
}
z = add(x)
console.log(x, y, z)
// 1 4 4
1.JS中基础数据类型是按值传递(引用数据类型是共享传递)
2.两个add都发生函数提升,且后面的覆盖了前面的
5.写出下面程序的运行结果:
function bar() {
return foo;
foo = 10;
function foo() {}
var foo = 11
}
alert(typeof bar())
// function
(2)
var a = 1
function a() {}
console.log(a) // 1
(3)
var b = 1
if (true) {
console.log(b) // 1
var b = 2
var c = 3
console.log(c) // 3
}
console.log(b) // 2
console.log(c) // 3
6.写出下面程序的运行结果:
var x = 3;
var foo = {
x: 2,
baz: {
x: 1,
bar: function () {
return this.x
}
}
}
var go = foo.baz.bar
go()
foo.baz.bar()
// 3
// 1
7.写出下面程序的运行结果:
console.log([1, 2] + [2, 1])
// 1,2,2,1
8.判断一串字符串是否为回文
var test = '12344321'
var test1 = test.split('').reverse().join('')
console.log(test === test1)
9.数组去重,数组排序
//去重:
(1)Array.from(new Set([1,2,3,5,2,1,22,'1']))
(2)
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));
(3)
function unique(arr) {
arr = arr.sort()
let res = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
res.push(arr[i])
}
}
return res
}
更多去重方式:https://juejin.im/post/5949d85f61ff4b006c0de98b
数组排序总结:https://juejin.im/post/57dcd394a22b9d00610c5ec8#heading-24
10.js继承的实现方式
// (1) 借助构造函数实现继承
function Parent() {
this.name = 'parent'
}
function Child() {
Parent.call(this)
this.age = 18
}
// 这种方式只能实现部分继承,即父类的构造方法中的属性,子类可以继承,其缺点是,父类原型上的属性或方法,子类无法继承。
// (2)借助原型链实现继承
function Parent() {
this.name = 'parent'
this.play = [1, 2, 3]
}
function Child() {
this.age = 18
}
Child.prototype = new Parent()
// 这种继承方式的缺点是用子类Child实例化两个对象后,var s1 = new Child(); var s2 = new Child(); s1.play.push(4); console.log(s2.play); 也会打印出[1,2,3,4],其原因是两个对象的__proto__指向了同一个原型对象。
// (3)组合方式(继承的完美实现)
function Parent() {
this.name = 'parent'
}
function Child() {
// 将父对象的构造函数绑定在子对象上
Parent.call(this)
this.age = 18
}
// 将Parent的prototype拷贝给Child
Child.prototype = Object.create(Parent.prototype)
// 修正Child的prototype对象指向的构造函数
Child.prototype.constructor = Child
11.JavaScript事件循环机制相关问题
// 请写出以下代码执行的顺序
setTimeout(function () {
console.log(1);
});
new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(val){
console.log(val);
})
console.log(4);
// 2 4 3 1
在同步代码执行完成后才回去检查是否有异步任务完成,并执行对应的回调,而微任务又会在宏任务之前执行。
同步代码=>异步代码(微任务=>宏任务)
宏任务: setTimeout
微任务: Promise.then
相关问题推荐:
settimeout实现原理
https://juejin.im/post/6844903990077947912
promise原理
https://juejin.im/post/6844904063570542599
详解js中的eventloop事件循环机制
https://zhuanlan.zhihu.com/p/33058983
12.伪数组转数组
var a={length:2,0:'aaa',1:'bbb'};
// ES6:
Array.from(a)
// ES5:
Array.prototype.slice.call(a);// ["aaa", "bbb"]
var a={length:2};
Array.prototype.slice.call(a);// [undefined, undefined]
13.写出下面程序的运行结果:
function Foo() {
getName = function() {
alert(1)
}
return this
}
Foo.getName = function() {
alert(2)
}
Foo.prototype.getName = function() {
alert(3)
}
var getName = function() {
alert(4)
}
function getName() {
alert(5)
}
//请写出以下输出结果:
Foo.getName() // 2
getName() // 4
Foo().getName() // 1
getName() // 1
new Foo.getName() // 2
new Foo().getName() // 3
new new Foo().getName() // 3
// 详细解释 https://www.jb51.net/article/79461.htm
14. 函数防抖与函数节流
(1) 函数防抖
function debounce(func, delay) {
var timeout
return function(e) {
console.log('清除', timeout, e.target.value)
clearTimeout(timeout)
var context = this,
args = arguments
console.log('新的', timeout, e.target.value)
timeout = setTimeout(function() {
console.log('----')
func.apply(context, args)
}, delay)
}
}
var validate = debounce(function(e) {
console.log('change', e.target.value, new Date() - 0)
}, 380)
// 绑定监听
document.querySelector('input').addEventListener('input', validate)
(2) 函数节流
// 函数节流
function throttle(fn, threshhold) {
var timeout
var start = new Date()
var threshhold = threshhold || 160
return function() {
var context = this,
args = arguments,
curr = new Date() - 0
clearTimeout(timeout) //总是干掉事件回调
if (curr - start >= threshhold) {
console.log('now', curr, curr - start) //注意这里相减的结果,都差不多是160左右
fn.apply(context, args) //只执行一部分方法,这些方法是在某个时间段内执行一次
start = curr
} else {
//让方法在脱离事件后也能执行一次
timeout = setTimeout(function() {
fn.apply(context, args)
}, threshhold)
}
}
}
var mousemove = throttle(function(e) {
console.log(e.pageX, e.pageY)
})
// 绑定监听
document.querySelector('#panel').addEventListener('mousemove', mousemove)
15. 什么是hash函数
hash(散列、杂凑)函数,是将任意长度的数据映射到有限长度的域上。直观解释起来,就是对一串数据m进行杂糅,输出另一段固定长度的数据h,作为这段数据的特征(指纹)。也就是说,无论数据块m有多大,其输出值h为固定长度。
hashmap,hash值(key)存在的目的是加速键值对的查找
详解:https://www.zhihu.com/question/26762707
16. Vue 组件 data 为什么必须是函数
每个实例可以维护一份被返回对象的独立的拷贝,否则;将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。
17. jQuery.extend()和jQuery.fn.extend()的区别
jQuery.extend()为扩展jQuery类本身.为类添加新的方法。如 $.wang()
jquery.fn.extend(object);给jQuery对象添加方法。如 $('#test').wang()
18. Vue中的虚拟Dom diff 算法
(1)所谓的virtual dom,也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM节点
dom diff 则是通过JS层面的计算,返回一个patch对象,即补丁对象,在通过特定的操作解析patch对象,完成页面的重新渲染
(2)DOM DIFF
比较两棵DOM树的差异是Virtual DOM算法最核心的部分.简单的说就是新旧虚拟dom 的比较,如果有差异就以新的为准,然后再插入的真实的dom中,重新渲染。
比较只会在同层级进行, 不会跨层级比较。新旧虚拟dom比较的时候,是先同层比较,同层比较完看看时候有儿子,有则需要继续比较下去,直到没有儿子。
比较后会出现四种情况:
1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换
详解:https://juejin.im/post/5ad6182df265da23906c8627
19.常见Http状态码
// 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
// 200 OK 正常返回信息
// 201 Created 请求成功并且服务器创建了新的资源
// 202 Accepted 服务器已接受请求,但尚未处理
// 301 Moved Permanently 请求的网页已永久移动到新位置。
// 302 Found 临时性重定向。
// 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
// 304 Not Modified 自从上次请求后,请求的网页未修改过。
// 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
// 401 Unauthorized 请求未授权。
// 403 Forbidden 禁止访问。
// 404 Not Found 找不到如何与 URI 相匹配的资源。
// 500 Internal Server Error 最常见的服务器端错误。
// 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
// 504 Gateway Timeout 服务器端响应超时。
20. 什么情况出现跨域,如何解决?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。
21. 重绘和回流
重绘:当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
回流:当Render Tree(DOM)中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
回流要比重绘消耗性能开支更大。
回流必将引起重绘,重绘不一定会引起回流。
详解:https://juejin.im/post/5a9923e9518825558251c96a
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24
22. 浏览器从加载到渲染的过程,比如输入一个网址到显示页面的过程。
加载过程:
- 浏览器根据 DNS 服务器解析得到域名的 IP 地址
- 向这个 IP 的机器发送 HTTP 请求 服务器收到、处理并返回 HTTP 请求
- 浏览器得到返回内容
渲染过程:
- 根据 HTML 结构生成 DOM 树
- 根据 CSS 生成 CSSOM
- 将 DOM 和 CSSOM 整合形成 RenderTree
- 根据 RenderTree 开始渲染和展示
- 遇到
<script>
时,会执行并阻塞渲染
23. 浏览器缓存机制
强制缓存:catch-control,expires,catch-control优先级高。不向服务器发送请求
协商缓存:Last-Modified / If-Modified-Since和Etag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。仍需向发送请求
- 浏览器第一次加载资源,服务器返回200,浏览器将资源文件从服务器上请求下载下来,并把response header及该请求的返回时间(要与Cache-Control和Expires对比)一并缓存;
- 下一次加载资源时,先比较当前时间和上一次返回200时的时间差,如果没有超过Cache-Control设置的max-age,则没有过期,命中强缓存,不发请求直接从本地缓存读取该文件(如果浏览器不支持HTTP1.1,则用Expires判断是否过期);
- 如果时间过期,则向服务器发送header带有If-None-Match和If-Modified-Since 的请求;
- 服务器收到请求后,优先根据Etag的值判断被请求的文件有没有做修改,Etag值一致则没有修改,命中协商缓存,返回304;如果不一致则有改动,直接返回新的资源文件带上新的Etag值并返回 200;
- 如果服务器收到的请求没有Etag值,则将If-Modified-Since和被请求文件的最后修改时间做比对,一致则命中协商缓存,返回304;不一致则返回新的last-modified和文件并返回 200;
详解:https://juejin.im/entry/5ad86c16f265da505a77dca4
https://segmentfault.com/a/1190000008377508
https://zhuanlan.zhihu.com/p/58685072
https://www.jianshu.com/p/54cc04190252
另:缓存数据哪些放在Memory Cache,哪些放在Disk Cache
- 图片,字体,小脚本等放在Memory Cache中
- css等非脚本文件放在DiskCache中(该说法不准确)
- 一般大文件放在DiskCache中
- 当前系统内存使用率高的话,文件优先存储进硬盘
- 好像不同浏览器间也有处理差异
https://www.jianshu.com/p/54cc04190252
24. Vue双向绑定原理
详解:https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf#heading-9
25. 路由导航钩子(导航守卫)
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
- to:route即将进入的目标路由对象
- from:route当前导航正要离开的路由
- next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
afterEach和beforeResolve(全局解析守卫)没有next参数
路由独享的守卫:beforeEnter,参数同全局前置守卫
组件内的守卫:beforeRouteEnter(组件实例未创建,不能使用this),beforeRouteUpdate,beforeRouteLeave
详解:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
26. Vue的路由模式,有什么区别?
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
27. 安全问题,如 XSS 和 CSRF
Xss
- 跨站脚本攻击,是一种网站应用程序的安全漏洞攻击,是代码注入的一种。常见方式是将恶意代码注入合法代码里隐藏起来,再诱发恶意代码,从而进行各种各样的非法活动。
防范:所有用户输入的都是不可信的,输入过滤和转义,重要cookie设置为HttpOnly
CSRF
- 跨站请求伪造,也称 XSRF,是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。与 XSS 相比,XSS利用的是用户对指定网站的信任,CSRF利用的是网站对用户网页浏览器的信任。
防范:
- 验证Http Referer字段,判断请求来源是否合法,Referer记录了该 HTTP 请求的来源地址
- 在请求地址中添加 token 并验证
- 在 HTTP 头中自定义属性并验证
详解:https://www.jianshu.com/p/64a413ada155
28. Css实现文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
29. js实现类似于add(1)(2)(3)调用方式的方法
简单方法:
var add = function(a){
return function(b){
return function(c){
return a+b+c;
};
};
};
但是这样的代码在add(1)(2)或者add(1)(2)(3)(4)时便不对了。
正确实现:
function add () {
var args = Array.prototype.slice.call(arguments);
var fn = function () {
var arg_fn = Array.prototype.slice.call(arguments);
return add.apply(null, args.concat(arg_fn));
}
// 重写valueOf方法,是为了处理隐式类型转换
fn.valueOf = function () {
return args.reduce(function(a, b) {
return a + b;
})
}
return fn;
}
详解:https://www.cnblogs.com/coco1s/p/6509141.html 或
https://blog.csdn.net/m0_37793545/article/details/87862847
30. 定义一个log方法,让它可以代理console.log的方法(支持传入n个参数)
function log(){
console.log.apply(console, arguments);
}
31. 当new Foo()时发生了什么
- 创建了一个新对象
- 将新创建的空对象的隐式原型指向其构造函数的显示原型。
- 将this指向这个新对象
- 如果无返回值或者返回一个非对象值,则将新对象返回;如果返回值是一个新对象的话那么直接直接返回该对象。
手写一个new实现
function create() {
// 创建一个空的对象
var obj = new Object(),
// 获得构造函数,arguments中去除第一个参数
Con = [].shift.call(arguments);
// 链接到原型,obj 可以访问到构造函数原型中的属性
obj.__proto__ = Con.prototype;
// 绑定 this 实现继承,obj 可以访问到构造函数中的属性
var ret = Con.apply(obj, arguments);
// 优先返回构造函数返回的对象
return ret instanceof Object ? ret : obj;
};
详解:《JS高程》 6.2.2 《你不知道的Javascript》2.2.4
32. Css样式的百分比都相对于谁?
-
相对于父级宽度的:
max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等; -
相对于父级高度的:
max-height、min-height、height、top、bottom、grid-template-rows、grid-auto-rows、row-gap 等;
-
相对于主轴长度的:
flex-basis 等;
-
相对于继承字号的:
font-size 等;
-
相对于自身字号的:
line-height 等;
-
相对于自身宽高的:
border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等;
-
相对于行高的:
vertical-align 等;
-
特殊算法的:
background-position (方向长度 / 该方向除背景图之外部分总长度)、border-image-slice (相对于图片尺寸)、filter 系列函数等;
如果自身设置 position: absolute,“父级”指:Boring:破坏文档流的div高度设为百分比是相对谁而言的?;
如果 position: fixed,“父级”指视口(父级不存在 transform 为非 none 值的情况下)。
来源:知乎
链接:https://www.zhihu.com/question/36079531/answer/65809167
33. 什么是闭包? 堆栈溢出? 内存泄漏? 哪些操作会造成内存泄漏?怎么样防止内存泄漏?
闭包:就是能够读取其他函数内部变量的函数。
堆栈溢出:就是不顾堆栈中分配的局部数据块大小,向该数据块写入了过多的数据,导致数据越界,结果覆盖了别的数据。经常会在递归中发生。
内存泄露是指:用动态存储分配函数内存空间,在使用完毕后未释放,导致一直占据该内存单元。直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。
造成内存泄漏:
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
防止内存泄露:
1、不要动态绑定事件;
2、不要在动态添加,或者会被动态移除的dom上绑事件,用事件冒泡在父容器监听事件;
3、如果要违反上面的原则,必须提供destroy方法,保证移除dom后事件也被移除,这点可以参考Backbone的源代码,做的比较好;
4、单例化,少创建dom,少绑事件。
34. 移动端上什么是点击穿透?如何解决?
点击穿透现象有3种:
点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件跨页面点击穿透问题:如果按钮下面恰好是一个有href属性的a标签,那么页面就会发生跳转另一种跨页面点击穿透问题:这次没有mask了,直接点击页内按钮跳转至新页,然后发现新页面中对应位置元素的click事件被触发了
解决方案:
1、只用touch
最简单的解决方案,完美解决点击穿透问题
把页面内所有click全部换成touch事件( touchstart 、’touchend’、’tap’)
2、只用click
下下策,因为会带来300ms延迟,页面内任何一个自定义交互都将增加300毫秒延迟
3、tap后延迟350ms再隐藏mask
改动最小,缺点是隐藏mask变慢了,350ms还是能感觉到慢的
4、pointer-events
比较麻烦且有缺陷, 不建议使用mask隐藏后,给按钮下面元素添上 pointer-events: none; 样式,让click穿过去,350ms后去掉这个样式,恢复响应缺陷是mask消失后的的350ms内,用户可以看到按钮下面的元素点着没反应,如果用户手速很快的话一定会发现
35. TCP协议中的三次握手,四次挥手
TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接,四次挥手断开连接
位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)
Sequence number(顺序号码) Acknowledge number(确认号码)
三次握手:
第一次握手:主机A发送位码为syn=1,随机产生seq number=1234567的数据包到服务器并进入SYN_SEND状态,主机B由SYN=1知道,A要求建立联机;
第二次握手:主机B收到请求后要确认联机信息,向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包并进入SYN_RECV状态
第三次握手:主机A收到后检查ack number是否正确,即第一次发送的seq number+1,以及位码ack是否为1,若正确,主机A会再发送ack number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连接建立成功,客户端和服务器进入ESTABLISHED状态。
完成三次握手,主机A与主机B开始传送数据。
四次挥手
中断连接可以是Client端发起,也可以是Server端发起
假设Client端发起中断连接请求,也就是发送FIN报文。Server端接到FIN报文后,意思是说"我Client端没有数据要发给你了",但是如果你还有数据没有发送完成,则不必急着关闭Socket,可以继续发送数据。所以你先发送ACK,“告诉Client端,你的请求我收到了,但是我还没准备好,请继续你等我的消息”。这个时候Client端就进入FIN_WAIT状态,继续等待Server端的FIN报文。当Server端确定数据已发送完成,则向Client端发送FIN报文,“告诉Client端,好了,我这边数据发完了,准备好关闭连接了”。Client端收到FIN报文后,"就知道可以关闭连接了,但是他还是不相信网络,怕Server端不知道要关闭,所以发送ACK后进入TIME_WAIT状态,如果Server端没有收到ACK则可以重传。“,Server端收到ACK后,“就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复,则证明Server端已正常关闭,那好,我Client端也可以关闭连接了。Ok,TCP连接就这样关闭了!
相关问题:
1.为什么建立连接协议是三次握手,而关闭连接却是四次握手呢?
这是因为服务端的LISTEN状态下的SOCKET当收到SYN报文的建连请求后,它可以把ACK和SYN(ACK起应答作用,而SYN起同步作用)放在一个报文里来发送。但关闭连接时,当收到对方的FIN报文通知时,它仅仅表示对方没有数据发送给你了;但未必你所有的数据都全部发送给对方了,所以你可以未必会马上会关闭SOCKET,也即你可能还需要发送一些数据给对方之后,再发送FIN报文给对方来表示你同意现在可以关闭连接了,所以它这里的ACK报文和FIN报文多数情况下都是分开发送的.
2.为什么TIME_WAIT状态还需要等2MSL后才能返回到CLOSED状态?
这是因为虽然双方都同意关闭连接了,而且握手的4个报文也都协调和发送完毕,按理可以直接回到CLOSED状态(就好比从SYN_SEND状态到ESTABLISH状态那样);但是因为我们必须要假想网络是不可靠的,你无法保证你最后发送的ACK报文会一定被对方收到,因此对方处于LAST_ACK状态下的SOCKET可能会因为超时未收到ACK报文,而重发FIN报文,所以这个TIME_WAIT状态的作用就是用来重发可能丢失的ACK报文。
详解解释:http://www.cnblogs.com/cy568searchx/p/3711670.html
36. 写出下面程序的运行结果
// 坑人的连续赋值问题
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x); // undefinde
console.log(b); // {n:1,x:{n:2}}
详解:https://www.zhihu.com/question/41220520
37. 写出下面程序的运行结果
function f1(){
var n=999
nAdd=function(){
n+=1
console.log(n)
}
function f2(){
console.log(n)
}
return f2
}
f1()() // 999
nAdd() // 1000
nAdd() // 1001
38. require和import的区别
遵循的规范不同
- require/exports是CommonJS的一部分
- import/export是ES6新规范
书写形式不一样
require/exports 的用法只有以下三种简单的写法:
const fs = require('fs')
exports.fs = fs
module.exports = fs
而 import/export 的写法就多种多样:
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'
本质上的区别
- require的引用相当于拷贝,原js内再发生变化不会影响到拷贝的值
- import的引用是引用了地址
详解:https://www.zhihu.com/question/56820346
39. 前端模块化CommonJS,AMD,CMD,ES6
- commonJS用同步的方式加载模块。node,webpck
- AMD规范采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。特点:前置依赖,提前执行。require.js
- CMD与AMD很类似,CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。sea.js
- ES6的模块不是对象,import命令会被 JavaScript 引擎静态分析,在编译时就引入模块代码,而不是在代码运行时加载,所以无法实现条件加载。也正因为这个,使得静态分析成为可能。import,export。
详解:https://github.com/zgfang1993/blog/issues/29
40. Http1.x和http2和https之间的区别
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/232
https://segmentfault.com/a/1190000015316332
https://zhuanlan.zhihu.com/p/72616216
扩展:
SSE:Server-Sent Events https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
SSE是服务端向客户端推送“数据”,http2新增服务端推送是推送静态文件
41. fixed,absolute,relative的优先级问题
42. Funtion和Object区别(主要考察原型)
https://juejin.cn/post/6844903630357659655