一个使用Canvas处理图片的Demo，使用React + webpack + Redux 的技术栈，非常适合初学者，希望你喜欢！

为什么

学习canvas已经有一阵子了，忙完了计组课设，考完了数据挖掘，终于有时间来做一点小Demo来巩固自己所学的知识了。就像上面介绍的那样，这是一个使用Canvas进行图片处理的Demo，其可以选择本地图片，改变其R G B 以及透明度，然后可以选择保存到本地。并且为了重温很久没碰的React，前端使用了React，使用Redux进行数据的管理(虽然简单到没必要使用),并且使用了css modules 以便直接在组件中使用css。当然这一切都是在使用webpack进行编译打包的情况下。

这个Demo十分简单，特别适合React初学者食用，相信会对你的React学习有所帮助！

如何运行

1. 从我的github上clone到本地;
2. 进入Demo根目录, 执行npm init 安装依赖;
3. 安装完毕后，执行 npm run build 进行构建;
4. 在Chrome浏览器(下载功能只能在Chrome中使用，所以…)中打开index.html。

至此，你可以体验这个简单的Demo了。

像什么

如果你觉得在你的机器上run很麻烦，或者你只是想看看长得怎么样。

在浏览器器中打开，是这个样子的：

我承认的确很简单，简单到显得简陋了！接下来你可以选左下角的选择文件按钮来选择任何一张图片，比如我选择了一张图片后:

任何被选中的图片都会被居中显示，宽高都会适应600*400的图片操作区域。现在，可以对图片进行操作了：

我们选择对图片的R、G、B、以及透明度进行调整，实时调整的效果将会在左侧的图片区域实时显示出来。

第四步，点击图片区下的按钮，就可以吧处理过的图片下载到本地了，我们打开下载后的图片和处理的图片进行对比，就像这样：

至此，我已经演示完了所有的功能。

不足

如果你细心一点的话，你会发现这个Demo还有很多问题：

1. 我们导入任何宽高的图片，其都会被自适应到框中，所以处理后的图片品质会下降。
2. 保存图片只能在Chrome浏览器中进行，已测试在Firfox中无法使用这个功能。
3. 右侧的工具栏在选择新图片后不会被初始化。
4. 功能单一。
5. 界面简陋
6. …

你需要注意的是

如果你想学习React和canvas，那么我希望我的这个Demo会对你有所帮助，这里提几个需要注意的点，这些点也是我在开发过程中遇到的问题：

1. 如何使用input file来选择一张图片并绘制到canvas中。
2. 如何保存图片。
3. 图片在React中绘制的时机。
4. 如何使用redux进行数据管理，特别是如何使用带参数的action。
5. 你所关注的。

未来

这虽然是一个很简单的Demo，但是我会在此基础上进行继续跟进，现在能想到的是解决上面提到的不足，比如设置两种模式，处理图片品质下降的问题；兼容主流浏览器；增添新功能；修改工具栏的状态初始化的bug；以及其它我以后能够想到并且我能够实现的。

以及…我目前有想法开发一个可交互的视频编辑器，有兴趣的同学可以关注下咯！

写到后面

还有不到3个小时我就21岁了，想想前面走过的20年，尤其是上大学的三年来，感慨颇多。谢天谢地，就算无论如何，我都完好无损的度过了。接下来的一岁中，我将面临人生中一个个重大的转折点，实习、毕业、工作、走向社会。从小到大，我对我所有的事情做出选择，接下来，也不例外。我做好准备了，并且一直在准备着！

共勉！

新！

5.28日

1. 解决了再次选择图片工具栏初始化的问题；
2. 工具栏的调节精度下沉到0.01；
3. 修改页面细节。

现在看起来长这样！

6.3日

1. 同样的功能，不同的界面和实现方式，采用react但是去除redux使用state进行状态管理；
2. 操作更加主流和人性化；
3. 已知BUG，下载某些图片的时候可能会失败，暂不知原因。

新版地址：https://github.com/xiaomoer/picture-editor-with-canvas

看起来是这样的：

还有这样：

加油！

事情的起因是这样的，前段时间面试的时候面试官问我会canvas不，作为一名未来的前端猿，我只有过一点了解，后来居然收到了offer，当然在闲暇之余是要学习一下canvas，并且在学习过程中首次接触到了本文的主角requestAnimationFrame。

web中实现动画

老实说，如果有人问我如何在web开发中实现动画，我第一时间想到的就是使用定时器setTimeout()或者setTimeInterval()来实现。其实实现的方式远远不止这一种，在CSS3的时代，我们实现动画有了更多的选择，比如使用关键帧动画，使用transition，我们也可以在canvas上绘图来实现动画；当然，还有requestAnimationFrame。

使用setTimeout()/setInterval()实现的方式很简单，我前面有一篇文章就简要介绍了JS中的定时器。使用这种方式实现动画其实是有其性能瓶颈的，例如：

1
2
3
4

function animation(){
    // do something
    setTimeout(animation, 1000/60)
}

上面我们以60帧/秒的速度执行动画，但是如果浏览器不是60帧/秒，就会掉帧；并且由于JS单线程的特点，所有不能保证每一次执行回调都是1000/60毫秒；还有，当窗口处于非激活状态的时候，它同样可能会执行。

