javascript复习笔记（1）

2017-09-29 本文已影响0人 Juliiii

目的

最近完成了一个项目和即将要进入一个新的项目，在这段时间内相对来说，可以静下来看看书，索性重头过一遍js。故记录在简书，如果我的文字有问题，请各位评论区评论。
正文

一、 var a = 2 时，发生了什么？

var a = 2;

这句代码，任何一个写过js的同学肯定会写过这行声明和赋值语句。但是当我们写下这句话时，js是如何解析的？
首先，这整个过程需要编译器，引擎，作用域三者来合作。编译器会先去询问作用域是否存在变量a, 如果是已经声明过的，那么 var a就会被忽略，如果不存在呢，就会创建一个名为a的变量。然后编译器继续编译代码给引擎运行。引擎运行时，会去查询变量a，如果找到了，就会进行赋值操作，将2赋值给a。反之，则一直往上面的作用域找，一直找到全局的作用域，如果这个时候还找不到，就抛出一个ReferenceError的错误。
其中引擎的查询方式有两种，LHS和RHS。前者意味查询变量是否存在，一般是为了赋值，后者是查询值，即查询值的来源，一般用于获取值。举个例子：

function b (a) {
  console.log(a);
}
b(1) // 1

这里呢，首先第四行是一个RHS查询，因为引擎执行到这里时，它会去查询b这个变量，获取b, 然后执行b这个函数。然后第二行的为了将a的值传进给console.log也是会进行一次RHS查询。而调用函数b时传入一个1的参数，这个1赋值给a这个形参时，会发生一个LHS查询。

二、作用域

前面有提到了作用域，js有两种作用域，一个是全局作用域，一个是函数作用域。

(function () {
   var a = 2;
   console.log(a);
   if (true) {
     var a = 1;
     console.log(a);
   }
     console.log(a);
})();

按照C++这类有块级作用域的语言，这里是会输出2，1，2，但是js的话，结果只会是2，1，1。这说明了js这种写法是不存在块级作用域的。如果使用let的话，就可以达到块级作用域的效果。而作用域之间的关系，函数级作用域被包含在全局作用域中，而函数级作用域可以包含别的函数级作用域。如下图的代码：

var a = 1;
function outer () {
  var a = 2;
  function inner () {
  console.log(a);
  }
  inner();
}
outer();

全局作用域中有变量a和函数outer, 函数outer的作用域中变量a和函数inner, 而函数inner也有一个作用域。所以说这里是三层作用域的嵌套。之前也说了，当我们在作用域中要查询一个变量或函数时，引擎会进行查询，而查询的方式就是从当前的作用域，一直向上面的作用域寻找，直到全局作用域，如果找不到就会发出一个错误，告诉你该引用不存在。而作用域具有隐蔽性。意思是，子作用域可以访问父作用域，而父作用域是不可能访问得到子作用域。

var a = 1;
function outer () {
  var a = 2;
  function inner () {
    console.log(a);
  }
    inner();
}
inner(); // throw Error : inner is not defined

总之记住，在当前作用域使用一个变量或者调用一个函数时，只会从当前作用域出发，去查询，当前查不到，就会往父作用域查询，不会往子作用域查询的，一直查询到全局作用域，最后还查不到就说明没有声明。可以思考下，下面的代码输出什么？

var a = 1;
function outer () {
  var a = 2;
  inner();
}
function inner () {
  console.log(a);
}
outer();

另外要注意的两点：

在当前作用域内(非全局作用域)声明一个变量时，一定得用var, let 或者 const
```
a = 1;
```
这样的代码是不会报错的，因为它会在隐式在全局声明一个变量a(非
严格模式下)，这不是添乱么。。所以要避免。
当js越写越多代码时，很容易会造成作用域污染。比如在你不经意间声明了一个变量，它与你若干天前声明的一个变量的名字一毛一样，而且在同一个作用域下运作，比如全局作用域，那往往会给你和你的合作者带来很多麻烦，因为这根本不会报错好吧。js只会忽略你的这个新的声明语句，然后给那个已经存在的变量赋值。这就很难debug了。所以呢，要谨慎使用js的作用域。后面我会出一篇文章说下这方面的解决方法。

三、提升

大家来看下下面的代码，如果你是强类型语言的爱好者，我觉得会给你带来很大的疑惑，答案相信大家熟悉提升之后，就会知道了。

(() => {
  console.log(a);
  a();
  var a = 1;
  console.log(a);
  function a () {
    console.log(2);
  }
  a();
})()

js里有一种很不一样的机制就是提升机制了。其中有两种东西可以提升。一个是变量声明提升和函数声明提升。以下面的例子讲解变量声明提升：

(() => {
  console.log(a); // undefined
  if (true) {
    var a = 2;
  }
  console.log(a); // 2
})()

按道理来说，强类型语言的代码是有顺序的，没有执行到 var a = 2; 时，变量a应该未声明的，但是这里却输出了undefined。其实，这就是js的变量声明的提升了，上面的代码，其实执行顺序是这样的：

(() => {
  var a;
  console.log(a); // undefined
  if (true) {
    a = 2;
  }
  console.log(a); // 2
})()

变量a的声明被提升到最开始的位置，而赋值语句则被留在了原地。而函数声明也类似：

(() => {
  fun(); // 1
  function fun () {
    console.log(1);
  }
})()

函数fun会被执行，这是因为函数声明被提前到fun()之前了。但是注意，函数表达式是不具备提升的，即下面的代码是不会正常运行的。

(() => {
  fun(); // fun is not a function
  var fun =  () => {
    console.log(1);
  }
})()

上面的代码可以理解为，对fun的声明被提到最前，但那个时候fun还是undefined，所以当成函数来调用就会抛出了错误。

那么问题又来了，当一个函数内，同时具有变量和函数，那么这两者的提升是谁更优先呢？答案是，函数的提升比变量的提升更优先，不信？可以试试下面的代码：

(() => {
  console.log(a);
  function a () {
    console.log(1);
  }
  var a = 1; 
})()

因此，个人建议，在一个函数内在最开始的地方把需要用到的变量都声明好，那就可以尽量避免提升带来不必要的麻烦。

结语

这次先到这，如果有错请评论吧。写这类文，一是让自己去总结知识，一方面是交流知识。有时候措辞不当或者理解有误，出了错误，在所难免，望大家监督和宽容。
（忘了说，最近看的书是《你不知道的JavaScript》）

javascript复习笔记（1）

目的

正文

一、 var a = 2 时，发生了什么？

二、作用域

三、提升

结语

猜你喜欢

热点阅读