JavaScript忍者修行の路(1)

本系列文章主要记录自己查询的个人不太明白的抽象知识点

 

本文章用来保证个人每天的深入阅读

 

什么是闭包函数

1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
2、表现形式：使函数外部能够调用函数内部定义的变量。

 

块作用域{ }

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

 

我们聚焦于一下特性

• 生成器，一种可以基于一次请求生成多次值的函数，在不同请求之间也能挂起执行
• Promise，让我们更好的控制异步代码
• 代理，让我们控制对特定对象的访问
• 高级数组方法，书写更优雅的数组处理函数
• Map，用于创建字典集合；Set，处理仅包含不重复项目的集合
• 正则表达式，简化用代码书写起来很复杂的逻辑
• 模块，把代码划分成较小的可以自包含的片段，使项目更易于管理

 

怎么样的代码是异步代码？
我们先不深入异步概念，先从「表象」来看看怎么样的代码是异步代码：

异步代码的书写顺序与执行顺序不同。（这并不是异步的定义。另外「书写顺序与执行顺序不同的代码」不一定是异步代码）

console.log(1)
setTimeout(function(){
  console.log(2)
},0)
console.log(3)
上面代码的书写顺序是 1 -> 2 -> 3；

但是执行顺序是 1 -> 3 -> 2。

中间的 console.log(2) 就是异步执行的。

你现在知道了「代码的书写顺序和执行顺序居然可以不同！」

什么是异步？
同步：一定要等任务执行完了，得到结果，才执行下一个任务。

function taskSync = function(){
  return '同步任务的返回值'
}

var result = taskSync() // 那么 result 就是同步任务的结果
otherTask()             // 然后执行下一个任务
异步：不等任务执行完，直接执行下一个任务。

function taskAsync = function(){
  var result = setTimeout(function(){
    console.log('异步任务的结果')
  }, 3000)
  return result
}

var result = taskAsync() // result 不是异步任务的结果，而是一个 timer id
otherTask()              // 立即执行其他任务，不等异步任务结束
聪明的你可能会发现，我们拿到的 result 不是异步执行的结果，而是一个 timer id，那么要怎么拿到异步任务的结果呢？

用回调。

改下代码如下：

function taskAsync = function(callback){
  var result = setTimeout(function(){
    callback('异步任务的结果')
  }, 3000)
  return result
}

taskAsync(function callback(result){
  console.log(result) // 三秒钟后，这个 callback 函数会被执行
})
otherTask()              // 立即执行其他任务，不等异步任务结束
所以「回调」经常用于获取「异步任务」的结果。

什么情况下需要用到异步？
现在有三个函数，taskA()、taskB() 和 taskC()，三个任务互不影响。

taskA 和 taskC 执行得很快，但是 taskB 执行需要 10 秒钟。

// 同步的写法
function taskB(){
  var response = $.ajax({
    url:"/data.json",
    async: false // 注意这里 async 为 false，表示是同步
  })
  return response // 十秒钟后，返回 response
}

taskA()
taskB()
taskC()
taskC 一定要等 taskB 执行完了才能执行，这就是同步。

执行顺序为：

A -> B -> AJAX 请求 -> C ---------------------------
现在换成异步：

// 异步的写法
function taskB(){
  var result = $.ajax({
    url:"/data.json",
    async: true // 异步
  })
  return result // 一定要注意，现在的 result 不是上面的 response
}
taskA()
taskB()
taskC()
这样写之后，执行顺序就是

A -> B -> C ---------------------------------------
       -> AJAX 请求 --------------------------------
就是说 AJAX 请求和任务C 同时执行。

但是请注意执行的主体。AJAX 请求是由浏览器的网络请求模块执行的，taskC 是由 JS 引擎执行的。

综上，如果几个任务互相独立，其中一个执行时间较长，那么一般就用异步地方式做这件事。

JS 引擎不能同时做两件事
有些人说异步是同时做两件事，但其实 JS 引擎不会这样。

以 setTimeout 为例，setTimeout 里面的代码一定会在当前环境中的任务执行完了「之后」才执行。

异步意味着不等待任务结束，并没有强制要求两个任务「同时」进行。

但是 AJAX 请求是可以与 JS 代码同时进行的，因为这个请求不是由 JS 引擎负责，而是由浏览器网络模块负责。

异步代码不需要等待返回结果，就可以继续运行下面的程序。

举个例子更好说明, 
假如你打电话去书店订书, 老板说我查查, 你不挂电话在等待, 老板把查到的结果告诉你, 这是同步, 如果老板说我查查, 回头告诉你, 你把电话挂了, 这是异步

 

可以查看以下链接来保持对浏览器支持状态的了解

http://kangax.github.io/compat-table/es6/ 、http://kangax.github.io/compat-table/es2016plus/ 、http://kangax.github.io/compat-table/esnext/

 

最流行的转译器是Traceur和Babel。

使用教程可以更轻易的配置他们：http://github.com/googLe/traceur-compiler/wiki/Getting-stanted或http://babeljs.io/docs/setup

 

对于专家级的js开发工程师精通语言之外，还需要具备一下特质：

• 调试技巧；
• 测试；
• 性能分析。