最近刚刚看完了《你不知道的 JavaScript》上卷,对 JavaScript
有了更进一步的了解。

在ES6中我们有两种定义变量的方式:let   
const

vue中循环遍历使用的指令是v-for

《你不知道的
JavaScript》上卷由两部分组成,第一部分是《作用域和闭包》,第二部分是《this
和对象原型》。下面我会按照简单介绍一下每一章的主要内容及阅读感受。

      let特点:

1.v-for遍历数组

第一部分《作用域和闭包》

            1.let定义时不会进行变量声明提升

(1)value in arr 遍历数组中的元素

第 1 章 作用域是什么

  1. 编译原理:简单介绍分词/词法分析、解析/语法分析、代码生成的概念;
  2. 理解作用域:介绍引擎、编译器、作用域之间的关系;
  3. 作用域嵌套。

在这一章节中,作者通过引擎、编译器、作用域之间的对话,将这三者之间的关系及作用生动形象地展现出来,并引出了
LHS 查询和 RHS 查询的概念。

            2.变量不允许被重复定义

(2)(value,index) in arr 遍历数组中的元素和数组下标

第 2 章 词法作用域

  1. 词法作用域及其相关概念;
  2. 欺骗词法的方式:
    • 在代码运行时修改词法作用域,如 eval()
    • 在代码运行时创建新的词法作用域,如 with

这一章作者介绍了词法作用域以及欺骗词法的方式。说来惭愧,在看这章之前,我完全没听说过「词法作用域」这个概念,一开始我还以为是个很高大上的东西,看完之后你会觉得其实也没什么,就是你平时都在写的东西,只不过你没有留意而已。

            3.变量不可以被删除

运行代码:

第 3 章 函数作用域和块作用域

  1. 函数作用域:函数声明和函数表达式的区别、具名函数和匿名函数;
  2. 块作用域:withtry/catchletconst

这一章作者介绍了 JavaScript
中的函数作用域及块作用域,讲了函数声明和函数表达式的区别,其实很简单,就是看
function
这个关键字是否是在声明中的第一个词,如果是,那就是函数声明,否则就是函数表达式。另外,作者还简单地介绍了下
ES6 中具有块作用域作用的 letconst 关键字。

在这之前,我一直以为 ES6
之前是没有块作用域的,只有全局作用域和函数作用域,看完这章之后,我才知道其实在
ES3 的时候就有块作用域了。比如,with 。再比如,try/catch 中的
catch,一般我们是这样写的:

try {
    // do something
} catch (err) {
    console.log(err)
}

其中这个 err 只存在 catch
分句内部,从别处引用时会抛出错误。这不就是块作用域吗?

            4.在for循环当中用let定义i
循环时可以保存 i 的值

<body>
    <div class="box">
        <ul>
            <li v-for="value in arr">{{value}}</li><br> 
            <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
        </ul>
    </div>
<script src="js/vue.js"></script>
<script>
  new Vue({
      el:".box",
      data:{
          arr:["哈哈","嘻嘻","哼哼"]
      }
  });
</script>
</body>

第 4 章 提升

这一章节作者简单地介绍了一下变量声明提升和函数声明提升。没什么好说的,需要注意的是函数表达式是赋值操作,并不会提升。

           
5.在块级元素中用let定义的变量只能在当前块级作用域中使用(注:凡是用{}包裹的都是块级作用域,但是除了对象以外)

输出结果:

第 5 章 作用域闭包

  1. 闭包;
  2. 作用域和闭包;
  3. 模块机制。

闭包是 JavaScript 中的一大难点,在这章中作者用了 4
个小节来介绍闭包,还有 1
个小节来介绍模块机制。不要看闭包有四个小节,其实也不过 8
页而已,核心的文字加起来也就 2 页,但就是这短短的 2
页,就把闭包给讲得非常清楚。

下面是书中给出关于闭包的定义:

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

看了是不是还是不懂,没关系,让我们来提取关键字:

  • 函数;
  • 记住并访问所在的词法作用域;
  • 当前词法作用域之外执行。

再来看下书中的一段代码,看完之后再结合书中的定义来理解,我相信你对闭包肯定会有更进一步的理解。

function foo() {
    var a = 2;

    function bar() {
        console.log(a);
    }

    return bar;
}

var baz = foo();

baz(); // 2 —— 朋友,这就是闭包的效果。

下面结合我们刚刚提取的关键字来理解。

  • 函数。这里的函数是 bar()
  • 记住并访问。 bar() 当前所在的词法作用域是 foo()
    的函数作用域。bar() 的词法作用域能够访问 foo() 的内部作用域。
  • 当前词法作用域之外执行。在上面的代码中,我们将函数 bar()
    当做一个值类型传递给外部,在这句代码中 var baz = foo();,我们将
    foo() 的返回值(也就是 bar())赋值给变量 baz 并调用
    baz(),实际上就是调用 bar()。上面第 2 点里我们说了,bar()
    的作用域是 foo()
    的函数作用域,但是,在这里,它却是在自己定义的词法作用域以外的地方执行。

怎么样,通过上面的分析,是不是对闭包有了进一步的理解了。

 

图片 1

附录 A 动态作用域

作者在这一章中简单地分析了下动态作用域,并通过一小段代码将它与词法作用域做了对比。词法作用域与动态作用域的主要区别在于:词法作用域是在定义时确定的,而动态作用域是在运行时确定的。

  const特点:(声明常量或者不可被修改的变量)

 

附录 B 块作用域的替代方案

这一章简单地介绍了块作用域的替代方案
Traceur,以及因此可能会带来的性能问题。

             1.const声明的变量值不允许被修改

2.v-for遍历json对象

附录 C this 词法

这一章并没有说明 this 机制 ,只是介绍了 ES6 中的箭头函数引入的行为 ——
this 词法。关于 this 机制的详细说明是在第二部分《this
和对象原型》中的第 1 章和 第 2 章。

        2.不会进行变量声明提升

(1)value in json 遍历json对象中的值

附录 D 致谢

这一章作者致谢了一大堆的人,光人名的排版就占了两页多,说真的,我都怀疑是不是在凑字数了(纯调侃,没别的意思)。


第二部分《this 和对象原型》

             3.常量不允许被删除

(2)(value,key) in json 遍历json对象中的值和键

第 1 章 关于 this

  1. this 的指向;
  2. this 的作用域。

这一章中作者先是提出我们「为什么要使用
this?」这个问题,然后再指出「this 到底是什么?」,为第 2 章做铺垫。

这一章我个人认为最核心的就是两句话。第一句是「当一个函数被调用时,会创建一个活动记录(有时也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this
就是这个记录的一个属性,会在函数执行的过程中用到」。也就是说,this
是活动记录里的一个属性,与函数执行的过程有关。

第二句话是「this
实际上是函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。」。第
2 章实际上就是在讲这个绑定。

 

(3)(value,key,index) in json 遍历json对象中的值、键和索引

第 2 章 this 全面解析

  1. 调用位置;
  2. 绑定规则:
  • 默认绑定;
    • 隐式绑定;
    • 显式绑定:call()apply()bind()
    • new 绑定;
    • 箭头函数的绑定;
    • 一些例外的绑定。
  1. 绑定规则的优先级。

作者在这一章中全面介绍了 this 的绑定规则。

要弄清楚 this 的绑定对象,需要明白以下两点:

  • 调用位置
  • 绑定规则

什么是调用位置?简单来说,就是函数在代码中被调用的位置。为了找到调用位置,我们需要分析调用栈,也就是为了到达当前执行位置所调用的所有函数,而调用位置就在当前正在执行的函数的前一个调用中。

而绑定规则就是说 this
绑定的对象是有规则的,并且这些规则是有优先级的,总的来说有下面四点:

  1. new 调用的,绑定到新创建的对象;
  2. callapplybind 调用的,绑定到指定的对象;
  3. 由上下文对象调用的,绑定到该上下文对象;
  4. 默认的,在严格模式下绑定到
    undefined,在非严格模式下绑定到全局对象。

当然了,ES6
中新增的箭头函数并不在这四条规则里面,而是继承外层第一个非箭头函数调用的
this 绑定。

在看这一章之前,我对 this
一知半解,网上找的答案也是五花八门,根本不知道哪个对哪个错。在看完这一章之后,我算是对
this
的所绑定的对象有了较为清晰的认识,以后再遇到类似的问题时,直接套用上面的规则就可以了。

       对let第四个特点给大家举个小栗子

 运行代码:

发表评论

电子邮件地址不会被公开。 必填项已用*标注