2016年01月_kittyjie

12月 10月 09月 02月 01月

原创 ES6学习——生成器（Generators）：生成器+Promises

Promise是个异步执行的过程，我们要想把多个Promise顺序执行，只能不断的利用then方法继续去执行下面的Promise，例如：step1().then(step2,step2Failed).then(function(msg) { return Promise.all( [ step3a( msg ), step3b( msg ),

2016-01-31 11:05:00 1078

原创 ES6学习——生成器（Generators）：生成器+迭代器

我们知道生成器也是迭代器，所以操作迭代器的方法都可以用来操作生成器，下面逐一过下：function* genFunc() { yield 'a'; yield 'b';}1）next方法直接调用let genObj = genFunc();genObj.next()//{ value: 'a' , done: false }genObj.next()//{ v

2016-01-30 10:35:41 701

原创 ES6学习——生成器（Generators）：yield*

yield*起到一个委派的作用，跟在它后面的表达式需要是个iterator，在规范的14.4.14中有详细的描述。下面我们看看怎么使用它：function* foo() { yield* [1,2,3];}function* foo() { yield 1; yield 2; yield 3;}function* bar() { yield* foo();//生成器本身也

2016-01-28 15:24:57 775

原创 ES6学习——生成器（Generators）：return和throw

return和throw在生成器中起到了终止的作用，生成器原型那篇文章里介绍了Chrome浏览器只实现了throw，没有实现return。所以我们先看看throw是怎么用：function *foo() { yield 1; yield 2; yield 3;}var it = foo();console.log(it.next()); // { value: 1, done: f

2016-01-28 10:28:23 1324

原创 ES6学习——生成器（Generators）：生成器中的this与super

先看看生成器中的this：在规范的14.4.11有这样的描述：If the generator was invoked using [[Call]], the this binding will have already been initialized in the normal manner. If the generator was invoked using [[Construct

2016-01-27 16:23:50 648

原创 ES6学习——生成器（Generators）：原型继承关系详解

为什么要说一下生成器的原型继承关系呢，因为它的关系确实比较复杂，在ES6规范中仅有两张图片，其中一张就是描述生成器的原型链，可见其复杂性。废话不多说，我们直接看图：我们用下面的简单代验证这个关系：function* genFunc() { yield;}var g = new genFunc();先看一下(Generator).prototype，因为生成器上实

2016-01-27 10:53:45 636

原创 ES6学习——生成器（Generators）：详细语法

先看一下生成器的几种声明方法：function* genFunc() {}//函数声明let genObj = genFunc();const genFunc = function* () { };//函数表达式let genObj = genFunc();let obj = {//对象字面量 * generatorMethod() { }};let genObj = ob

2016-01-26 11:02:13 1171

原创 ES6学习——生成器（Generators）：概念介绍

应该说生成器是ES6中最大的特色，但这个概念在其他语言中早就有实现的了，譬如C#，python。简单解释生成器就是一种能中断和恢复自己的函数，具体的解释可以参考【探秘ES6】系列专栏（三）：生成器，这篇文章解释的比较详细，下面有些内容我就直接使用这篇文章的了。生成器的两点特征：生成器函数以function*开头；在生成器函数中，yield是一个关键字，如同return。yield可

2016-01-25 09:49:11 2264

原创 ES6学习——迭代器（Iterators）：return和throw概述

Iterator接口还有两个可选方法，一直都没讲，主要是由于浏览器没有完全支持这两个方法。最后我们看一下：然后规范上有一段描述：NOTE 2 Typically callers of these methods should check for their existence before invoking them. Certain ECMAScript language fea

2016-01-22 09:26:07 2674

原创 ES6学习——迭代器（Iterators）：迭代器接口高级应用

迭代器自身可迭代迭代器返回{done:true} 换成非对象类型，例如undefined，null等，结合规范扩展Number可迭代

2016-01-21 15:19:13 1544

原创 ES6学习——迭代器（Iterators）：迭代器接口应用示例

这篇文章我们来看看迭代器的一些基本应用例子。前面给的一些例子都是用for-of循环，或者spread操作符来处理迭代器的，下面我先看看一个更直接的方法：var arr = [1,2,3],iter1 = arr[Symbol.iterator]();console.log(iter1.next());//Object {value: 1, done: false}console.log

2016-01-21 09:02:50 705

原创 ES6学习——迭代器（Iterators）：内置可迭代对象汇总

这篇文章我们看一下哪些内置对象是可迭代的：1）数组Arraysconsole.log([][Symbol.iterator])for(let x of ['a','b']) console.log(x)2）字符串Stringsconsole.log(""[Symbol.iterator])for(let x of "abc") console.log(x)

2016-01-20 14:36:12 2802

原创 ES6学习——迭代器（Iterators）：接口规范概述

这篇文章我们仔细看一下ES6规范中是如何定义Iterator的接口，在25.1章节中：@@iterator属性可以用Symbol.iterator表示，上面的意思是说一个对象要想是iterable的，必须有个函数，名字叫Symbol.iterator，这个函数需要返回一个对象，并且这个对象符合Iterator接口，那么Iterator接口怎么定义的呢？Iterator接口的

2016-01-20 08:55:43 4585

原创 ES6学习——Promises：应用示例

这篇文章看几个应用Promise的例子。1）封装普通的ajax成Promise模式，jQuery等的ajax调用已经内置了对promise模式的支持function httpGet(url) { return new Promise(function (resolve, reject) { let request = new XMLHttpRequest(); re

2016-01-19 15:01:32 2804

原创 ES6学习——Promises：API介绍

Promise的API并不是很多，下面一个一个简单看一下：1）构造函数Promise ( executor )let promise = new Promise( function (resolve, reject) { if (...) { resolve(value); // success } else {

2016-01-19 09:21:35 932 1

原创 ES6学习——Promises：概述

Promise这个概念在ES6之前早就有了，JQuery等库中也都支持，现在实际上的标准叫：Promises/A+，ES6中Promise的设计也符合这个标准。ES6为了顺应趋势，把这个概念加入到了规范中。规范的25.4章节中描述了Promise。这篇文章是简单的概述一下Promise，想深入了解的，请参考结尾给出的链接。Promise有三个状态：A promise p is fu

2016-01-18 15:05:29 647

原创 ES6学习——集合（Collections）：Typed Arrays

我们知道JS一直都是无类型的语言，这样设计有好处，也有坏处，可能不太适合大范围的密集计算，比如游戏，做图，大文件处理等。现在ES6中加入了好多带有类型的数组，个人在这方面了解的也不多，所以这篇文章就不详细介绍了，规范的22.2章节详细介绍这些数据类型，开发中实际有需要的同学自己去研究研究吧。下面我们看一下有哪些类型：剩下的就不在写了，自己确实没用过这些。

2016-01-16 16:36:06 827

原创 ES6学习——集合（Collections）：WeakSet

我们已经讲过WeakMap的概念了，同理对应的Set还有个WeakSet，在规范的23.4章节。WeakSet只能添加对象类型，并且有一些方法和Set有差异，简单说明一下差异性：1）WeakSet只能放入object类型var ws = new WeakSet()ws.add(0)//Uncaught TypeError: Invalid value used in weak set(…

2016-01-16 10:25:40 580

原创 ES6学习——集合（Collections）：Set 应用示例

这篇文章看一些Set的使用例子。1）遍历Set的几种方法let set = new Set(['red', 'green', 'blue']);for (let x of set) { console.log(x);}[...set];[...set.values()];[...set.keys()];[...set.entries()];2）利用

2016-01-15 08:25:06 511

原创 ES6学习——集合（Collections）：Set API

Set就是常见的集合，集合能够保证元素的唯一性，关于唯一性的确定，Set和Map都是用的SameValueZero内部函数，关于这点请参考Map章节。ES6规范的23.2章节描述了Set，有兴趣的自己去看。下面看API介绍：1）Set构造函数，可以不传任何参数，如果要传参数，参数必须是iterable的let set = new Set(['red', 'green', 'bl

2016-01-15 07:26:11 560

原创 ES6学习——集合（Collections）：WeakMap

WeakMap的概念在Java中一样存在，和Map的主要区别在于垃圾收集的处理不同。这个数据结构在规范的23.3章节中进行了描述。WeakMap只有key是可GC的，并不是value，这里的概念可能和Java里的不同。这里主要说一下和Map区别：1）WeakMap的key必须是object，如果不是就会抛出异常var wm = new WeakMap()wm.set(1

2016-01-14 16:01:18 1123

原创 ES6学习——集合（Collections）：Map 应用示例

先看一下如何遍历Map的entries，keys，values：let map = new Map([ [false, 'no'], [true, 'yes'],]);for (let key of map.keys()) { trace(key);}for (let value of map.values()) { trace(value);

2016-01-14 10:27:24 638

原创 ES6学习——集合（Collections）：Map API

ES6终于加入了高级的数据结构集合，包括Map，WeakMap，Set，WeakSet等，并且都是iterable的，可以用spread操作符和for...of语法遍历。这些数据结构在其他语言中早就有了，使用起来也非常方便，这篇文章从Map讲起。规范的23.1章节定义了Map以及相关的API，有兴趣的自己去看。有人会说JS中的Object实质上不就是个Map吗？没错，但Object有个问题就是

2016-01-14 08:44:08 847

原创 ES6学习——类语法：其它

这篇文章会零零散散过一些使用类语法中的问题。1）类不能当做函数调用class Point{}Point();//Uncaught TypeError: Class constructors cannot be invoked without 'new'2）类没有hoisting过程new Foo(); // ReferenceErrorclass Foo {}3）类表达式

2016-01-13 14:13:36 778

原创 ES6学习——类语法：Symbol.species在实例创建中的应用

在Symbol的章节我们大概介绍了一下species，这篇文章详细看一下规范中是如何调用的，以及我们在自定义类的时候可以怎么使用这个symbol。我们拿Array.prototype.map举例：规范22.1.3.15 Array.prototype.map ( callbackfn [ , thisArg ] )：1. Let O be ToObject(this value).

2016-01-13 09:11:13 2511

原创 ES6学习——类语法：super和new.target

这里为什么把super拿出来单独讲一下呢？可能有人要说，super谁不会用，先看个例子，你就知道super不是那么简单：class ParentA { constructor() { this.id = "a"; } foo() { console.log( "ParentA:", this.id ); }}class ParentB { constructor() { this.

2016-01-13 07:28:24 2750

原创 ES6学习——类语法：继承内置的类（如Array，Error等）

ES6的规范中在介绍内置类时，明确说明了哪些内置类可以subclass，没有说的自然不行。我们看几个内置类的描述：The Error constructor is designed to be subclassable. It may be used as the value of an extends clause of a class definition. Subclass

2016-01-12 08:05:35 1949

原创 ES6学习——类语法：继承中的实例构造过程

ES6的类中有个constructor函数是用来当构造函数的，如果你不写这个函数，ES6规范中会按照一定的条件给你自动添加上，在规范的14.5.14章节中有这样的描述：ClassTail : ClassHeritageopt { ClassBodyopt }10. If constructor is empty, then, a. If ClassHeritageopt is

2016-01-12 07:03:49 2568

原创 ES6学习——类语法：继承中的原型链

上篇文章中我们讲了些类的基本概念，其中提到ES6中的类语法是对原型继承的一种封装。JS的原型继承一共有两条原型链，显示和隐式，那么在类继承的语法中，这两条原型链又是怎么样的呢？继续使用上篇文章中的例子：class Point{...}class ColorPoint extends Point{...}var p = new Point(...),cp = new ColorPoi

2016-01-11 08:00:40 3076

原创 ES6学习——类语法：基本概念介绍

许多人一直说javascripr语法中没有类语法，不利于大型面向对象的项目开发。ES6中终于在千呼万唤中加入了类语法，但实质上还是对原型继承的一种封装，写起来会比较直观，我们知道OO的三大特性：封装，继承，多态。这篇文章主要围绕这三点对ES6的类语法进行介绍。规范中关于class的语法内容在14.5，有兴趣的自己去看。看段代码： 'use strict'; class

2016-01-10 11:06:22 2494

原创 ES6学习——新的语法：Tagged Templates

这个概念我也不知道怎么解释，还是直接看规范给出的描述吧，在12.3.7章节：A tagged template is a function call where the arguments of the call are derived from a TemplateLiteral (12.2.9). The actual arguments include a template object

2016-01-08 08:41:57 1193

原创 ES6学习——新的语法：Template Literals

原来在用JS处理字符串的时候，经常有替换字符串模板中变量的需求，因为JS原生是不支持的，所以可以用正则表达式处理，github上也有好多开源的JS模板引擎处理这件事。ES6中直接把这个功能加进来了，方便了大家。这章的规范在11.8.6以及12.2.9，有兴趣的自己去看看。JS中用“${}”种形式表示template中的变量，用·${}·表示模板，看个例子：var name = "K

2016-01-07 13:46:51 905

原创 ES6学习——新的语法：for..of 循环

for...of循环是ES6中新加的一种遍历迭代器的语法。看规范中的一种形式描述，在13.7.5章节，我删了一些不重要的部分：IterationStatement : for ( var ForBinding of AssignmentExpression ) Statement1. Let keyResult be the result of performing ForIn/OfHea

2016-01-07 07:50:00 5775

原创 ES6学习——新的语法：其它Well-Known Symbols

这篇文章过一下剩下的well-known symbols，就不在详细写例子了。Symbol.isConcatSpreadable：数组的concat方法会把参数中的数组给扁平化，这个symbol就是控制是否允许这样做。let arr1 = ['c', 'd'];['a', 'b'].concat(arr1, 'e');// ['a', 'b', 'c', 'd', '

2016-01-06 16:49:20 2216

原创 ES6学习——新的语法：Symbols——Symbol.toPrimitive，Symbol.hasInstance，Symbol.toStringTag，Symbol.species

这节讲的这四个没有Symbol.iterator常见，但可能也会用到，由于浏览器对这些well-known symbols不是都支持，所以我们需要用Kinoma来测试这些特性。先看比较简单的Symbol.toStringTag： function Obj(){ } Obj.prototype[Symbol.toStringTag] = "-Obj-"; let

2016-01-06 15:03:52 4148

原创 ES6学习——新的语法：Symbols——Symbol.iterator

ES6中内置了一些Symbol，其中最重要的一个恐怕就是Symbol.iterator了，相当于迭代器的接口，只有对象里有这个symbol的属性，才可以认为此对象是可迭代的。我们先看一下规范中对这个symbol的描述：A method that returns the default Iterator for an object. Called by the semantics of th

2016-01-06 08:51:19 10932 1

原创 ES6学习——新的语法：Symbol API介绍

关于Symbol API的描述在规范的19.4节中，有兴趣的自己去看。Symbol的API并不多如果不算well known的symbols，一个一个过一下：1）Symbol函数When Symbol is called with optional argument description, the following steps are taken:1. If NewTarget i

2016-01-05 14:33:44 1570

原创 ES6学习——新的语法：Symbol概述

Symbol应该是JS中全新的概念，相当于给JS添加了一种新的类型，我们知道JS有6种类型，以typeof出来的结果为准：string，number，boolean，object，function，undefined。现在多了一种symbol类型，这些类型还可以分成值类型和引用类型，symbol更倾向是值类型。规范中对于Symbol的介绍在6.1.5章节，简单看一下：The Symbol

2016-01-05 08:45:15 1234

原创 ES6学习——新的语法：Arrow Functions

Arrow Functions并不是什么新鲜玩意了，在Java 8和Apple Swift语言中也都有这种写法，只不过有的语言用单箭头（->），JS中用双箭头（=>），大同小异，单箭头更像C或者C++中的指针语法。ES6中描述Arrow Functions的章节在14.2，有兴趣的可以自己去看。下面先看个简单的例子，然后在介绍其他特征：let arr = [1, 2, 3];le

2016-01-04 09:23:48 2842

原创 ES6学习——新的语法：数值字面量扩展（Number Literal Extensions）

在ES6中加入了8进制和2进制的数值表示形式，ES6之前已经有16进制的表示方法了，所以现在JS数值类型可以表示经常看到的2进制，8进制和16进制了。2进制：0b11//38进制：0o77//63我们用typeof操作符检查上面表示形式的类型，都是number：typeof 0b11 // "number"typeof 0o77 //"number"还可以像其它数值类

2016-01-02 15:45:49 1300