h5前端常见面试题

1.请说一下vue的生命周期

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

2.vue是如何实现双向绑定的？

vue.js 则是采用数据劫持的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

主要步骤：

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

3.什么是 Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

4.ES6新增的数组方法

https://blog.csdn.net/wbiokr/article/details/65939582

5.cookie，localStorage和sessionStorage三者之间的区别

• cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务间来回传递。而localStorage和sessionStorage不会自动把数据发给服务器，仅在本地保存

• 数据的生命期：cookie可设置失效时间，默认是浏览器关闭。localStorage 始终有效，除非被清除。sessionStorage 仅仅在当前会话下有效，关闭页面或浏览器后被清除

6.什么是原型链？

Javascript是面向对象的，每个实例对象都有一个proto属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性prototype,与实例的proto属性指向同一个对象。当一个对象在查找一个属性的时候，自身没有就会根据proto像它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到object.prototype.proto为null，这样也就形成了原型链。

7.说说你对this的理解

• this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
• 作为纯粹的函数调用this指向全局对象
• 作为对象的方法调用this指向调用对象
• 作为构造函数被调用this指向新的对象（new会改变this指向）
• apply调用this指向apply方法的第一个参数

8.get跟post的区别

• get存储内容小，不能超过2kb，有限。文件上传只能有post。
• get 不安全显示在地址栏
• get 效率高，因为post需要加密和解密的过程，get不需要。

9.请说出你关于闭包函数的理解以及闭包函数带来的影响

• 闭包函数通常情况下是指函数里面再一次的嵌套另外的一个函数这种形式，而处于函数内部的函数可以获取外部函数的变量的值。

• 使用闭包函数会带来变量存储到内存，不会被释放 ，以及this指向的改变
  和内存泄漏的问题等等。

10.onload跟ready的区别

1.$(document).ready()

执行时机：等DOM树加载完毕后就能执行

2.window.onload

执行时机：等网页中所有的资源加载完毕后（包括图片、flash、音频、视频），才能执行

11.'data-'属性的作用是什么？如何获取‘data-’属性的值？

data-属性是h5中用来自定义属性，通过dataset属性获取。
不是所有浏览器都支持，不支持用getAttribute

12.image和canvas在处理图片的时候有什么区别？

image是通过对象的形式描述图片的
canvas是通过专门的API讲图片绘制在画布上的

13.node的常用模块

http fs path url buffer process

14.了解nodejs吗？请简要描述

nodejs是一款基于Chrome V8 引擎的Javascript运行环境。Nodejs使用了事件驱动、非阻塞式I/O的模型，使其轻量又高效。