一面
上来问了下项目的一些问题，然后就开始问基础知识
## box-sizing
* 标准盒模型与IE的盒模型
* box-sizing的取值
## padding取值
有哪些单位，当为百分比时是根据哪个值算出的
float浮动
清除浮动的常用方法
z-index不起作用时怎么办
美剧老司机 项目中用的较多，检查需要层叠元素和它们的的父元素的position属性即可，根据情况设置为relative或absolute
this的指向
以下两次调用函数输出的this分别是什么
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">// A是一个对象
var A = {
foo: 'hello'
}
A.f = function(){console.log(this)}
var B = A.f
A.f() // -> A
B() // -> window
</pre>
## 说下原型
简要说了下原型与原型链，函数与继承等等
## vue-router实现单页路由的原理
这里了解的不多，只说了匹配url使用所设置的组件渲染，应该说下对地址的监听和视图的同步更新
## 字符串解析为dom元素
innerHTML，居然忘了..
## 前端如何处理跨域
常见的那几种方法(jsonp,iframe..)
## 二面
## 类数组对象能否用foreach方法
比如使用getElementsByXXXXX方法得到的HTMLCollection集合就是一个类数组对象，具有length属性
普通数组可以使用foreach等方法，而类数组对象没有这些方法
延伸一下，如何把类数组对象转换成数组？ 可以使用Array.prototype.slice.call()
## 如何获取函数实参与形参的个数
* 实参个数 - arguments.length
* 形参个数 - arguments.callee.length
## 一个鼠标事件的问题
若有一个div元素outer和处于它位置中心的div元素inner，类似下图这样，灰色的区域是outer，红色的部分是inner
将鼠标从外部移到中心时outer和inner上会触发哪些鼠标事件？
一开始肯定想到的是mouseenter和mouseover，不过想的和说的貌似不是很周全
回来后又想了想用代码测试了两种情况:内嵌关系和同级关系，后者使用z-index层叠
在outer和inner上分别绑定mouseenter, mouseover和mouseleave的事件监听函数进行测试
当鼠标移到中心然后在回到初始位置时所触发的事件如下表所示
| | 进入outer | 进入inner | 离开inner | 离开outer |
| --- | --- | --- | --- | --- |
| 1-outer | mouseover, mouseenter | mouseover | mouseover | mouseleave |
| 1-inner | | mouseover, mouseenter | mouseleave | |
| 2-outer | mouseover, mouseenter | mouseleave | mouseover, mouseenter | mouseleave |
| 2-inner | | mouseover, mouseenter | mouseleave | |
## target和originTarget的区别
之前看MDN的时候发现originTarget已不是标准中的方法，所以没怎么细看。
回来又验证了下，发现输出的是undefined，已经弃用了，因此这个问题我是no cloth的，我当时还提了是不是应该是currentTarget…
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">let body = document.body
body.addEventListener('click', e => {
console.log(e.target); // -> 点击的元素
console.log(e.currentTarget) // -> body
console.log(e.originalTarget) // -> undefined
})
</pre>
## 列举数组的方法
sort(),slice(),splice(),push(),pop(),shift(),unshift()等等
## splice的用法
返回删除的元素数组，若未删除元素则为空数组。
### 删除元素
<pre class="hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">var arr = [1,2,3]
arr.splice(1,1) // 从索引1处删除1个元素 -> [2]
</pre>
### 添加元素
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">var arr = [1,2,3]
arr.splice(1,0,2,1) // 在索引为1的元素后添加2和1 -> []
console.log(arr) // -> [1, 2, 1, 2, 3]
</pre>
## 在一个事件监听函数中中止同一事件后续的其他监听函数
使用Event的stopImmediatePropagation方法，注意它与stopPropagation的区别
<pre class="prettyprint hljs coffeescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">var body = document.body
body.addEventListener('click',(e) => {
console.log('first')
e.stopImmediatePropagation()
})
body.addEventListener('click',(e) => {
console.log('second')
})
</pre>
运行上例时会发现当点击页面时仅会输出”first”
## 如何将一个div元素变成可输入编辑文本的元素(参考富文本编辑器)
这里我不会就没继续往下问，提示了下有个contenteditable属性，还要些后续操作
## cookie，localStorage和sessionStorage的区别
* cookie，保存为字符串，存储容量小，随请求自动发送
* localStorage与sessionStorage均为本地存储，属性Storage对象具有内置的API，均为本地存储
* localStorage在关闭窗口或标签页后依然存在，而sessionStorage会被清除
* 在同源的不同标签页中共享localStorage，但不共享sessionStorage
## prototype和__proto__
* prototype是函数的属性，用来设置原型对象
* __proto__是对象的属性，值即为对象的原型
## 添加事件的几种方法
- html标签中
<pre class="hljs dust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;"><elonclick="f(){}"> </pre>
2. onclick, onchange等属性
<pre class="hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">el.onclick = f(){}
</pre>
3. addEventListener
<pre class="hljs less" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">el.addEventListener('click', f(){})
</pre>
接着又问了这三种有什么区别，以及第三种方法的第三个参数的取值和作用
有想了解更多的朋友可以
一、搜索QQ群，前端学习交流群：1093606290
网友评论