前端面试题之第八弹

一、typeof和instanceof相同点与不同点

typeof

用于判断数据类型，返回值为6个字符串，分别为
String、Boolean、Number、function、object、undefined

let a = [1,2,3,4],
	       b = 1,
		   c = 'abc',
		   d = function(){console.log("函数")},
		   e = true,
		   f = null,
		   g;
	   console.log(typeof(a)) //object
	   console.log(typeof(b)) //number
	   console.log(typeof(c)) //string
	   console.log(typeof(d)) //function
	   console.log(typeof(e)) //boolean
	   console.log(typeof(f)) //object
	   console.log(typeof(g)) //undefined

但是你会发现，typeof在判断null 、array、object、以及函数实例(new + 函数)时，得到的都是object。这使得在判断这些数据类型的时候，得不到真实的数据类型。由此引出instanceof。
instanceof
instanceof中文翻译为实例，因此instanceof的含义就不言而喻，判断该对象是谁的实例，同时我们也就知道instanceof是对象运算符。

var a = new Array();
var b = "1";
console.log(a instanceof Array) //true
console.log(b instanceof Array) //false

区别
想必到这里大家也都明白两者的含义和用法，总之，typeof和instanceof都是用来判断变量类型的，两者的区别在于：

1. typeof判断所有变量的类型，返回值有number，boolean，string，function，object，undefined
2. typeof对于丰富的对象实例，只能返回"Object"字符串。
3. instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。

二、Vue2.0与3.0的区别

双向绑定机制：
—Vue2.0监听双向绑定使用Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化为getter/setter，当数据变化时通知视图更新，但是无法检测到对象或数组对象内部的变化。
Vue3.0监听双向绑定使用es6的proxy，可以检测到数组或对象内部的变化，但是兼容性不好
—3.0新加入TypeScript以及PWA的支持
默认进行懒观察(lazy observation):
在2.x版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x版本，只会对[被用于渲染初始可见部分的数据]创建观察者，而且3.x的观察者更高效
—更精准的变更通知：
比例来说：2.x版本中，你使用Vue.set来给对象新增一个属性时，这个对象的所有watcher都会重新运行;3.x版本中，只有依赖那个属性的watcher才会重新运行。
部分命令也发生了变化：

1. 下载安装 npm install -g vue@cli
2. 删除了vue list
3. 创建项目 vue create
4. 启动项目 npm run serve

默认项目目录页发生了变化：

1. 移除了配置文件目录，config和build文件夹
2. 移除了static文件夹，新增public文件夹，并且index.html移动到public中
3. 在src文件夹中新增了views文件夹，用于分类 视图组件 和公共组件

三、axios的特点有哪些？

1. axios是一个基于promise的HTTP库，支持promise的所有API
2. 它可以拦截请求和相应
3. 它可以转换请求数据和相应数据，并对响应回来的内容自动转换为json类型的数据
4. 它安全性更高，客户端支持防御XSRF

四、Ajax原理

(1)创建对象

var xhr = new XMLHttpRequest();

(2)打开请求

xhr.open('GET', 'example.txt', true);

(3)发送请求

xhr.send(); 发送请求到服务器

(4)接收响应

xhr.onreadystatechange =function(){}

(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。

(2)当readystate==4时，表示已经接收到全部响应数据。

(3)当status ==200时，表示服务器成功返回页面和数据。

(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

未完待续…