其实很好理解，作为定时器，setTimeout/setInterval并不是专门做动画的，存在各种各样的问题也是很好接受的，但是当我们认识到这种实现动画的方式的各种缺点时，我们也许会考虑另一种动画的实现方式，而requestAnimationFrame是一种更好的方案。

初识 requestAnimationFrame

当我们执行window.requestAnimationFrame(callback)的时候，浏览器会在下次重绘的时候执行回调函数，它会告诉浏览器马上就要执行动画了，而callback则是用于更新动画。

requestAnimationFrame使用起来很简单，通过递归不断来执行回调来更新画面从而让画面动起来，我们甚至不需为其指定动画执行的时间和帧率。其优点是：1）从名字上就可以看出这是一个专门用于实现动画的API，优化是自然少不了的；2）其如果处于非激活状态，会自动暂停执行，有效节省了CPU资源。

小实例

我们在做动画的时候，有时希望背景移动起来，结合目前正在学习的canvas，我们可以很轻易的做到这点.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let j = 0;
let image = document.querySelectorAll('img')[0];
function moveBackground(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(10, 0);
  ctx.drawImage(image, 0, 0);
  j++;
  if(j < 20){
    requestAnimationFrame(moveBackground);
  }
}
let moveBtn  = document.getElementById('move');
moveBtn.onclick = function(e){
  e.preventDefault();
  requestAnimationFrame(moveBackground);
}

上面我们点击button的时候，开始执行动画，通过不断的坐标变换和清除重绘，达到背景图片向右移的效果。

最后，请注意，不是所有浏览器都支持该方法，所以你可能需要一个polyfill，关于如何实现这个polyfill，网络上的资源比较多了，这里就不在赘述。

1. 避免给一个未申明变量赋值，因为这会直接创建一个全局变量。

2. 总是使用 ‘===’ 而不是 ‘==’，’===’会直接比较，而’==’必要时会进行类型转换等造成错误。

3. 使用typeof instanceof 应当小心。

   1 2 3 4

   typeof null // object function A(){} new A() instanceof A // true new A() instanceof Object // true

4. arguments 对象转换成一个数组

   1 2	Array.ptototype.slice.call(arguments); Array.from(arguments) //ES6

5. 验证一个参数是否是数组

   1	Array.prototype.toString.call(a) === '[object Array]'

6. 取得一个数组中最大值与最小值

   1 2	Math.max.apply(Math, arr); Math.min.apply(Math, arr);

7. 使用splice删除数组中某一个/一些元素，而不是使用delete，如果使用delete的话，相当于只是把原值变为undefined

8. 使用for .. of来遍历数组，使用for .. in 要避免遍历到原型上面的可枚举属性，使用hasOwnProperty()来检测

9. 不要扩展Object.prototype，因为这会给所有(?)对象增加属性/方法，从而产生很多意想不到的行为和错误！

10. 对于一个构造函数，总是使用 new进行构造函数调用，否则默认返回空(对象)。

11. arguments.callee() 可执行当前函数，不推荐使用。

12. 认识 ‘+’运算符， 对于对象而言，会转换成字符串，对于其他运算符则会尝试转成数字。

