前端面试题记录

最近在找工作，面试过程中发现自己对一些概念的叙述不是特别清楚。唉，让我自己写代码可能没有毛病，但是好像就是说不出这些概念，这无疑让自己在面试中丢了分。所以还是做下笔记吧，预祝自己在后面的面试中愈战愈勇！

一.spa和多页应用的区别
1.spa由一个外壳和页面片段组成，通常用路由跳页面，局部刷新。非spa每个页面都是一个新页面，有一套独立的html，甚至css，js，页面跳转需要重新加载资源。
2.spa数据传递方便，因为页面未销毁。非spa传递参数依赖url或者Cookie，SessionStorage，LocalStorage等。
3.单页面不利于seo，多页面相反。
4.单页面开发成本高，依赖框架。多页面开发简单，但是重复代码多。

二.同步和异步
js是单线程的，但是可以实现异步。js有主线程，也有一个任务队列。主线程的任务是同步执行的，前一个任务完成后，才执行后一个任务，而放入任务队列的是异步任务，当任务队列告诉主线程该任务可以执行了，异步任务才进入主线程执行。

三.Event Loop
js有事件轮训机制，主线程中的任务结束后，会查询任务队列，把任务队列中的第一个可执行任务压入主线程执行。

四.多页面传递数据
简单的数据可以放在url的search部分，用location.search获取，复杂的数据可以存在Storage，Cookie，或者请求后台接口实现。

五.location.reload()
默认从浏览器缓存中重载页面，如果传参是true，则从服务器重载。

六.angular是双向绑定还是单向数据流？
都有，一般的插值表达式就是单向数据流，数据改变才引起ui改变。[(ngModel)]是双向绑定。

七.angular组件之间通信
父组件通过[]属性绑定向子组件传数据，子组件通过@Input接收数据。子组件通过@Output和EventEmitter发送事件给父组件，父组件模板中以()绑定事件回调函数。

八.如何理解RESTful？
RESTful（Representational State Transfer）是一种思想，很难用一两句话来解释。可以理解为：所有的资源都可以抽象为一个url，通过http请求（包括POST，GET，PUT，PATCH，DELETE）来获取资源，完成操作后通过HTTP的状态码2xx/4xx来完成状态的转换。

九.http请求的几种类型
1、GET请求主要是查询数据的请求，不会修改、增加数据，不会影响资源的内容，是幂等的，即无论进行多少次操作，结果都是一样的。GET请求的参数体现在url上，能够被浏览器缓存，保存历史记录，请求的长度有限制。

2、PUT请求是向服务器端发送数据的，就像数据库的update操作一样，用来修改数据的内容，也是幂等的。

3、POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的create或insert操作一样，会创建新的内容。POST请求不会被浏览器缓存，也不能创建书签。POST请求参数在请求体正文中，相比GET更加安全。

4、DELETE请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的delete操作。

5、OPTIONS：这个也是常见的请求类型，但一般不是由开发者指定，当涉及跨域时，浏览器会自动发起预检，获取目的资源所支持的请求类型。

6、注：所有的增删改查几乎都能用GET、POST实现，因此很少会选择使用PUT和DELETE请求。

十.如何理解http请求的无状态？
http响应是有状态码的，但是http请求却说是无状态的，这让人很是迷惑。其实http的无状态是指：每次的请求都是独立的，与之前和之后的请求无关联，服务器中没有保存客户端的状态。但是如果加上Cookie控制，则可以进行状态管理。

十一.如何理解闭包？
js函数内部的变量是不能被函数外部所引用的，闭包就是能够读取其他函数内部变量的函数。通常的形式是在函数内定义一个内部函数，内部函数引用了外部函数作用域中的变量，然后又作为外部函数的返回值被上层作用域使用，这样就形成了闭包。

十二.如何理解原型和原型链？
1.任何对象都有原型proto，对象的原型指向构造函数的prototype属性。构造函数的prototype属性上有一个construtor属性，指向构造函数本身。

var A = function () {};
var a = new A();
a.__proto__ === A.prototype; // 结果为true
A === A.prototype.constructor; // 结果为true

2.js查询对象属性时，会首先从对象本身查找，如果找不到，则会顺着原型链（proto，而不是prototype）查找。常见的原型链继承写法：

var Father = function () {};
Father.prototype.type = 'male';
Father.prototype.age = '40';
var Son = function () {};
Son.prototype = Object.create(Father.prototype);
Son.prototype.constructor = Son;
console.log(new Son().type);