Vue.js作为目前热门的前端框架，其实其本身并不包含Ajax功能，而是通过插件的形式额外需要在项目中引用，其官方推荐Ajax插件为vue-resource，下面便是vue-resource的请求代码：

Vue.http.get('/test/').then((response) => { console.log('执行成功'); }, (response) => { console.log('执行出错'); });

　　vue-resource支持Promise API，同时支持目前的Firefox, Chrome, Safari, Opera 和 IE9+浏览器，在浏览器兼容性上不兼容IE8，毕竟Vue本身也不兼容IE8。想了解更多的vue-resource的信息可以移步github文档：https://github.com/vuejs/vue-resource

　　3.Angular.js中的Ajax

　　这里Angular.js中的Ajax主要指Angular的1.×版本，因为Angular2目前还不建议在生产环境中使用。

var myApp = angular.module('myApp',[]); var myCtrl = myApp.controller('myCtrl',['$scope','$http',function($scope, $http){ $http({ method: 'GET', url: '/test/', headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }).success(function (data) { console.log('执行成功'); }).error(function () { console.log('执行出错'); }); }]);

　　在Angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是'application/json;charset=UTF-8'，所以如果想用表单的方式提交还需设置下headers属性。想了解更多的Angular Ajax的信息可以移步官方文档：https://docs.angularjs.org/api/ng/service/$http（可能需要翻墙）更多精彩内容关注微信公众号：全栈开发者中心（admin10000_com）

　　4.React中的Ajax

　　在React中我比较推荐使用fetch来请求数据，当然其不仅适用于React，在任何一种框架如上面的Vue、Angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。

　Fetch API

　　Fetch API 是基于 Promise 设计，由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题，一些浏览器暂时不支持Fetch API，浏览器兼容图如下：

　　当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。

　　使用Fetch我们可以非常便捷的编写Ajax请求，我们用原生的XMLHttpRequst对象和Fetch来比较一下：

　　XMLHttpRequst API

// XMLHttpRequst API var xhr = new XMLHttpRequest(); xhr.open('GET', '/test/', true); xhr.onload = function() { console.log('执行成功'); }; xhr.onerror = function() { console.log('执行出错'); }; xhr.send();

　　Fetch API

fetch('/test/').then(function(response) { return response.json(); }).then(function(data) { console.log('执行成功'); }).catch(function(e) { console.log('执行出错'); });

　　可以看出使用Fetch后我们的代码更加简洁和

前言

本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些ES6的知识点。

JavaScript知识点

1.变量作用域

var a = 1; function test() { var a = 2; console.log(a); // 2 } test();

上方的函数作用域中声明并赋值了a，且在console之上，所以遵循就近原则输出a等于2。

var a = 1; function test2() { console.log(a); // undefined var a = 2; } test2();

上方的函数作用域中虽然声明并赋值了a，但位于console之下，a变量被提升，输出时已声明但尚未被赋值，所以输出“undefined”。

var a = 1; function test3() { console.log(a); // 1 a = 2; } test3();

上方的函数作用域中a被重新赋值，未被重新声明，且位于console之下，所以输出全局作用域中的a。

let b = 1; function test4() { console.log(b); // b is not defined let b = 2; } test4();

上方函数作用域中使用了ES6的let重新声明了变量b，而let不同于var其不存在变量提升的功能，所以输出报错“b is not defined”。

function test5() { let a = 1; { let a = 2; } console.log(a); // 1 } test5();

上方的函数作用域中用let声明了a为1，并在块级作用域中声明了a为2，因为console并不在函数内的块级作用域中，所以输出1。

2.类型比较

var arr = [], arr2 = [1]; console.log(arr === arr2); // false

上方两个不同的数组比较，console为false。

var arr = [], arr2 = []; console.log(arr === arr2); // false

上方两个相同的数组比较，因为 数组与数组比较恒为false ，所以console为false。

var arr = [], arr2 = {}; console.log(typeof(arr) === typeof(arr2)); // true

上方利用typeof比较数组和对象，因为typeof获取NULL、数组、对象的类型都为object，所以console为true。

var arr = []; console.log(arr instanceof Object); // true console.log(arr instanceof Array); // true

上方利用instanceof判断一个变量是否属于某个对象的实例，因为在JavaScript中数组也是对象的一种，所以两个console都为true。

3.this指向

var obj = { name: 'xiaoming', getName: function () { return this.name } }; console.log(obj.getName()); // 'xiaoming'