酷狗一面
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. 对毕业之后的学习规划?
发表回复