酷狗一面
1. 如何实现三栏布局(左右两边固定宽度,中间自适应)?
使用 flex 布局:父元素设置 display: flex,左右两边设置固定宽度,中间设置 flex-grow: 1
2. 如何实现弹窗水平垂直居中?
3. == 和 === 的区别
=== 为恒等符:当等号两边的值为相同类型的时候,直接比较等号两边的值,值相同则返回 true,若等号两边的值类型不同时直接返回 false。== 为等值符:当等号两边的值为相同类型时比较值是否相同,类型不同时会发生类型的自动转换,转换为相同的类型后再作比较。a、如果一个是 null、一个是 undefined,那么 [相等]。b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的 toString 或者 valueOf 方法。js 核心内置类,会尝试 valueOf 先于 toString;例外的是 Date,Date 利用的是 toString 转换。非 js 核心的对象,令说(比较麻 烦,我也不大懂)e、任何其他组合,都 [不相等]。
4. 30 == ’30’ 的过程是怎样的?
30 为数值类型,而 ’30’ 未字符串类型,因此等号两边的数据类型不相等,需要进行转换类型;
由于一个是数值,另一个字符串,所以需要将字符串转换成数值再进行比较,即 ’30’ => 30;
这时等号两边同样为数值型数据,即 30 == 30,所以返回 true
5. 以下代码输出的是什么?为什么呢?
for (var i=0; i<5; i++) {
setTimeout(function timer() {
console.log(i);
}, 0 );
}
6. 你有使用过闭包吗?
7. 模块化的异步加载怎样做?
8. window.onload 执行时间?
9. 图片加载完的时候会执行吗?
10. 了解 JS 继承吗?
11. 利用原型链的继承有什么缺点吗?
12. 知道如何修改 this 的指向吗?
修改 this 指向的办法有三种:apply、call 和 bindapply、call:通过传入需要指向的对象,从而改变 this 的指向,指向传入的第一个参数;bind:它会创建一个函数的实例,其 this 值会被绑定到传给 bind() 函数的值。
window.color = ‘red’;
var o = {color:’blue’};
function sayColor(){
console.log(this.color);
}
var globalSaycolor = sayColor;
var objectSaycolor = sayColor.bind(o);
globalSaycolor(); // red
objectSaycolor(); // blue
补充
其实还有一种:new 关键字改变 this 指向因为在 new 的过程中,其中有一个步骤为将构造函数内部的 this 指向实例对象,所以通过 new 关键字也可以改变 this 的指向。
13. apply 和 call 的区别?
相同点:可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。不同点:实际上,apply 和 call 的功能是一样的,只是传入的参数列表形式不同。apply:最多只能有两个参数——新 this 对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果 argArray 不是一个有效的数组或 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数。
call:它可以接受多个参数,第一个参数与 apply 一样,后面则是一串参数列表。这个方法主要用在 js 对象各方法相互调用的时候,使当前 this 实例指针保持一致,或者在特殊情况下需要改变 this 指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
14. 有一个按钮是异步生成的,怎样对它进行事件绑定?
由于按钮是异步生成的,所以我选择将事件绑定在按钮生成的父元素上,通过事件委托的机制,利用事件冒泡,把事件绑定在父元素上,可以通过判断 event.target 按钮是否已经生成,从而实现相应的事件。科普补充:事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到 document 对象;事件捕获则跟事件冒泡相反,事件会从 document 对象开始发生,直到最具体的元素;
15. 跨域有处理过吗?
我处理过的跨域有两种情况:
一种是在页面中嵌入了一个 iframe,因此父子 iframe 间产生了跨域,要解决这个问题,只需要把 document.domain 设置成相同的值就可以在两个页面里进行相应的操作了;
另外一种情况是用 Vue 开发涉及到的跨域问题,这个问题只需要修改 config 文件夹下的 index.js 中的 dev:{} 部分中修改 proxyTable 参数即可,相当于对跨域的 url 进行了代理,从而可以顺利访问。
另外说了一下自己比较熟悉的一种跨域解决方案:JSONPJSONP 解决跨域问题的本质其实就是 <script> 标签可以请求不同域名下的资源,即 <script> 请求不受浏览器同源策略影响。
面试官听到 JSONP 立刻提出了一个问题:JSONP 是否可以支持 POST 方法?为什么?
JSONP 只支持 GET 的请求方法,上面也提到了 JSONP 原理其实就是利用 <script> 标签发送了一个 URL 给服务器,其实与 ajax XmlHttpRequest 协议无关了,相当于输入了一个 url 而已,所以必然只能为 GET 请求方法。
16. POST 和 GET 的区别?
17. 浏览器缓存的方式?
18. 看你有用过 Promise,知道 Promise 有几种状态?
19. 你知道 pending 状态可以停止吗?
20. 那 XMLHttpRequest 的 pending 状态可以停止吗?
21. 知道 Promise 和 setTimeout 的执行顺序吗?
22. vue 中生命周期中的钩子函数用过哪些?
23. 为什么不把数据放在 created 函数中?
24. 对 Vue 的数据双向绑定有了解吗?
25. 了解重绘和回流吗?页面的加载顺序?
26. 如何减少回流、重绘?怎样控制只有一部分回流?
27. 了解什么算法?快排?
28. 还了解什么排序算法?
29. 了解二叉查找树吗?
30. 有了解什么后端语言吗?知道面向对象的特性吗?
31. 知道数据库连接池吗?
32. 未来前端的规划?
酷狗二面
在面完第一面之后,本来以为终于结束了,没想到迎来的是第二技术面,后面面试官介绍说其实本来是应该两个人同时面我的,因为有一个面试官没空,所以就错开了,就有了 ” 二面 ” 了,其实本质上还是一面而已。
1. 自我介绍
2. 问了一下笔试的时候不应该错的题
3. 理解的 HTTP 状态码有哪些?
4. 正则的题目,对比 /^[a-z0-9][a-z]+$/ 和 /^[a-z0-9][a-z]*$/ 的区别?
5. display:none 和 visibility:hidden 的区别?
6. CSS 选择器的理解,你知道多少选择器?
7. CSS3 布局,移动端有用过 rem 吗?布局的话一般怎样布局?
8. Flex 布局和传统的其他布局有什么优点?
9. Flex 的居中方式有哪些?其他方式有哪些?
10. display 设置 inline-block 的话,多个之间有间隔应该怎样处理?(父节点 font-size: 0)
11. 更熟悉那方面的技术栈?
12. 对自己项目是怎样设计和选型的?
13. 有用到 vuex 吗?
14. 组件之间的通讯怎样做到?
15. 真的学习前端是什么时候开始?
16. 方向是选择全栈还是只做前端?
17. 有没有在 nodeJS 上做过什么?
18. 有没有在 npm 上面做过开源的学习?
19. 对毕业之后的学习规划?