1、面向对象，新增class、extends关键字

在6.0之前3.0 的版本中面向对象编程

//定义类
var Class = function(name,desc){
this.name = name;
this.desc = desc;
this.display = function (){
console.log("Class:{name:"+this.name+",desc:"+this.desc+"}");
}
}
//实例化类一个对象
var a = new Class("Class","定义班级类别");
a.display();//Class:{name:Class,desc:定义班级类别}
var b = new Class("Student","定义学生类别");
//多态
b.other = "父为Class";
//override
b.display = function(){
console.log("Class:{name:"+this.name+",desc:"+this.desc+",other:"+this.other+"}");
}
b.display();//Class:{name:Student,desc:定义学生类别,other:父为Class}

在6.0中面向对象

//定义类Father
class Father{
//Father构造方法
constructor(name,desc){
this.name = name;
this.desc = desc;
}

display(){
console.log("Father:{name:"+this.name+",desc:"+this.desc+"}");
}
}
//定义类Son
class Son extends Father{
//Son构造方法
constructor(name,desc,other){
super(name,desc);
this.other = other;
}
//orverride
display(){
console.log("Son:{name:"+this.name+",desc:"+this.desc+",other:"+this.other+"}");
}
}

var father = new Father("father","父对象father");
var son = new Son("son","子对象son"," 父为father");
father.display();//Father:{name:father,desc:父对象father}
son.display();//Son:{name:son,desc:子对象son,other: 父为father}

感觉是不是跟C#、JAVA十分相近？而且集成、封装、多态面向对象的三大特性完美支持。

2、Generator 方法 

6.0以前版本中方法定义

//匿名
(function(){});//加载
(function(){})();//传参加载
//声明
var func = function(){} //加载优先级低，放在调用后会报undefined错误
function func(){}//加载优先级高

在6.0版本中引入了一个新的方法类型Generator 方法

function * generatorFunc(){} //*号前后的空格随意

Generator 方法 一般配合yield 关键字 能够轻松实现代码块的异步

/**
 * 1、不定义任何一个全局变量
 * 2、实现一个方法，每次调用返回数+1
 */
function * get_nextInt(){
var i = 0;
while(true){
yield i+=1;
}
return i;
}
var g = get_nextInt();
console.log(g);
for(var i = 0;i < 10 ; i++){
console.log(g+":"+JSON.stringify(g)+","+g.next()+":"+JSON.stringify(g.next()) +",value:"+g.next().value);

}

控制台输出结果

image.png

可以发现Generator方法调用next()时每次返回的是yield处理的表达式的结果对象{"value":"<result>","done":"<boolean>"}而在此过程中Generator对象的状态为suspended


其实这个并没有调用整个方法，而是调用了方法的代码块，相当于将方法体注入到next()应用的地方。测试如下

function * get_nextInt(){
var i = 0;
while(i<999){
console.log("before:"+i);
yield i+=1;
console.log("end:"+i);
}
console.log("finally:"+i);
return i;
}
var g = get_nextInt();
// console.log(g);
for(var i = 0;i < 10 ; i++){
var next = g.next();
// console.log(next);
// console.log(g+":"+JSON.stringify(g)+","+next+":"+JSON.stringify(next) +",value:"+next.value);
}

控制台输出如下

image.png

3、async/await 通过Promise对象实现异步方法调用

写过前端的同学们都知道，一些对用户体验要求较高的场景下我们需要异步加载和局部刷新，就需要用到AJAX （Asynchronous JavaScript and XML）技术，比如表单验证提醒，下拉刷新，大数据加载等等。

异步请求的关键方法的写法基本相同，都是使用回调方法实现的异步。一般的情况要实现异步，必须给调用方法传递一个异步回调的方法，相当于方法注入。

/**
 * ajax
 */
AJAX = function (ajaxSetting){
var xMLHttpRequest=getXMLHttpRequest();
this.ajaxSetting = ajaxSetting;
this.doAjax = doAjax;
this.xMLHttpRequest = xMLHttpRequest?xMLHttpRequest:getXMLHttpRequest();
}
var ajaxSetting = {
'type':'get',//请求方式 get|post
'url':'https://www.baidu.com', //请求地址
'contentType':'',//请求数据类型 application/json
'data':{},//请求数据
'dataType':'text',//请求数据的类型可以简单约束成text、xml、json
'async':true, //是否异步
'success':function(data,xMLHttpRequest,event){
console.log(data);
}
}
/**
  * 创建XMLHttpRequest
  */
function getXMLHttpRequest(){
var xMLHttpRequest;
if (window.XMLHttpRequest)
{
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xMLHttpRequest=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xMLHttpRequest;
}
/**
 * 请求成功回调方法
 */
function readystatechange(xMLHttpRequest,event){
console.log(xMLHttpRequest);
console.log(xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200);
if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200)
{
var response = xMLHttpRequest.response;
console.log(event);
}
}
/**
 * 
 */ 
function doAjax(){
var ajaxSetting = this.ajaxSetting;
var xMLHttpRequest = this.xMLHttpRequest;
xMLHttpRequest.open(ajaxSetting.type,ajaxSetting.url,ajaxSetting.async);
xMLHttpRequest.setRequestHeader("contentType",ajaxSetting.contentType);
xMLHttpRequest.responseType = ajaxSetting.dataType;
xMLHttpRequest.send();
xMLHttpRequest.onreadystatechange=function(){
if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200)
{
var response = xMLHttpRequest.response;
ajaxSetting.success(response,xMLHttpRequest,event);
}
};
}

//测试
var ajax = new AJAX(ajaxSetting);
ajax.doAjax();

在6.0中新引入的async/await 和Promise对象实现异步，可以轻松实现多线程