标签归档:javascript

ES6-Class类

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

ES6提供了Class语句用于更的理解语义以及更接近传统的编程语言的写法。Class可以当作ES5构造函数的一个语法糖。

传统的构造函数以及继承方法如下面这样来写的:

function Getname() {
    this.name = 'wyz';
    this.age = '29';
}

// 如果我们需要定义一个给所有基于Getname构造函数使用的方法
// 那么我们必须通过prototype对象上定义

Getname.prototype.getName = function(){
    return (`Name: ${this.name}, Age: ${this.age}`);
}

let gname = new Getname();

gname.getName(); //"Name: wyz, Age: 29"

继续阅读

es6-promise

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

Promise最初在社区提出的一个异步解决的方案,最后ES6将它加入了正式的标准,并规定了统一的写法。

在使用Promise之前,你需要注意下面几个点:

1.Promise有三个状态:Pending(进行中)Resolved(已完成)Rejected(已失败),这三个状态我们无法去改变,并且在一个Promise中只有两个可能,一种是从PendingResolved,另一种是PendingRejected。当结果发生后,这个状态就凝固了,也就是说我们无法去改变Promise对象的任何状态,如果再次调用这个Promise对象,返回的将是凝固状态的结果。

2.Promise在执行的过程中无法取消,并且我们也无法知道它执行到哪一步,我们只能知道返回的是已完成还是已失败。

3.Promise实例创建后会立即执行

下面的代码部署了一个Promise对象异步加载图片的例子,可以看到用Promise对象来编写异步代码是非常的清晰。
继续阅读

ES6-iterator遍历接口

书籍参考:《ECMAScript 6入门》 作者:阮一峰

Iterator概念

ES6发布后Javascript的数据集合对象有ArrayObjectMapSet四种,我们同时知道在Array中,我们可以放对象,Object中我们一样可以放Array,四种数据集合对象都可以相互交叉使用。

那么问题来了,如果在一个数据集合对象中含有多个不同数据集合对象的类型,那么这时候就需要一种接口的机制,来处理不同的数据集合了。

Iterator有三个作用:

  1. 为各种数据接口提供一个统一的访问接口
  2. 使数据接口的成员能够按照某种次序排序
  3. ES6新遍历名利 for…of循环

按照《ECMAScript 6入门》这本书中的4个步骤就能很好的解释Iterator遍历过程

  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

用一个代码段来实现上面的4个点,也就是来实现一个Iterator遍历器
继续阅读

ES6箭头函数

参考:《ES6标准入门教程》 作者:阮一峰

在ES6中允许了一种新函数方式“箭头函数”,它大概的如下:

var a = (x) => x;

等同

var a = function(x){
    return x;
}

如果不需要参数,使用一个空括号代表就可以了

var a = () => 1;

等同

var a = function() {
    return 1;
}

如果箭头函数需要在返回之前进行一些逻辑操作,那么需要添加大括号{},并显示的声明return语句,如果没有return语句那么返回的是一个undefined:

继续阅读