13. 在使用if语句是，如果需要在条件中赋值，需要加上括号：
    `javascript
    if((x = y)){
    // do something
    }
    并且结果是否为真取决于y的真假。

14. 判断一个数是否为NAN使用 x !== x,为true则该变量为NAN(NAN不等于自身)

文章来自于我在express框架上使用cookie引发的一些问题，但在具体介绍cookie以及如何正确的使用cookie之前，我觉得我有必要说一说cookie到底是什么。

cookie

Cookie是服务器保存在浏览器中的一段小(一般而言size<4KB)的文本信息，而浏览器每次想服务器发出请求，就会携带上这段信息。Cookie一般包含了key、value、到期时间、所属域名、所属路径等信息。

在浏览器中我们只需要使用document.cookie来得到当前页面所属的cookie。请注意，返回的cookie是以字符串形式存在的，不同的key-value之间通过’;’来分割，所以如果你想对齐进行进一步操作，需要相应的处理。

这里需要注意的是，document.cookie属性是可写的，这就意味着你可以手动添加cookie，使用document.cookie="name=value"的形式。注意，这里是添加，而不产生覆盖。

好了，关于cookie的属性的具体含义和用法，大家可以自行去了解。

我的问题

我在使用服务器端使用cookie的时候出现了问题，出现这样问题的原因很简单，首先我对cookie存在错误的理解，请务必注意，cookie是服务器发送给客户端，而客户端在发起请求的时候携带cookie而已。在正确认识cookie之后，并且成功的将cookie发送到浏览器过后，问题又来了，我在请求的时候，cookie却不能发送到服务端。我使用的是下面一段代码：

1
2
3
4
5
6
7
8
9
10

fetch('/login?'+stringify_data, {
        method: 'GET'
    }).then(function(res) {
        return res.json();
    }).then(function(json){
        console.log(json.status);
    }).catch(function(err) {
        console.log('oh ! error!')
    })
}

这里我使用了fetch API，在能够正确的发送请求的情况下，服务器无法读取到相应的cookie信息，同样在chrome开发者工具中查看请求头也发现请求并没有携带cookie信息。我想着一定是fetch API的问题，所以我赶快写了一个使用Ajax的请求，很显然，能够正确的发起携带cookie的请求。好吧，写到现在，我想的确是fetch API的问题了，阅读文档发现fetch API发送的请求默认是不带cookie的，必须手动设置(无论是出于什么样的考虑，但还是觉得坑)！好吧，问题迎刃而解，我们只需要在fetch函数第二个参数设置credentials: 'include'就可以发送cookie了/无奈！

在express中使用cookie

在express中使用cookie是一件十分惬意的事情，因为如果你使用cookie-parser中间件的话，那么我们只需要使用res.cookie(name, value[,options])就可以设置cookie了，关于options相关的参数可以自行学习！

如果想删除cookie，也很简单，使用res.clearCookie(name)就可以啦。

当然如果想获取请求头发过来的cookie，我们只需要使用req.cookies就可以了，这里返回的是一个JS对象，我们直接可以使用name来读取值，从而做进一步的操作。

在使用了cookie-parser中间件过后，在服务端操作cookie已经足够简单，并且cookie-parser不但提供了非签名使用的方式，还提供了签名的使用方式，具体使用是在使用中间件的时候添加一个secret，app.use(cookieParser('secret'))即可，当然，在获取cookie的时候使用 req.signedCookies属性就好了。

好了，如果你不想使用cookie-parser，我们也能够通过req.headers.cookies(感到罪恶所以不推荐/无奈)访问到cookie，如果想写cookie的话，使用res.setHeader(name, value)(再次感到罪恶)或者res.writeHead(status[,options])就可以了…

尾巴

一般情况下，文章末尾，我总会写一点鸡汤/无奈，这次也不例外。距离写上一篇博客已经过了很久了，起初有两篇想写的文章，一篇是在RN中使用Navigator，另外一篇则是介绍我自己正在学习的几种分类算法。可是当创建好文件准备开工时，我因为写一篇文章可能需要2-3个小时(我速度慢)或者是因为真的动笔写的时候反而觉得没什么要说的就放弃了。然后一段时间过后，或许是因为忙，或许是因为懒，或许是因为浮躁，就是没有去实践，没有去巩固，而把一切都抛之脑后，然后把前面学习到的忘得一干二净！

嗯，这的确的真实的！仅此而已！

END

说起布局，我脑子里一下就想到了DIV+CSS布局，毕竟曾经被那么多写着DIV+CSS网页开发的书籍洗过脑，然后到现在还不怎么会用这种大众的布局方式。当然了，其实页面还有其它的一些布局方式，比如表格布局，框架布局这样已经逐渐被淘汰的布局方式，也有今天的主角–一颗冉冉上升的新星，弹性盒子布局。

Flex是Flexible Box的简称，我们这里把其翻译为弹性布局，至于为什么不叫“灵活的盒子布局”。额，这个问题也许会在读完本篇文章找到答案。好吧，正式开始。

容器

flex是display的一个属性，当然对于行内元素还有一个叫做flex-inline的属性，这里我们不多说，但是要注意的是，一旦对一个元素的display属性设为flex，那么它的子元素就不能使用“浮动(float)”这个神奇的属性，而这个元素将会一跃成为容器(container)，而其的子元素将会成为项目。好吧，先从容器说起。

一旦把一个元素的display属性设置成为’flex’，这个元素就成为一个容器，容器有几个比较重要的属性，学习和掌握这几个属性是学习弹性布局的关键。它们分别是：

1. flex-direction: 决定子元素(项目)的排列方向。
2. justify-content: 指定子元素在主轴上的对齐方式。
3. flex-wrap: 指定多行显示以及显示形式。
4. align-items: 决定项目在交叉轴上的对齐方式。
5. align-content: 定义项目在多轴线上的对齐方式。

好吧，大概就是这几个了，我们注意到在上面解释的时候提到了主轴和交叉轴，这里我先简单解释一下：对于这个概念，我们可以很简单的在一个容器上画一个十字坐标轴，如果我们设置flex-direction为row(行)，那么横坐标就为主轴，纵坐标就是交叉轴，这里要注意坐标轴的指向，因为同样有一个属性为row-reverse，此时主轴的方向指向和设置为row的相反方向。

项目

作为容器的子元素，项目同样有几个重要的属性：

1. order: 控制项目的排列，默认为0，值越小则越靠前。
2. flex-grow: 用于定义Flex项目的放大比例，默认为0，即使存在剩余空间，也不放大。
3. flex-shrink: 用于定义Flex项目的缩小比例，默认为1，即空间不足，Flex项目将等比缩小。
4. align-self: 允许单个Flex项目有不同于其他Flex项目的对齐方式。

然后

我并不会把每一个属性具体来讲，因为这样的文章在网络上的确太多了。我正在学习RN，所以在这里就写一个界面，其中的布局将会采用弹性布局，中途我会对布局进行简单的分析，以加深理解。
当写到这里的时候我就开始布局这个简单的页面，然后到现在才布局好，时间用了那么长，感觉像是过了一年…好了，不多说了，最终的界面如下图所示。

其实我也不知道自己写了啥，还是勉为其难的就叫其“登录页面”吧，现在我来分析一下这个页面哪些元素是容器和项目(当然都是项目啦)，又在什么地方使用了什么属性。

页面整体采用了弹性布局，所以从整体来看我们一定使用了flex-direction属性，并且其值是column，所以这里的主轴一定是Y轴并且是方向向上。并且我们能够观察到，页面上所有的元素都是居中的，我们于是想到了在交叉轴上的对齐方式是: align-items: ‘center’，而其主轴上的对齐方式则是默认的justify-content: ‘flex-start’。

接下来来看两个不明显的，页面上有两个输入框，每个输入框其实都是一个View组件包裹，那么在这个组件内部，我们仍然使用了弹性布局(竖轴为主轴)，为了让输入框上下居中，这里必须让justify-content: ‘center’；紧接着最后一行有两个按钮，这两个按钮同样在一个View组件中，并且这个View也是弹性布局，并且一定要设置flex-direction: ‘row’才能让这两个按钮排列在一行。我们同样可以给每个按钮赋予不同的order值，让其进行排序。

总结一下：
我们是用弹性布局完成了一个基本页面的布局(虽然这真的很丑陋)，在这个简单的布局中我们使用到的属性并不多，但是的确比使用css+div布局来得更快，尤其是垂直上的居中，css是比较难以实现的。这里我们一共有四个容器，分别是最外层容器，每一个输入框外层容器，按钮组外层容器，当然，这里面所有的元素都能称为项目，这里就不在多说。

尾巴

说了这么多，那么我对flex布局的态度到底是什么？一句话总结，学习它，了解它，使用它。弹性布局我在刚开始学习React的时候就有了解过，过了也快半年了吧，当时看着阮一峰老师的文章，感觉怎么都不明白，然后渐渐抛之脑后。直到学期开始，我开始学习RN，再一次接触到Flex布局，才想起来画一些时间去了解，然后试着使用，最后再让自己记忆下来。相比第一次我接触Flex布局，我做出了改变，而这种改变是在时间并不充裕的情况下，弥足珍贵的。希望自己能够加油，也希望和我有同样压力的同学加油！

大家对于异步这个词想必都不陌生，看到异步我可能最先想到的就是使用回调，再者我会使用Promise，可是使用回调处理异步控制流是有缺陷的：第一，基于回调的异步方式实在不适合大脑对于任务的思考(这点我深有体会)；第二，存在控制反转的问题。而Promise链提供了我们以顺序的方式处理和表达异步流。而这篇文章的主角生成器(generator)也是一种顺序和看似同步的处理异步的方式，并且它比Promise更加优秀。

有关函数

不知道大家有没有这样思考过，一个函数一旦执行，其是否能够中断，我也没有仔细想这个问题，并且当看到这个问题，我会经验判断函数在执行过程中不会中断。到底是否中断，我们先写一个例子：

1
2
3
4
5
6
7
8
9
10

var a = 1;
function foo(){
  a++;
  bar();
  console.log(a);
}
function bar(){
  a++;
}
foo(); // 3

运行上面这个例子，最终的结果是3，这就意味着，当函数执行完a++后，函数foo从表面上来看被中断了，然后执行了bar函数，最后执行权交给foo，函数返回已经被修改的变量a的值。虽然通过上面的小例子，并且因为JS单线程的特性，我们似乎能够肯定JS是抢占式的，但实际情况是JS并不是抢占式的，虽然函数bar的执行打断了函数foo的执行，但这其实是一种“关联”(参考原型继承)。

初识生成器

现在让我们来认识生成器表达式，
同样是上面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

var a = 1;
function *foo(){
  a++;
  yield;
  console.log(a);
}
function bar(){
  a++;   
}
var iter = foo();
iter.next();
bar();
iter.next(); // 3

分析一下：
首先我们创建了一个生成器foo(注意*)，该函数里面多了一个yield，有过python经验的大概知道这是干什么的。然后创建了一个函数bar；再来看执行，这里var iter = foo()并没有执行生成器foo，而是构建了一个迭代器，然后使用next方法启动了迭代器foo，并且在碰到yield停止执行，此时已经执行了x++，然后执行函数bar，执行完后，x经过两轮自增，此时x的值为3；最后我们调用next方法，从上一次中断处继续执行，并且没有碰到yield表达式，一直执行到函数结束，打印变量x的值为3。

现在我们来回答什么是生成器，其是一个特殊的函数，在函数声明的时候函数名前面包含一个”*“，并且能够多次启动和暂停。好了，我认为仅此而已。

一些问题

为了把生成器运用到异步流程控制中，我们还需要更深层次的了解生成器。

生成器仍然是一种函数

既然说生成器其本质上还是一种函数，所以其仍然具备函数最基本的特性，能够传递参数，也能返回值。我们不妨写一个例子测试一下：

1
2
3
4
5
6
7
8
9

function *test(a, b){
  a++;
  yield;
  return a + b;
}
var it = test(1,2);
it.next();
var res = it.next();
console.log(res.value); // 4

其实生成器和普通函数的一个很大区别是在运行期间，它不会直接运行，而是创建了一个迭代器，然后每调用迭代器的next方法，便向下执行直到到碰到yield或者执行完成暂停。而我们注意到调用next方法返回的其实是一个对象，其包含一个value属性，如果生成器返回值的话，那么该属性的值就为生成器返回的值。总的来说，生成器的运行到目前为止完全是依托迭代器。

好了，继续。

继续来看例子：

1
2
3
4
5
6
7
8
9
10

function *foo(a, b){
  a++;
  yield a;
  return a + b;
}
var it = foo(1,2);
var mid = it.next();
console.log(mid.value); // 2
var res = it.next();
console.log(res.next); // 4

这个例子想表达的就是对于生成器而言，yield表达式总会返回一个值，而我们可以通过迭代器next方法生成的对象来得到。

继续来看一个更复杂的例子：

1
2
3
4
5
6
7
8
9

function *foo(a){
  var b = a + (yield 'ok return!');
  return b;
}
var it = foo(1);
var res = it.next();
console.log(res.value); // ok return!
res = it.next(2);
console.log(res.value); // 3

这个例子向我们展示了生成器是如何双向传递消息的，yield表达式可以发出消息响应next(…)的调用，而next(…)可以向暂停的yield表达式发送值。

多个迭代器

一个生成器的多个实例可以并发执行，并且可以彼此交互。

1
2
3
4
5
6
7
8
9
10

function *gen(a){
  var b = a + (yield)
  return b
}
var it1 = gen(1);
var it2 = gen(2);
it1.next();
var res = it1.next(3).value;
it2.next();
console.log(it2.next(res).value); // 6

这个例子想说明的是一个生成器的多个实例可以并发执行，并且是互不干扰的。

JS为了模拟面向对象“类”的实现，为了模拟类的复制行为，可能会使用一种叫做“混入”的方法，当然，这种方法和我们今天要说的原型并没有多大的关系。使用mixin的方式来模拟“类”的实现不常见，当然为了模拟”类“所付出的代价也会让我们得不偿失，JS中不并存在”类”，而是存在一种叫做原型的东西，请容我细细说来。

Prototype

我们直接来讲文章的主角Prototype，其实JavaScript中每个对象都有一个叫做[[prototype]]的属性，这个属性就是对其他对象的一个引用。基本上所有的对象在初始化时[[prototype]]都会被赋予一个值，关于这个值是什么以及如何访问这个[[prototype]]属性，我会在后面提到。

还是先看一个例子：

1
2
3
4
5

var obj = {
  a: 1
}
var obj2 = Object.create(obj)
console.log(obj2.a); //1

上面的代码我们创建了一个对象obj，其包含一个属性a，我使用Object.create(obj)创建了一个新的对象，并把该对象的[[prototype]]属性赋值为obj，最后我们打印obj2中并没有显式声明的变量a，令人惊奇的是，我们成功的访问到了变量a，并且该变量的值为[[prototype]]属性引用对象obj的属性a的值！

我想解释下为什么要对这段代码写这么详细的解释，因为对于大多数接触过JS的童鞋而言，原型已经是见怪不怪了，可是当初我学习JS的时候，脑子里完全没有原型的概念，直到有一天我慢慢开始懂得原型，那个时刻，我的心情就像现在写这段解释的时候这么激动!

看完上面这段代码和冗长的解释，即使不了解JS的童鞋也对原型有了一定的认识。在这里我想再说一下，[[prototype]]到底有什么用，其实很简单，当我们试图引用某个对象的时候，在底层其实调用的是一个GET方法，而这个方法首先会查找对象本身存在这个属性与否，如果不存在则通过[[prototype]]访问其原型对象，如果还是不存在的话，则访问原型的原型对象(别忘了原型对象也是普通对象)，知道找到或者达到尽头(Object.prototype)。这个道理很简单，如果你使用for…in循环遍历一个数组的话，也许你得到的结果除了数组成员，还包含一些其它成员(不信你试试看)，这些成员就来自原型对象，并且是可枚举的，而对于in关键字，也会查找原型链上面属性。

类

在说类的时候，也许更恰当的是给类打上一个引号，因为JS中根本就不存在”类”，JavaScript中只存在对象，我们不使用“类”创建对象，更多时候我们直接创建对象。可有些时候，我们使用new关键字来初始化一个对象，我们甚至在ES6后开始使用class，extend等属于类的关键字，这貌似和我前面说的矛盾了…
接着看一个例子：

1
2
3
4
5
6

function A(){

}
console.log(A.prototype);// {}
var a = new A();
console.log(typeof a); // object

我们创建了一个函数A，并且这个函数有一个属性prototype，如果没记错的话，这是本篇文章第一次访问原型，然后我们使用new初始化了一个对象，有传统面向对象语言基础的同学就知道，这简直像极了“类”！我再次强调，JS中不存在类，而且此new非彼new，这里函数A在new关键字的作用下，新建了一个空白对象，并让其prototype指向的对象赋值给新建对象a的[[prototype]]属性(关联)，当然这里面还会做一些其它的工作，不过大体上就这样了，很简单吧！

在JavaScript中，并不存在类的复制，我们不能创建一个类的多个实例，只能创建过个对象，只不过通过new这种方式创建的对象，其内部的[[prototype]]属性关联到同一个对象，这里所说的关联是建立一个联系，并不存在复制。

构造函数

既然不存在类了，这构造函数听着也很别扭，我们暂且给它打个引号吧。上面我们在说“类”的时候，我们就用到了”构造函数”，函数A就是所谓的“构造函数”，其本质上就是一普通函数，是JS的一等公民，要说真要有什么区别，函数名首字母大写算吗？也许是吧。

再来写一个例子：

1
2
3
4
5

function B() {}
console.log(B.prototype);
console.log(B.prototype.constructor === B);
var b = new B();
console.log(b.constructor === B);

我感觉我放了一个大招，突然让自己迷惑起来，这里我要说明的是，B.prototype和对象b有一个叫做constructor的属性，并且默认指向函数B。这个属性的名字会让我们对JS的误解加深，四级没过的都知道，constructor翻译过来可叫做“构造器”啊，那么既然B.prototype.constructor指向了B，我们还有什么理由不说B不是“构造函数”？讲到这里，我很无奈…

其实呢，JS中根本不存在什么“构造函数”，其就是普普通通的函数，只不过一旦加上new关键字，这个函数调用再也不是普通的函数调用，我们把它叫做“构造函数调用”。

这里不想再说下去了，写个复杂点的例子先：

1
2
3
4
5
6
7
8
9

function Student(name, city){
  this.name = name;
  this.city = city;
}
Student.prototype.showInfo = function(){
  console.log(`name: ${this.name}, from: ${this.city}`);
}
var stu = new Student('limoer', 'Chongqing');
stu.showInfo(); // name: limoer, from: Chongqing

这里有两个值得注意的地方，每个通过”构造函数调用”而生成的对象都存在两个属性name和city；我们给Student.prototype上添加了一个“方法”，这样所有的新建对象都关联了这个对象，可以引用这个“方法”，关于this的使用，这里就不在提了。

在说了这么多过后，我想把“构造函数”称为“关联函数”，因为所谓的“构造函数”其实并不存在，或者说是，我们并不知道一个函数在创建好后是否是“构造函数”，而如果我们把它叫做“关联函数”，因为它本质上做的工作包含了建立对象和其原型对象的关联，当然，这个叫法是不恰当的。

再来看看constructor属性，一般情况下，任何一个普通对象都存在一个constructor属性，其实这个属性并不是其本身就有，而是当引用该属性的时候，其可以在该对象的原型链中找到。现在我急切的想写一个例子来表明一个问题：

1
2
3
4

function C(){}
C.prototype = {}
var c = new C();
console.log(c.constructor === C); // false

我不啰嗦了直接看问题，这里对象c的constructor属性竟然指向的不是创建它的那个函数C，这也侧面印证了我上面说的话，通过构造函数调用创建的对象不直接持有属性constructor而是从其原型链中“继承”而来，所以当我们想写一段包含继承的代码时，如果还想用constructor属性，需要做必要的修正。

1
2
3
4
5
6

function Main(){}
function Sub(){
  Main.call(this)
}
Sub.prototype = Object.create(Main);
Sub.prototype.constructor = Sub;

在结束“构造函数”讨论的时候，提醒一句，尽量不要使用constructor属性，要问原因？我想我已经不那么直观的在前面说出来了。

如何关联

我在上面提到把“构造函数”叫做“关联函数”，这虽然是不恰当的，但也不是一无是处，因为使用new关键字的“构造函数调用”，其在创建一个对象过后，也把该对象的[[prototype]]属性关联到该函数的prototype上。当然，如何关联不止这一种方法，这里介绍一种使用更为普遍的方法，Object.create(proto)。

还是例子为先吧：

1
2
3
4
5
6
7

var obj = {
  info: function(){
    console.log('info');
  }
}
var obj1 = Object.create(obj)
obj1.info(); // info

这里我们使用字面量的直接形式创建了一个对象obj，该对象包含一个方法info，然后使用Object.create()创建了一个新的对象，并且该对象内部的[[prototype]]属性指向obj，概括点来说，该方法创建了一个对象，并把其关联到指定的对象。

Object.create()是ES5才引进的，在这里我实现一个polyfill代码作为本篇的结束：

1
2
3
4
5
6
7

if(!Object.create){
  Object.create = function(obj){
    function Foo(){}
    Foo.prototype = obj;
    return new Foo();
  }
}

当然，这个版本的polyfill代码无法做到更复杂的功能，而Object.create第二个参数可以指定要添加到新建属性的属性名、值等。

尾巴

我们如果要访问一个并不存在的属性，在内部将会使用[[GET]]方法，并且查找该对象[[prototype]]所关联的对象，该关联实际上定义了一条“原型链”，在查找属性的时候会遍历整个“原型链”。

关联两个对象的最常用的两种方法是：（1）使用new关键字进行“构造函数调用”，创建一个新对象并进行关联；(2)使用Object.create()，创建新的对象，并时期和传入对象关联。

最后再次强调，JavaScript并不存在类，所有继承的实现完全是基于原型链，不存在复制。

注：到底前面所说的原型链的尽头到底在哪里呢？答案是Object.prototype，对于一般的原型链而言，其最终都指向了Object.prototype，这个对象包含了许多对象通用的方法，例如obj.toString()&obj.valueOf()等。

JavaScript中的this关键字一直都是学习JS的一个难题，我们往往不能准确的理解this在上下文中的含义，往往导致一些问题的发生。对于this关键字，我们需要知道的是：this即不指向函数自身也不指向函数的词法作用域，this在函数调用时被绑定，也就是说，它指向什么完全取决于函数在哪里被调用。

绑定规则

在探讨具体的绑定规则时，我们先来看一个函数调用位置的例子：

1
2
3
4
5
6
7
8
9
10
11
12

function foo() {
  console.log('call foo');
  bar();
}
function bar() {
  console.log('call bar');
  baz();
}
function baz() {
  console.log('call baz');
}
foo();

我们声明了三个函数，相互嵌套。现在来寻找各个函数的调用位置，foo在全局作用域中被调用，bar的调用位置则是

1
2
3
4
5
6
7
8
9
10

> 下面来看看几种一般性的绑定规则

#### 默认绑定
看一个例子：
```javascript
var name = 'limoer';
function showName(){
  console.log(this.name);
}
showName(); //limoer

