前端近年面试题（4）

三十一.bind() apply()

1、call()、apply()、bind() 都是用来重定义 this 这个对象的！

obj.myFun.call(db)；　　　　//德玛年龄99
obj.myFun.apply(db);　　　 //德玛年龄99
obj.myFun.bind(db)();　　　//德玛年龄99以上出了bind 方法后面多了个 () 外 ，结果返回都一致！由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

2、

obj.myFun.call(db,'成都','上海')；　　　　 //德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);        //德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();         //德玛 年龄 99  来自 成都去往上海	
obj.myFun.bind(db,['成都','上海'])();　　 //德玛 年龄 99  来自 成都,上海去往undefined

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面  obj.myFun.call(db,'成都', ... ,'string' )；
apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(db,['成都', ..., 'string' ]);
bind除了返回是函数以外，它 的参数和call 一样

拓展：
　

第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ；

三十二.const用法

1.const定义的变量不可以修改，而且必须初始化。
2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。（块级作用域是Es6之后才有的概念）

使用 var 关键字重新声明变量可能会带来问题：在块中重新声明变量也会重新声明块外的变量（let则不会）：

var x = 10;// 这里输出 x 为 10
{ 
    var x = 2; // 这里输出 x 为 2。若这里为let就不会出现这种状况了
}
// 这里输出 x 为 2

三十三.Utf-8编码汉字占多少个字节

占1个字节：utf8数字、utf8英文字母
占2个字节：带有附加符号的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母则需要二个字节编码
占3个字节：基本等同于GBK，含21000多个汉字
占4个字节：中日韩超大字符集里面的汉字，有5万多个

三十四.Vue的钩子函数

vue.js的钩子函数，就是生命周期函数。
共有八个基本钩子函数

1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2.created --创建后
触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3.beforeMount --渲染前
触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。
4.mounted --渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5.beforeUpdate --更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。
6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

三十五.http和https的区别

三十六.前端开发工具webstorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。
已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。
与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

三十七.Vue基于什么语言

Vue
Vue.js（开发商是尤雨溪）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。

Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。

Bootstrap

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，还拥有非常完备和详尽的开发文档，有了它，Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

38.Vue的第三方组件库Iview
Vue常用组件库的比较分析（pc端）:

1、Element(pc):饿了么前端团队开发的桌面端组件库
2、iView(pc):主要服务于 PC 界面的中后台产品
3、vuetify(pc)：一个试图推动前端开发发展到一个新水平的组件
4、vue-strap(pc)：基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件
5、buefy(pc)：即装即用的轻量级UI组件
6、Vue-Blu(pc)：全面、灵活且强大的ui组件
7、vue-beauty(pc)：漂亮的 vue 组件库
8、at-ui(pc)：一个体面的干净整洁的 UI 组件
9、Keen UI：纯英文文档
10、Vue Material：具有精美动效的组件

vue常用的一些第三方插件更多

Axios（官方推荐的ajax数据请求的插件）
Vue-Router（vue路由管理插件）
Vuex（vue数据中心化状态管理插件）
Less（css预处理插件）
Sass（css预处理插件）
Element-Ui（饿了么ui插件）
Mint-ui（移动端ui插件）
swiper-vue(swiper的vue包)
cross-env(用来设置环境变量及数据接口域名)

Vue-ui常用组件库整理更多

element-ui
VUX
iview
Mint UI
Muse UI
antd vue
vue-mui
radon-ui
weex
N3
vuikit
Vue-layout

39.HTML5的新特性
(1)语义标签

header、footer、nav、section、article、aside、detailes、summary、dialog

(2)增强型表单
新的表单 Input 输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
新增表单元素：

<datalist>、<keygen>、<output>

新增的表单属性：

placehoder 、pattern （正则表达式）、min、 max、step、height 、width、autofocus 、multiple

(3)视频和音频

 audio元素播放音频文件，支持三种音频格式文件: MP3, Wav, 和 Ogg
 video 元素来包含视频的标准方法：
		control 提供了 播放、暂停和音量控件来控制视频。
		使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
		width 和 height 属性控制视频的尺寸.如果设置的高度和宽度

(4)Canvas绘图
(5)SVG绘图
SVG 与 Canvas两者间的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。

更多
40.ajax

AJAX = Asynchronous JavaScript and XML（异步JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 应用

运用XHTML+CSS来表达资讯；
运用JavaScript操作DOM（Document Object Model）来执行动态效果；
运用XML和XSLT操作资料;
运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

拓展更多面试题（100道前端面试题练手）：

1、前端近年面试题（1）
2、前端近年面试题（2）
3、前端近年面试题（3）
4、前端近年面试题（4）
5、前端近年面试题（5）
6、前端近年面试题（6）
7、前端近年面试题（7）
8、前端近年面试题（8）
9、前端近年面试题（9）