前端面试题集结

平安：

1.怎样创建一个对象？

定义：
ECMA-262把对象定义为“无序属性的集合，其属性可以包含基本值、对象或者函数”。

创建对象：

1）工厂模式

function createPerson(name,age,job){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}
var person1 = createPerson('lyn',24,'web developer');

//工厂模式虽然实现了创建多个相似对象的问题，但没有解决对象识别的问题（即怎样知道一个对象的类型）

2）构造函数模式

function Person(name,age,job){//构造函数是定义在Global对象（在浏览器中是window对象）
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person('lyn',24,'web developer');
person1.sayName();
//构造函数模式下要创建Person实例，必须要用new操作符。此时在创建对象时会经历一下四个步骤：
/**
*1.创建一个新对象；
*2.将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
*3.执行构造函数中的代码（为这个新对象添加属性）；
*4.返回新对象。
*/

3）原型模式

function Person(){

}
Person.prototype.name = 'lyn';
Person.prototype.age = 24;
Person.prototype.job = 'web developer';
Person.prototype.sayName = function(){
    console.log(this.name);
};

var person1 = new Person();
person1.sayName();//'lyn'

var person2 = new Person();
person2.sayName();//'lyn'

console.log(person1.sayName == person2.sayName);
//原型模式与构造函数不同的是，新对象的属相和方法是由所有实例共享的

4）组合使用构造函数模式和原型模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby","Court"];
}

Person.prototype = {
    constructor:Person,
    sayName:function(){
        console.log(this.name);
    }
};
var person1 = new Person('lyn',24,'web developer');
var person2 = new Person('yaya',18,'singer');

person1.friends.push('yurui');
console.log(person1.friends);//"Shelby","Court",'yurui'
console.log(person2.friends);//"Shelby","Court"
console.log(person1.friends === person2.friends);//false
console.log(person1.sayName === person2.sayName);//true

//是用来定义引用类型的一种默认模式

5）动态原型模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = joob;
    if(typeof this.sayName != "undefined"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        }
    }
}
var person1 = new Person('lyn',24,'web developer');
person1.sayName();

6）寄生构造函数模式

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}
var person1 = new Person('lyn',24,'web developer');
person1.sayName();//'lyn'

7）稳妥构造函数模式

function Person(name,age,job){

    //创建要返回的对象
    var o = new Object();

    /*可以在这里定义私有变量和函数*/

    //添加方法
    o.sayName = function(){
        console.log(name);
    }

    //返回对象
    return o;
}
var person1 = Person('lyn',24,'web developer');
person1.sayName();

2.vue的父组件和子组件之间怎么传参？
组件实例的作用域是孤立的，所以不能在子组件的模板内直接引用父组件的数据。
父—->子：
父组件的数据需要通过prop才能下发到子组件中。子组件要显式地用props选项声明它预期的数据：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

然后在传入一个普通字符串：

<child message="hello!"></child>

子—->父：
子组件可以使用vue的自定义事件来向父组件传递参数。

• 使用$on(eventName)监听事件
• 使用$emit(eventName)触发事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

3.定义事件的方法？

1）dom直接操作

<button onclick="clickFn()">click me</button>

2）.onclick实现

<button id="btn">click me</button>  
<script type="text/javascript">
    document.getElementById("#btn").onclick = function(){
        console.log('click');
    }
</script>

3）.addEventListener

document.getElementById("btn").addEventListener("click", function(){
      console.log('click');
},false);

4.闭包的概念

1）什么是闭包？

闭包是指有权访问另一个函数作用域中的变量的函数。
例：

function a(){
    var name = 'lyn';
    function b(){
        console.log(name);
    }
    return b;
}
var c = a();
c();

//当函数a的内部函数被函数a外的一个变量引用的时候，就创建了一个闭包。

所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。

2）闭包有什么作用？

闭包有两大作用：b函数可以读取a函数内部的变量；让a中的变量值不被js的GC（垃圾回收）机制回收，一直保存在内存中。

5.堆、栈、堆栈、队列？
堆栈和栈是一个概念；

1）队列

先进先出，就像一条路，有一个入口，一个出口，先进去就可以先出去。

• 队列是一种特殊的线性表，只允许在表的前端（front）进行删除操作，在表的后端（rear）进行插入操作；
• 队列中没有元素时，称为空队列；
• 建立顺序队列结构时必须为其静态分配或动态申请一片连续的存储空间，并设置队头指针front（指向队头元素），队尾指针rear（指向下一个入队的存储位置）；
• 队列采用FIFO（first in first out），新元素总是被插入到链表的尾部，读取的时候总是从链表的头部开始读取；

2）栈

后进先出，栈像一个箱子，后放的在上边。

• 一级缓存，被调用时处于存储空间中，调用完毕立即释放；

3）堆

与队列和栈不同，不存在先进后出还是先进先出。

• 二级缓存，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。

微汇：

1.git和svn的区别？git解决冲突？git版本回退？
区别：

• git是分布式的，svn说集中式的；
• git把内容按元数据方式存储，svn按文件存储；
• git分支和svn分支不同，svn会发生分支遗漏，而git可以同一个工作目录下快速的在几个分之间切换，很容易发现未被合并的分支；
• git没有一个全局版本号，svn有全局版本号；
• git的内容完整性要优于svn，git的内容存储使用的是SHA-1哈希算法，这能保证代码内容的完整性，确保在遇到磁盘故障和网络问题时降低对版本库的破坏；

集中式版本控制系统：版本库是集中存放在中央服务器的，每次工作之前要先从中央服务器取到最新版本，必须联网。
分布式版本控制系统：没有“中央处理器”，每个人的电脑上都是一个完整的版本库，这样工作的时候，可以不用联网。

