前言 在阅读 《ECMAScript 6 入门》的时候，零散的看到有私有变量的实现，所以在此总结一篇。 1. 约定 实现 {代码...} 优点 写法简单 调试方便 兼容性好 缺点 外部可以访问和修改 语言没有配合的机制，如 for in 语句会将所有属性枚举出来 命名冲突 2. 闭包 实现一 {代码...} 优点 无命名冲突 外部无法访问和修改 缺点 c...

Decorator 装饰器主要用于: 装饰类 装饰方法或属性 装饰类 {代码...} 装饰方法或属性 {代码...} Babel 安装编译 我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。 不过我们也可以选择本地编译： {代码...} 新建 .babelrc 文件 {代码...} 再编译指定的文件 {代码...} 装饰类的编译 编译前： {代码...} 编...

前言 本篇我们重点介绍以下四种模块加载规范： AMD CMD CommonJS ES6 模块 最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 require.js 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。 项目目录为： {代码...} index.html 的内容如下： {代码...} data-main="vender/main" 表示主模块是 vender 下的 m...

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

前言 在上一篇 《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。 ES5 寄生组合式继承 {代码...} 原型链示意图为： 关于寄生组合式继承我们在 《JavaScript深入之继承的多种方式和优缺点》 中介绍过。 引用《JavaScript高级程...

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

前言 本文就是简单介绍下 Async 语法编译后的代码。 Async {代码...} Babel 我们直接在 Babel 官网的 Try it out 粘贴上述代码，然后查看代码编译成什么样子： {代码...} _asyncToGenerator regeneratorRuntime 相关的代码我们在 《ES6 系列之 Babel 将 Generator 编译成了什么样子》 中已经介绍过了，这次我们重点来看...

猛一看，好像编译后的代码还蛮少的，但是细细一看，编译后的代码肯定是不能用的呀，regeneratorRuntime 是个什么鬼？哪里有声明呀？mark 和 wrap 方法又都做了什么？

前言 我们以查找指定目录下的最大文件为例，感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变。 API 介绍 为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍一下。 fs.readdir readdir 方法用于读取目录，返回一个包含文件和目录的数组。 fs.stat stat 方法的参数是...

async ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 在异步处理上，async 函数就是 Generator 函数的语法糖。 举个例子： {代码...} 当你使用 async 时： {代码...} 其实 async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。 {代码...} spawn 函数指的是自动执行器，就比如说 c...

单个异步任务 {代码...} 为了获得最终的执行结果，你需要这样做： {代码...} 首先执行 Generator 函数，获取遍历器对象。 然后使用 next 方法，执行异步任务的第一阶段，即 fetch(url)。 注意，由于 fetch(url) 会返回一个 Promise 对象，所以 result 的值为： {代码...} 最后我们为这个 Promise 对象添加一个 then 方法...

前言 Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。 我们来聊点其他的。 回调 说起 Promise，我们一般都会从回调或者回调地狱说起，那么使用回调到底会导致哪些不好的地方呢？ 1. 回调嵌套 使用回调，我们很有可能会将业务代码写成如下这种形式： {代码...} 当然这是一种简化的形式，经过一番简单的思...

前言 我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。 特性 1. WeakMap 只接受对象作为键名 {代码...} 2. WeakMap 的键名所引用的对象是弱引用 这句话其实让我非常费解，我个人觉得这句话真正想表达的意思应该是： WeakMaps hold "weak" references to key objects, 翻译过来应该是 WeakMaps 保持了对...

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

看着很简单，但是再回顾这段代码，实际上我们仅仅是需要数组中元素的值，但是却需要提前获取数组长度，声明索引变量等，尤其当多个循环嵌套的时候，更需要使用多个索引变量，代码的复杂度就会大大增加，比如我们使用双重循环进行去重：

实际上，Symbol 的很多特性都无法模拟实现……所以先让我们回顾下有哪些特性，然后挑点能实现的……当然在看的过程中，你也可以思考这个特性是否能实现，如果可以实现，该如何实现。

回顾 我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： {代码...} 相当于： {代码...} 如果需要给函数传入多个参数： {代码...} 如果函数的代码块需要多条语句： {代码...} 如果需要直接返回一个对象： {代码...} 与变量解构结合： {代码...} 很多时候，你可能想不到要这样用，所以再来举个例子，比如在 React ...

基础用法 {代码...} 如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义： {代码...} 值得一提的是，在模板字符串中，空格、缩进、换行都会被保留： {代码...} 注意，打印的结果中第一行是一个换行，你可以使用 trim 函数消除换行： {代码...} 嵌入变量 模板字符串支持嵌入变量，只需要将变量名写在 ${} 之中，其...

初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于：

这个系列算是 JavaScript 专题系列的番外篇，总共写了 8 篇，重点介绍了 underscore 中的代码组织、链式调用、内部函数、模板引擎、工具函数等内容，旨在帮助大家阅读源码，以及写出自己的 undercore。

underscore 提供了 _.escape 函数，用于转义 HTML 字符串，替换 &, <, >, ", ', 和 ` 字符为字符实体。

我们的本意是想打印带 "" 包裹的 Vikings 字符串，但是在 JavaScript 中，字符串使用单引号或者双引号来表示起始或者结束，这段代码会报 Unexpected identifier 错误。

前言 underscore 提供了模板引擎的功能，举个例子： {代码...} 感觉好像没有什么强大的地方，再来举个例子： 在 HTML 文件中： {代码...} JavaScript 文件中： {代码...} 效果为： 那么该如何实现这样一个 _.template 函数呢？ 实现思路 underscore 的 template 函数参考了 jQuery 的作者 John Resig 在 2008 年发表的一...

所以 underscore 提供了 noConflict 功能，可以放弃 underscore 的控制变量 _，返回 underscore 对象的引用。

partial 在《 JavaScript 专题之偏函数》中，我们写了一个 partial 函数，用来固定函数的部分参数，实现代码如下： {代码...} rest parameter ES6 为我们提供了剩余参数（rest parameter）语法，允许我们将一个不定数量的参数表示为一个数组。 {代码...} 我们可以利用这一特性简化 partial 实现的代码： {代码...} 写个 ...

map 方法除了传入要处理的数组之外，还有两个参数 iteratee 和 context，类似于 Array.prototype.map 中的其他两个参数，其中 iteratee 表示处理函数，context 表示指定的执行上下文，即 this 的值。

前言 本文接着上篇《underscore 系列之如何写自己的 underscore》，阅读本篇前，希望你已经阅读了上一篇。 jQuery 我们都知道 jQuery 可以链式调用，比如： {代码...} 我们写个简单的 demo 模拟链式调用： {代码...} jQuery 之所以能实现链式调用，关键就在于通过 return this，返回调用对象。再精简下 demo 就是： {代...

在 《JavaScript 专题系列》 中，我们写了很多的功能函数，比如防抖、节流、去重、类型判断、扁平数组、深浅拷贝、查找数组元素、通用遍历、柯里化、函数组合、函数记忆、乱序等，可以我们该如何组织这些函数，形成自己的一个工具函数库呢？这个时候，我们就要借鉴 underscore 是怎么做的了。

JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

排序采用的算法跟数组的长度有关，当数组长度小于等于 10 时，采用插入排序，大于 10 的时候，采用快速排序。(当然了，这种说法并不严谨)。