这里

1
2
3
4
5
6
7
8
9
10
11
12
13

#### 隐式绑定
隐式绑定的规则是调用位置是否有上下文对象，即是否被某个对象拥有或者包含。

来看一个例子：
```javascript
function showName(){
  return this.name
}
var obj = {
  name: 'limoer',
  msg: showName
}
obj.msg(); // limoer

对于函数showName而言，其在obj对象中被引用，即函数此时引用有上下文的对象，此时使用隐式规则，this将被绑定到这个上下文对象，所以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

两点注意：
（1）属性引用链只有或则说是最后以层才会影响调用位置，修改下上面的例子：
```javascript
function showName(){
  return this.name
}
var obj = {
  name: 'limoer',
  msg: showName
}
var obj2 = {
  name: 'lindo',
  obj: obj
}
obj2.obj.msg(); //limoer

（2）this的绑定与函数的调用位置息息相关，一个常见的问题就是被隐式绑定的函数会丢失绑定对象，即应用了默认绑定规则。

1
2
3
4
5
6
7
8
9
10

var name = 'lindo';
function showName() {
  console.log(this.name);
}
var obj = {
  name: 'limoer',
  msg: showName
}
var show = obj.msg;
show(); // lindo

函数show虽然函数showName的一个引用，但是由于其指向的是函数的本身，此时bar是一个不带任何修饰的函数调用，应用了默认绑定规则。

