前端面试题记录

前端面试题记录

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

一.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属性,指向构造函数本身。

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

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

1
2
3
4
5
6
7
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);

扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×