前端面试题

一、Javascript

1、常考问题

1.1、考查同步任务和异步任务执行顺序**

问题：写出以下代码执行顺序
setTimeout(()=> console.log(1));
Promise.resolve().then(()=> console.log(4));
(()=> console.log(5))();

答案：5,4,1

考点：同步任务早于异步任务执行，异步中的本轮循环早于次轮循环（异步任务包括追加在‘本来循环’和‘次轮循环’ 的任务）

1.2、考查对象继承及作用域**

考查1：
var colorObj = {color:'red'}
function SuperType(obj){
	this.color = obj.color;
}
SuperType.prototype.getSuperValue = function(){
		return this.color;
}

var superInstance1 = new SuperType({color:'green'});
console.log(superInstance1.getSuperValue());//green

var superInstance2 = new SuperType(colorObj);
console.log(superInstance2.getSuperValue());//red

var superFn = new SuperType({color:5}).getSuperValue;
console.log(superFn())//undefind

console.log(superInstance1.hasOwnProperty('getSuperValue'))//false(原型链上继承过来的属性无法通过hasOwnProperty检测到，返回false。)

console.log(SuperType.prototype.constructor)//SuperType
console.log(superInstance1.constructor===superInstance2.constructor);//true	
console.log(superInstance1.constructor.prototype.constructor===SuperType.prototype.constructor);//true


考查2：重写原型对象
SuperType.prototype = {
	getSuperValue:function(){
		return this.color;
	}
}
// 重写原型后，重写之前创建的实例原型还指向原来的原型
console.log(superInstance1.constructor); //SuperType

// 重写原型后，原型的constructor指向Object
var superInstance3 = new SuperType({color: 'blue'});
console.log(superInstance3.constructor); //Object

1.3、let和var的区别

（详见：http://blog.csdn.net/yihanzhi/article/details/79564023）

	//代码1
    for(var i=0;i<3;i++){
        setTimeout(function(){
        //代码1_1
            console.log(i);//3,3,3
        },0)
        i==0&&console.log('for1');
    }
    //代码2
    for(let j=0;j<3;j++){
        setTimeout(function(){
        //代码2_1
            console.log(j);//0,1,2
        },0)
        j==0&&console.log('for2');
    }
    //代码3
    console.log(i);//3
    //代码4
    console.log(j);//报错，错误信息：Uncaught ReferenceError: j is not defined
}

结果输出顺序：for1>for2>3>后提示报错信息>然后输出3,3,3>最后输出0,1,2。

本题考查点有两个：
1）考查let和var的区别；
2） 考查代码执行顺序（先同步后异步）。

先同步后异步原则所以代码执行顺序是：代码1>代码2>代码3>代码4>代码1_1>代码2_1
代码4报错是因为let的作用域局限在代码块中；而var的作用域范围为函数内；
代码1_1输出结果均是3，是因为setTimeout中异步函数后执行，执行时i变量值为3；
代码2_1输出结果正常，是因为let作用域范围是代码块中。 let 不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。for 的每次循环都是不同的块级作用域，而 let 声明的变量是块级作用域的，所以也不存在重复声明的问题。

1.4、设计模式

工厂模式
构造函数模式
原型模式
构造函数和原型组合模式
动态原型模式
寄生构造函数模式
稳妥构造函数模式
单例模式
…

1.5、创建实例的过程（new 方法的过程）

1.6、深拷贝、浅拷贝

1.7、闭包

1.8、原型

1.9、js数据类型

• 值类型（基本类型）：数值（Number）、字符串(String)、布尔值(Boolean)、Undefined、Null
• 引用类型：Object

2、ES6

2.1、使用箭头函数应注意什么

1）箭头函数的this指向定义时所在的对象，而不是调用时所在的对象。
2）箭头函数没有prototype(原型)，所以箭头函数本身没有this，也就不能用call()、apply()、bind()这些方法去改变this的指向。
3）不可以当作构造函数，即不可以使用new命令，否则会抛出一个错误。
4）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
5）不可以使用yield命令，因此箭头函数不能用作Generator函数。

2.2 Set和Map的区别

• Set 是一种叫做集合的数据结构，以 {value, value}的形式储存元素；
• Map 是一种叫做字典的数据结构，以 {key=>value,key=>value} 的形式储存。

3、其它

跨域
XSS，sql注入，CSRF

二、CSS

盒模型
BFC
浮动
内容水平、垂直居中如何实现

三、浏览器相关

1、垃圾回收机制

垃圾回收机制包括：标记清除和引用计数两种。
详见（http://blog.csdn.net/yihanzhi/article/details/79559062）

2、浏览器存储

四、VUE

1、vue如何实现兄弟组件间的数据传递

实现方法：子传父，父传子
通过事件触发，子组件传值给父组件；通过props属性，父组件再传值给子组件。
详见http://blog.csdn.net/yihanzhi/article/details/79569937

2、v-for中key属性的作用

v-for中key属性的作用

五、其它