2.手写数组去重代码？

//方法一
function uniq(array){
    var temp = [];
    var len = array.length;
    for(let i=0;i<len;i++){
        for(let j=i+1;j<len;j++){
            if(array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    return temp;
}

var arr = [1,2,3,2,4,5];
console.log(uniq(arr));//[1,3,2,4,5]

function uniq(array){//方法二
    var temp = [];
    for(var i=0;i<array.length;i++){
        if(temp.indexOf(array[i] == -1)){//indexOf()元素第一次指向的位置
            temp.push(array[i]);
        }
    }
    return temp;
}
var arr = [1,2,1,2,3,4,65,6,9];
console.log(uniq(aa));

3.数据结构（堆、栈、队列、链表、哈希）？

堆、栈、队列：同上；

4.汇编、c、c++？

汇编：机器语言
c：面向过程
c++：面向对象

5.less怎么继承父元素的样式？

.parentClass{  
    color:red;  
}  
.subClassOne{  
    &:extend(.parentClass);  
}  
.subClassTwo:extend(.parentClass){  

}  

百度：

1.css盒子模型

html文档把每个元素都描绘成一个矩形盒子，称为盒模型。包括margin（外边距）、border（边框）、padding（内边距）、content（内容区域）四个边界。
一个元素的大小为：margin（上右下左）+border（上右下左）+padding（上右下左）+content；

2.页面加载如何优化

1）可以使用css sprite图，并将图片存储为web所用格式来优化图片；
2）使用免费的cdn加载第三方资源；
3）合并压缩js，css；
4）css文件引入放在页面头部，script文件引入放在页尾；
5）避免img元素的src为空；
6）使用ajax异步加载部分请求。

3.url->页面加载完成的整个流程

1）输入地址；
2）浏览器查找域名的IP地址（浏览器缓存->系统缓存->路由器缓存）；
3）浏览器向web服务器发送一个HTTP请求；
4）服务器的永久重定向响应；
5）浏览器跟踪重定向地址；
6）服务器处理请求；
7）服务器返回一个HTTP响应；
8）浏览器显示HTML；
9）浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、css、js等）；
10）浏览器发送异步请求。

4.优雅降级与渐进增强

优雅降级：开始时针对低版本浏览器进行构建页面，完成基本的功能，再针对高级浏览器进行效果、交互、追加功能。

渐进增强：一开始就构建站点的完整功能，然后针对浏览器测试和修复。

5.xhtml是什么

xhtml是一个w3c标准，是一个更严格更纯净的HTML版本。
XHTML和HTML之间的差异：
1）XHTML元素必须被正确地嵌套；
2）XHTML元素必须被关闭；
3）标签名必须用小写字母；
4）XHTML文档必须拥有根元素。

6.ajax的优缺点

优点：
1）ajax在页面内与服务器通信，无需重新加载页面，用户体验好；
2）使用异步方式与服务器通信，不需要打断用户的操作；
3）ajax的原则是“按需取数据”，可以最大程度减少冗余请求和响应对服务器造成的负担；
缺点：
1）由于ajax在页面内实现与服务器通信，对浏览器的回退机制不友好；
2）ajax会暴露出一些数据及服务器逻辑，容易受到SQL注入攻击和基于credentials安全漏洞等；
3）ajax对搜索引擎的支持比较弱；
4）如果用户禁用了js，网站就取不到数据。

7.js组成部分

ECMAScript+DOM+BOM

ECMAScript：
js语言的标准，规定了js的变成语法和基础核心知识。
DOM：
文档对象模型，提供给js很多操作页面中元素的属性和方法。
BOM：
浏览器对象类型，提供了很多操作浏览器的属性方法，而这些方法都存放在window浏览器对象上。

8.解释一下变量声明提升

变量声明提升就是：在某一作用域中，变量声明的语句会默认解析为在该作用域的最开始已经声明了。

变量提升：

var a; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(a); // undefined
a= 'aaa'; // 此时才赋值
console.log(a); // 打印出aaa

function fn () {
　　var b; // 变量提升，函数作用域范围内
　　console.log(b);//undefined
　　b = 'bbb';
　　console.log(b);//bbb
}
fn();

函数提升：
js创建函数有两种方式：函数声明式和函数字面量式。只有函数声明才存在函数提升！

console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() {}
var f2 = function() {}

js会将function、var的函数、变量提前声明。

9.如何跨域访问

跨域的两种策略？
1）DOM同源策略：禁止对不同源页面DOM进行操作；
2）XmlHttpRequest同源策略：禁止XHR对象向不同源的服务器地址发起HTTP请求（主要协议、域名、端口有任何一个不同，都会被当作是不同的域，之间的请求就是跨域操作）。
为什么要有跨域限制？
防止CSRF攻击。
跨域的解决方式？
1）跨域资源共享

1.对于客户端，正常使用xhr对象发送ajax请求。
设置： xhr.withCredentials = true;
2.对于服务器端，需要在 response header中设置如下两个字段:
Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true.

2）jsonp实现跨域
动态创建script标签，然后利用src属性进行跨域。

10.js如何判断一个数组
11.阐述一下js严格模式
12.负载均衡是什么
13.linux环境熟悉吗？说一些你用过的指令
14.webpack了解吗？用过哪些功能？
15.对css预编译器有了解吗？
16.你有考虑过对项目进行优化吗？从哪方面入手？

最后来一个阿里的第一轮电面，问了3个问题，直接gg，前端的路，我还要慢慢走啊！！！！
1.说一下事件机制的原理？
2.说一下事件代理的原理？
3.说一下jsonp的原理？说完前端还会问你服务端·········