显式绑定

和隐式绑定相反，显式绑定是一种“强制性”手段，把this绑定到某个对象上，JavaScript提供了这样的函数,call()&apply()，这两个函数是如何使用的呢？它们的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。

1
2
3
4
5
6
7

var obj = {
  msg: 'inner'
}
function showMsg(){
  console.log(this.msg);
}
showMsg.call(obj)

call 和 apply方法的区别仅仅是参数上的问题，除了第一个参数外，apply可以使用数组来传入剩余参数，而call则是以多参数的形式写出来。除了call和apply以外，还有一个bind方法，它接收一个对象，返回绑定了该对象的这个函数，此种方法是硬绑定，也就意味着，绑定不可更改，这里不再多做介绍。

new 绑定

这是最后一种绑定方式，即“构造函数绑定”。会在将new关键字的时候在阐述此种绑定。

小结

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后
就可以顺序应用下面这四条规则来判断 this 的绑定对象。

1. 由new调用?绑定到新创建的对象。
2. 由call或者apply(或者bind)调用?绑定到指定的对象。
3. 由上下文对象调用?绑定到那个上下文对象。
4. 默认:在严格模式下绑定到undefined，否则绑定到全局对象。
   一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑 定，你可以使用一个DMZ对象，比如ø = Object.create(null)，以保护全局对象。
   ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这 其实和ES6之前代码中的self = this机制一样。

