18

学习EMACScript6新特性-liujun881118的博客-51CTO博客

 6 years ago
source link: http://blog.51cto.com/13584768/2066475
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

学习EMACScript6新特性

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对象实现异步，可以轻松实现多线程


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK