ES6 系列

此外还要注意这里不一定就是正式进入规范的语法。 1. let 和 const 在我们开发的时候，可能认为应该默认使用 let 而不是 var，这种情况下，对于需要写保护的变量要使用 const。 然而另一种做法日益普及：默认使用 const，只有当确实需要改变变量的值的时候才使…

在阅读 《ECMAScript 6 入门》的时候，零散的看到有私有变量的实现，所以在此总结一篇。 1. 约定 2. 闭包 constructor 的逻辑变得复杂。构造函数应该只做对象初始化的事情，现在为了实现私有变量，必须包含部分方法的实现，代码组织上略不清晰。 3. Symb…

我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。 我们可以看到 Babel 构建了一个 _applyDecoratedDescriptor 函数，用于给方法装饰。 顺便注意这是一个 ES5 的方法。 此时传入 _applyDecorated…

最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。 data-main="vender/main" 表示主模块是 vender 下的 main.js。 require 的第一个参数表示依…

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。 函数的第三个参数 descriptor 所表示的属性描述…

在上一篇 《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。 关于寄生组合式继承我们在 《JavaScript深入之继承的多种方式和优缺点》…

在了解 Babel 是如何编译 class 前，我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟，ES6 的 class 可以看作一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的…

本文就是简单介绍下 Async 语法编译后的代码。 以上这段代码主要是用来实现 generator 的自动执行以及返回 Promise。 var gen = fn.apply(this, arguments) 就相当于 var hw = helloWorldGenerator(…

本文就是简单介绍下 Generator 语法编译后的代码。 如果你想看到完整可用的代码，你可以使用 regenerator，这是 facebook 下的一个工具，用于编译 ES6 的 generator 函数。 我们就可以在 generator-es5.js 文件看到编译后的完…

异步处理方式的改变。 为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍一下。 readdir 方法用于读取目录，返回一个包含文件和目录的数组。 stat 方法的参数是一个文件或目录，它产生一个对象，该对象包含了该文件或目录的具体信息。此外，该对象…

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 在异步处理上，async 函数就是 Generator 函数的语法糖。 其实 async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。 spawn 函数指的是自动执行器，…

首先执行 Generator 函数，获取遍历器对象。 然后使用 next 方法，执行异步任务的第一阶段，即 fetch(url)。 最后我们为这个 Promise 对象添加一个 then 方法，先将其返回的数据格式化(data.json())，再调用 g.next，将获得的数据…

Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。 我们来聊点其他的。 1. 回调嵌套 然而在实际的项目中，代码会更加杂乱，为了排查问题，我们需要绕过很多碍眼的内容，不断的在函数间进行跳转，使得排查问题的难度也在成倍增加。 当然之所以导致这个问题…

我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。 1. WeakMap 只接受对象作为键名 2. WeakMap 的键名所引用的对象是弱引用 翻译过来应该是 WeakMaps 保持了对键名所引用的对象的弱引用。 只有当我们手动设置 obj = n…

ES6 提供了新的数据结构 Set。 它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。 add(value)：添加…

为了消除这种复杂度以及减少循环中的错误(比如错误使用其他循环中的变量)，ES6 提供了迭代器和 for of 循环共同解决这个问题。 所谓迭代器，其实就是一个具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，该结果对象有两个属性，value 表示当前…

实际上，Symbol 的很多特性都无法模拟实现……所以先让我们回顾下有哪些特性，然后挑点能实现的……当然在看的过程中，你也可以思考这个特性是否能实现，如果可以实现，该如何实现。 ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。 1. Symbol 值通过 S…

我们先来回顾下箭头函数的基本语法。 本篇我们重点比较一下箭头函数与普通函数。 箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。 这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this。 我们的需求是点击一个按钮，改变该…

注意，在 li 标签中间多了一个逗号，这是因为当大括号中的值不是字符串时，会将其转为字符串，比如一个数组 [1, 2, 3] 就会被转为 1,2,3，逗号就是这样产生的。 实现原理很简单，拼合回去然后将多个空白符如换行符、空格等替换成一个空格。 如果使用这种匹配方式，sente…

如果 condition 为 false，结果会是 undefined。 即便循环已经结束了，我们依然可以访问 i 的值。 为了加强对变量生命周期的控制，ECMAScript 6 引入了块级作用域。 块级声明用于声明在指定块的作用域之外无法访问的变量。 let 和 const …