我们都知道对于任何声明在某个作用域内的变量，都将属于某个作用域。但是对于JS而言，变量的声明与作用域还存在一种微妙的联系，这种联系我们叫做提升。

首先来看一个例子：

1
2
3
4
5

console.log(name); // undefined
var name = 'limoer';
age = 2;
var age;
console.log(age); // 2

这个例子很好的体现了提升，输出name的时候，由于变量的声明在输出语句之后，想当然的使用RHS查找，查找失败抛出错误。但实际情况却输出了undefined，这是因为对于变量name，其声明被提升了，但是赋值语句却没提前，所以输出undefined。而对于age变量，赋值在输出前，我们理所应当的认为前面的赋值会被覆盖，但是程序却出乎意料的输出了2，这同样是因为变量age的声明提升到了首部，然后再进行赋值，最后输出了结果2。

上面的例子可以改写成这样：

1
2
3
4
5
6

var name;
console.log(name);
name = 'limoer';
var age;
age = 2;
console.log(age);

其实，对于提升的讨论就是“先有蛋还是先有鸡”的讨论，通过上面的分析，显然我们可以得出“先有蛋（声明），后有鸡（赋值）”的结论。

继续看一个例子：

1
2
3
4
5
6
7
8
9
10

foo(); // call foo
function foo(){
  console.log('call foo');
  console.log(a);
  var a = 1;
}
bar(); // TypeError
var bar = function(){
  console.log('call bar');
}

