前言
坐标:杭州
。自己从事前端工作差不多2年,本人不是科班出身,算是一个小菜鸡到现在刚入门吧。2年前去面试,因为技术菜,其实公司并没有怎么去了解我的技术,主要还是看个人的态度和学习能力,所以很感谢前面的俩个老东家,把我这个小菜鸡带入门了。今年,在上一个东家做的项目差不多也成型了,发现自己也到了一个一个瓶颈期吧,所以出来闯闯看。
出去面试其实就是一个快捷径去认识到自己的不足,希望能给和我一样在面试的江湖人一点小小的抛砖引玉吧。
笔试题
1)js的继承是什么?原型链?
function super (){
this.a = '1'
}
function sub (){
super.call(this)
}
或者
function sub (){...}
sub.prototype = new super();
//直接在他的原型上new一个super的实例。
在new的过程中,发生了,改变this的指向,执行super里面的代码,返回一个新的函数。
es6的继承方法。
class sub extends super(){
constructor(){
//super()和super(props)的区别
super() // cosole.log(this.props) undifined
super(props) // console.log(this.props) //打印出定义好的props
// super() 它在这里表示父类的构造函数,用来新建父类的this对象。
//子类必须调用这个方法,不然继承的话会报错。子类必须在constructor方法中调用super方法,否则新建实例时会报错。
//这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,
//得到与父类同样的实例属性和方法,然后再对其进行加工,
//加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。
}
// constractor一定是必要的吗?
// 答 是的,就算你不声明,也会隐式的把你声明好一个空的constractor。
2)ajax是什么?
异步的javascript+Xml
var xhr = new XmlHttpRequest() 或者 new ActiveXObject()
xhr.onreadyChange = function(){
if(xhr.readyState = 4){
if(xhr.status == 200){
var test = xhr.responseTest()
}
}
}
xhr.open("Get" , url ,false) //第三个参数,是否异步
3)如何对一个数组做去重?
(1)set方法
var arr = new Set (arr);
arr = Array.from(arr);
(2)还可以利用对象的key不能相同去做判断
(3)for循环
4)rem和em的区别?
rem是相对于 根元素 上的font-size的大小
em是相对于 父元素 的font-size的大小
这里对于em和rem的理解,不是很准确和深入,不想误导新的朋友~ 下面有同学推荐了一个网站 综合指南: 何时使用 Em 与 Rem
(更新于2018/07/03 22:51)
5)盒子模型
(1)普通盒子模型 boxsizing:content-box; (2)怪异盒子模型 boxsizing:border-box;
6)http的状态码
200 304 500 404 415 都可以去了解一下
7)实现一个函数能做到 function add(1)(2)(3) //6,达到function add(1)(2)(3)...(n)
这里要引生出来俩个js内置的方法,valueOf
和toString
方法,在特定的情况下,这俩个方法都会自动调用,而且在用户定义了新的valueof和tostring的时候,会优先执行新的方法。
在做字符串拼接等需要调用tostring()方法的是有优先调用toString(),如果调用后还是不能返回原始类型的话会继续调用valueOf方法。
而在做类似number的运算的时候会优先调用valueOf().
而对于函数而言,add 和add()的返回是不一样的。add()会返回return的值。而add则会调用valueOf答应出来函数本身的代码.函数的转换类似于number。
解题
function add () {
var args = [].slice.call(arguments);//这里也用到了闭包的概念对args的存储
var fn = function () {
var arg_fn = [].slice.call(arguments); //这里的递归是为了合并参数
return add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function() {
return args.reduce((a, b) => a + b);//真正的输出是valueof
}
return fn;
}
8)执行循序 setTimout和promise 这里我们先要理解js是是单线程执行的。在内存中函数的执行是分同步和异步的。 同步任务会放在主线程中一一执行,而异步任务会先注册到事件队列里。等待主线程任务执行完毕,才会去异步队列里拿出任务放在主线程中去执行。
这里还有俩个概念要去理解,宏事件
微事件
。
宏事件: script, setTimeout,setInterval
微事件:promise
这里还要多说一句promise是立即执行的函数
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(a, b) {
console.log(2);
for(var i = 0; i < 10; i++) {
i == 9 && a();
}
console.log(3);
}).then(function() {
console.log(4)
});
console.log(5)
//输出:2,3,5,4,1
先执行宏事件,再执行微事件,然后再循环.
9)
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)();
new Foo().getName(); // 3 相当于 (new Foo()).getName()
new new Foo().getName(); // 3 相当于 new ((new Foo()).getName)()
new Foo.getName(); 和 new Foo().getName(); 的区别在于
new Foo 结合属于 new 无参数列表的情况(17级)
new Foo() 结合属于 new 有参数列表的情况(18级)
后三个可以参考js的运算符优先级问题
- Object.defineProperty()和 {} 出来的对象有什么区别
这个问题说实话,我还真不太确定是什么,我觉得可能是defineProperty定义出来的对象 还可以定义是否可枚举,可读写的属性吧
更新于2018/07/05
今天在枚举一个对象的时候,竟然发现defineProperty定义出来的对象, 如果不定义enumerable:true是不可以被枚举的,而{}这样声明出来的对象就可以直接被枚举!
11)http缓存有什么方法? 强缓存,协商缓存,304
强缓存:carche-control :max-age
协商缓存:利用304
12)call,apply的区别。这俩者和bind的区别。bind如何用原生实现出来。
call,apply的区别时后面的传参。call时一个一个传,apply时一个数组。
bind能时返回一个新的函数。
Function.prototype.bind = function (context) {
//判断调用此方法的是否是一个函数,不是函数就报错
if (typeof this !== "function") {
throw new Error(this + "is not a function");
}
var self = this;
var args = [];
//把参数循环出来
for (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof self ? this : context, args.concat(bindArgs));
}
fbound.prototype = Object.create(self.prototype);
//返回的函数不仅要和 被调函数的函数体相同,也要继承人家的原型链
return fbound;
}
13)一句话打乱一个数组?
arr.sort(function(){ return 0.5 - Math.random()})
14)箭头函数的this的指向问题
阮一峰博客写的很准确,推荐 箭头函数
15)浏览器渲染原理 略(要很详细的讲,可能要写一篇文章~,大家可以去开源社区找专门的文章去了解~)
16)右边固定,左边自适应。左边固定右边自适应。上面固定高度,下面自适应高度。
//左边自适应,右边固定
.float-box{
display:flex;
justify-content:end;
}
.left{
width: 100%;
border:1px solid #ddd;
}
.right{
width:300px;
border:1px solid #ddd;
}
17)水平居中?水平垂直居中?
水平居中
inline 元素用text-align: center;即可,如下
.container {
text-align: center;
}
block 元素可使用margin: auto;,PC 时代的很多网站都这么搞。
.container {
text-align: center;
}
.item {
width: 1000px;
margin: auto;
}
绝对定位元素可结合left和margin实现,但是必须知道宽度。
.container {
position: relative;
width: 500px;
}
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
垂直居中
inline 元素可设置line-height的值等于height值,如单行文字垂直居中:
.container {
height: 50px;
line-height: 50px;
}
绝对定位元素,可结合left和margin实现,但是必须知道尺寸。
- 优点:兼容性好
- 缺点:需要提前知道尺寸
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
绝对定位可结合transform实现居中。
- 优点:不需要提前知道尺寸
- 缺点:兼容性不好
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
绝对定位结合margin: auto,不需要提前知道尺寸,兼容性好。
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
下节预告:
算法题
~~ 我已经在努力高产的像母猪了~
更新于 2018/7/03 11:38
当当当~ 新鲜出炉~ 2018年6月前端面试经历(中)