每天积累一丢丢(Wed, 5 May 2016)

老生常谈的闭包：

书上给的基础概念是‘闭包是指的有权访问另一个函数作用域中的变量的函数’，这么看所有function都是闭包了？（事实似乎也确是如此）

一篇充满善意的闭包ppt...: 

https://app.box.com/shared/elkumrpfng

发现了一篇讲解得清楚到丧心病狂的文章：

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

来玩下阮老师出的思考题：（书中将闭包也讲了这两个例子）

<span style="font-size:18px;">　　var name = "The Window";　　var object = {　　　　name : "My Object",　　　　getNameFunc : function(){　　　　　　return function(){　　　　　　　　return this.name;　　　　　　};　　　　}　　};　　alert(object.getNameFunc()());</span>

答案是 The Window, 即在alert中执行 getNameFunc的时候this将指向全局, 而全局的name为The Window.

如果在全局中使用'use strict'则会导致error.

那么如何可以alert出My Object呢？我只想到了不用闭包的方法:

<span style="font-size:18px;">　　var name = "The Window";　　var object = {　　　　name : "My Object",　　　　getNameFunc : 　　　　　　function(){　　　　　　　　return this.name;　　　　　　}　　};　　alert(object.getNameFunc.call(object));</span>

其实这么做跟闭包没啥关系了... 

第二道题：

<span style="font-size:18px;">　　var name = "The Window";　　var object = {　　　　name : "My Object",　　　　getNameFunc : function(){　　　　　　var that = this;　　　　　　return function(){　　　　　　　　return that.name;　　　　　　};　　　　}　　};　　alert(object.getNameFunc()());</span>

这次可以正确的输出 My Object了, 因为这一次我们利用var保存了指向object的this，这不正好就是文章里讲的：闭包让这些变量的值始终保存在内存中（另一个闭包的特性是可以使外部读取到函数内部的变量）。 
另一道对概念理解很有用处的题：

http://web.jobbole.com/84723/

<span style="font-size:18px;">//第十三题</span>

<span style="font-size:18px;">for (var i = 0; i < 5; i++) {  var btn = document.createElement('button');  btn.appendChild(document.createTextNode('Button ' + i));  btn.addEventListener('click', function(){ console.log(i); });  document.body.appendChild(btn);}</span>

问题是如果点击这5个button都会发生什么事儿， 目前这种代码情况是输出都是4，原因嘛，因为callback这个时候里面的i是4了。 想要每次循环都把这个i保存下来的话就需要用到闭包了，

for (var i = 0; i < 5; i++) {  (function () {    var haha = i;    var btn = document.createElement('button');    btn.appendChild(document.createTextNode('Button ' + i));    btn.addEventListener('click', function(){     console.log(haha); });    document.body.appendChild(btn);  })();}

for (var i = 0; i < 5; i++) {  (function (i) {    var btn = document.createElement('button');    btn.appendChild(document.createTextNode('Button ' + i));    btn.addEventListener('click', function(){     console.log(i); });    document.body.appendChild(btn);  })(i);}

第一种方法写起来还是比第一种要顺手，因为前面学到说变量会被保存起来，这么看来参数也会被保存起来啊？？？

ES6有什么不同？

由于去年年底才入行，那时已经进入了ES6时代，所以对ES6完全不敏感，这次来做一个小小的总结：

http://www.mamicode.com/info-detail-952851.html

Arrow Function: () => {} 说点儿啥好呢...

类的支持：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

http://book.mixu.net/node/ch6.html

let const:

比较特别的var, 之后在特定范围中才可以使用. const则是拿来定义常量

Promise:

http://caniuse.com/  ---> check we can use the API with specific browser

https://www.youtube.com/watch?v=g90irqWEqd8

说到底，Promise主要有三个状态，pending, fufilled and rejected, pending可以变为fufilled or rejected,

var promise = foo(){}

promise.then(function () {});

promise.catch(function() {});

0r --> 

promise.then(function (){}).catch(function (err) {});

还可以让他链状执行:

promise.then(function () { return foo(1)}).then(function(){return foo(2)}).then(function () {}).catch (function(err){..});

Error handling is pretty convenient.

Promise.all([

  foo(1),

  foo(2),

  foo(3)

 ]).then(function (values) {

  var a = values[0];

  var b = values[1];  // 但是先后不能保证！

})

<span style="font-size:18px;">var promise = new Promise (function (resolve, reject) {   resolve('resolved solution');})promise.then(function(result){  console.log('Can I get the solution?', result);}).catch(function (err) {  console.error('ERR', err);})</span>

注意上述代码中，resolve 和 reject可以改成你喜欢的word, 不过为了可读性，使用 resolve 和 reject比较好.

还有个很困扰的问题，这么看

promise和setTimeout的执行机制有何不同？

http://www.zhihu.com/question/36972010

如果想弄清楚这里，还有个必须弄懂event loop:

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

有点深奥，整理一下我能看得懂的部分：

首先，代码是这样的，

<span style="font-size:18px;">setTimeout(function(){console.log(4)},0);new Promise(function(resolve){    console.log(1)    for( var i=0 ; i<10000 ; i++ ){        i==9999 && resolve()    }    console.log(2)}).then(function(){    console.log(5)});console.log(3);</span>

结果是 1 2 3 5 4
就算都是异步执行，也存在两种任务分类：macro task 以及 micro task, 在挂起时，javascript会把任务分别塞到这两个task queues中，执行过程为：首先从macro task中取出第一条任务，然后执行micro task中的所有任务，再执行macro task中当前的第一条任务，再执行所有micro task中的任务，周而复始。

macro task: script的整体代码，setInterval, setTimeout, setImmediate, I/O, UI rendering

micro task: process.nextTick, Promises, Object.observe, MutationObserver.

这里注意一点, script虽然放在异步里看起来怪怪的，因为它不应该是同步执行吗？但，如果把script拆分成许多小块，来看，那它其实也是‘异步’得了，只不过一个块状内的script会同步执行。

HTML的加载问题：

http://blog.csdn.net/xifeijian/article/details/10813339

IE的html下载和渲染是同时进行的，而且都是从上到下。 当遇到语义解释性的标签嵌入文件（js css）时，会开启新的connections来下载，下载完毕后才进行解析（阻塞下载， 之所以这样是因为JS中有可能会对DOM结构进行改写，在这种情况下，就需要重构DOM树）

为了更快的加载，减少inline javascript以及inline css的数量，减少不必要的comments 空格之类的东西，尽量合并js css文件，可以利用localStorage, sessionStorage来缓存数据.

This的问题：

this指向调用函数的对象，如果该函数被作为某个对象的方法调用则指向该对象，若被构造函数调用的话就指向被new出来的这个对象，apply/call的话则指向参数作用域（没有的话指向全局）。

<span style="font-size:18px;">var length = 10;function fn() {  console.log(this.length);}var obj = {  length: 5,  method: function(fn) {    fn();    arguments[0]();  }};obj.method(fn, 1); </span>

输出是10 和 2, 分析原因为：fn是在window下被声明的，因此在obj.method调起的时候，它其实也是调用的window.fn(); 而对于arguments[0](), arguments本身是个array, 因此利用此来调起fn的时候，this将指向这个object(或者叫array)，所以结果是 2, 即这个array的长度为2.