这个例子说明了三个问题：
（1）函数声明存在提升；
（2）函数表达式不存在提升；
（3）每个作用域都会存在提升。
这里我只想解释一下为什么上面运行bar() 抛出类型错误，由于变量声明存在提升，所以实际执行的是下面的代码：

1
2
3

var bar;
bar();
bar = function (){...}

由于bar的提升，调用bar()的时候并没有发生赋值操作，此时bar为undefined，所以对undefined进行函数调用会抛出一个TypeError而不是ReferenceError。

那么问题来了，既然变量和函数声明都存在提升，那么当这两个同时出现的时候，谁的优先级更高呢？

同样，写一个例子如下：

1
2
3
4
5
6
7
8

foo(); // call foo function
var foo;
function foo(){
  console.log('call foo function');
}
foo = function (){
  console.log('call foo expressions');
}

好了，我们得出的结论是：函数声明提升的优先级更高。

注意：这里尽管foo的声明在函数foo声明之前，但是由于存在这样的规则所以被当做重复声明被忽略了，但是如果是函数声明，照样可以覆盖前面的声明。

小结

ES6引入的const和let关键字的一大特点就是使用这两个关键字声明的标识符不存在提升，这就意味着无法引用未声明的标识符，从而可以避免由提升带来的一些列问题。

对于var a = 1;这样常见的变量声明方式，我们应该把它想象成两个步骤：首先是在预编译阶段对变量a进行声明，接下来是执行阶段，对a进行赋值，而提升则是将所有的声明“移动”到作用域顶部的过程。加油！

我们都知道，JS的作用域其实包含了一系列的气泡，这些气泡包含了标识符(函数和变量)的定义,而这些气泡相互嵌套并且整齐排列。而在JavaScript中，这种气泡指的是函数作用域和块级作用域。

函数作用域

函数作用域是JS中最基本也是最常见的一种作用域。所谓函数作用域，指的是在函数声明的过程中产生的一个“气泡”，这个“气泡”可以包含标识符。

来看一个例子：

1
2
3
4
5
6
7
8
9

function foo(){
  var a = 1;
  function bar(){
    var b = 2;
  }
}
console.log(a); // 失败
console.log(b); // 失败
bar(); //失败

在上面的这段代码中，函数foo所形成的作用域包含了标识符变量a以及函数bar,而函数bar所形成的作用域包含了变量b。当然，全局作用域中也包含标识符函数foo。

当然，就像上面程序的运行结果一样，直接访问变量a，b，函数bar都将失败。因为在函数作用域中，其声明的变量和函数中能在其内部(包含嵌套的作用域)使用。

由于函数作用域的特性，将会带来很多优点，譬如函数作用域可以隐藏函数内部的实现(非常重要)，也可以避免变量在声明过程中产生的冲突以及覆盖。

块级作用域

有Java学习经验的童鞋对块级作用域可谓是了解，然而在JS中，块级作用域可不是那么常见(至少是在ES6出现以前)。

在let和const关键字出现以前，如果想找到块作用域的影子，那么只有with和try…catch语句了。

with关键字是JS块作用域的一个典型，在该作用域的范围内声明的变量都只在with语句块中有效。

而块作用域的另一个应用则是在try…catch中，相信即使对JS不够了解的童鞋都知道异常处理，对于JS中的try…catch语句，在catch块中将会产生一个err对象，而这一个对象只能在catch块中才能使用。看下面一个例子：

1
2
3
4
5
6
7
8
9
10
11

function showName(){
  console.log(name);
}
try {
  showName()
} catch (e) {
  console.log(e);
} finally {
  console.log('end');
}
console.log(e);

上面的这个例子showName函数内部试图打印一个并不存在的变量name，这里将使用一个RHS查找，并且在失败后抛出一个引用错误，我们可以在catch捕获到这个错误对象，但是我们没法在全局作用域上使用这个错误对象。

好了，除了这两个使用块作用域的典型，在ES6标准中，还新增了let和const关键字来实现块作用域。这里简单介绍一下，对ES6感兴趣的的童鞋们可以点这里来进一步了解ES6。

let和const都是有别于var的另外两种声明方式，let用于声明变量，该变量将会被绑定在{…}中，也就是说使用let声明的变量具有块级作用域。使用let声明的变量不但具有块级作用域，同时变量也不会提升。而const则用于声明常量，同样具有块级作用域，并且也不存在提升。let可以很好的用于循环，防止变量对于环境的污染。

小结

函数是JS中最常见的作用域，声明在函数内部的变量和函数将会被很好的隐藏起来，这是一种良好的设计原则。而在ES6中，块级作用域再次被人们所日常使用。块作用域到底是不是函数作用域的替代方案，我认为到目前为止，不是！我们应该自己选择使用何种作用域，如何结合使用这两种作用域，来创造更加可读和健壮的程序。