20190527-JavaScriptの打怪升级旅行 { 语句 [ 声明 ，变量 ] }

写在前面的乱七八糟：时间总是轻易地溜走，不留一丝念想，近一个月，倒是过得有点丧，从今天开始起，已经开始接触后台了，而JavaScript也只是大致有了个分类框架，那些细枝末节还有的补，任重道远，天将降大任于斯人也，然这也不算大任呐┓( ´∀` )┏

JavaScript发行于1992年，已经27年过去了，当时在Netscape公司的Brendan Eich会想到如今的JavaScript依旧这么火热的脚本语言吗？要说起这门语言，还得从下面的语句开始说起，我们的旅行，由此开始：

相信很多人在一开始学html时，都会写上"Hello World"这么一句话，而我在JavaScript学习中，写的第一个语句（statements）便是var  a = 1；经过这一个月以来的学习，才惊觉这一句话里，竟可以包含这么多的知识点。

语句：声明  变量  赋值   数据；

1.声明

1.1声明方式

1.1.1使用关键词：var let const

1.1.2直接赋值：a = 1；

1.2声明关键词

1.2.1 var

早在ES5声明变量只有两种方法：

• var声明关键词，可用于声明全局作用域与函数作用域；

• function函数声明，可用于声明全局作用域与函数作用域；

1.2.2 let & const

ES6引入块作用域概念，并带来了另外两个声明关键词：let（变量） & const（常量），既然有var这个老骨干了，为什么还需要引入let 与 const呢？

这又不得不说到：顶层对象属性 & 全局变量，变量提升 & 暂时性死区，不捉急，一个个慢慢盘它就对了。

1.2.2.1顶层对象属性 & 全局变量

在ES5中，顶层对象的属性与全局变量是等价的。

顶层对象：在浏览器环境指window对象，在Node环境指global对象

全局变量：在全局作用域下运行的变量（后面再细盘）

现象：

F12后打开控制台，输入var a = 1；语句，再console.log（window），点开window，你会发生神奇的事情发生了，声明的全局变量a居然是window下面的属性

而同样的function a（）{}函数声明也是如此，两者声明的全局变量都被当做顶层对象的属性挂载在顶层对象上，这说明什么？会带来什么影响呢？

说明：未声明的全局变量，自动成为全局对象的属性

问题：

1.没法在编译时便报出变量未声明的错误，只有运行时才知道

2.极容易创建全局变量

3.语义上，顶层对象是个有实体含义的对象，如此极易混淆顶层对象空间与全局作用域

方案：将全局变量与顶层对象属性分离 => ES6添加了let & const 关键词，class & import 命令

1.2.2.2变量提升（hoisting） & 暂时性死区（temporal dead zone，简称 TDZ）

现象：变量可以在声明之前使用，值为undefined

上图可得：var 声明的变量 a 在未声明时，便可被调用，而 let 声明的变量 b 在未声明时调用，便直接报错ReferenceError

变量提升：JavaScript 引擎的工作方式：解析代码，获取所有被声明的变量 => 一行一行地运行 => 所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

暂时性死区：ES6明确规定：如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）

说明：var 声明的变量，具有变量提升行为，而 let 声明的变量之前的范围属于暂时性死区

作用：主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为

那么问题又来了？有let为什么还要有const啊！JS又水我？

1.2.3 let || const

两者都可用于声明块级作用域，也就是{}包起来的作用域

1.2.3.1let

let 声明变量，其值与类型都可以改变，可重新赋值

1.2.3.2const

const 声明常量，但又分俩种情况：

1.声明原始值，不可二次赋值；

2.声明引用值，变量名不指向数据，而是指向数据所在的地址，只是保证变量名指向的地址不变，并不保证该地址的数据不变；

故在用 const 声明常量要注意。

综上，第一章BOSS：语句 の 第一层boss：声明，完结撒盐。

2.变量

2.1作用

存放值 / 表达式

2.2变量名

2.2.1标识符（identifier）

标识符（identifier）：用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名

2.2.2命名规则

• 首字符：Unicode 字母（包括英文字母和其他语言的字母）|| 美元符号（$）|| 下划线（_）
• 第二个字符及后面的字符：Unicode 字母、美元符号和下划线 || 数字0-9

2.2.3命名方法

• 羊肉串命名
  • to_study
• 驼峰命名
  • 大驼峰ToStudy
  • 小驼峰toStudy

2.2.4命名禁忌

• 关键字（标识了 ECMAScript 语句的开头和/或结尾）
  • break
  • case catch continue
  • default delete do
  • else
  • finally for function
  • if in instanceof
  • new
  • return
  • switch
  • this throw try typeof
  • var void
  • while with
  • JS报错：Identifier Expected
• 保留字（为将来的关键字而保留的单词）
  • abstract boolean byte char class const
  • debugger double enum export extends final float
  • goto implements import int interface long
  • native package private protected public
  • short static super synchronized throws transient volatile

前方敌军即将上线：盘一下：执行环境（作用域），变量对象（全局 & 局部），作用域链

现象：

为什么第一次弹窗出来的不是1而是underfined呢？

解析：

1.进入全局环境：

1.1解析阶段：

var a ；// a === underfined

function b（）{ }；

1.2赋值阶段：

a = 1；

b（）；

2.函数b自执行，进入函数环境：

2.1解析阶段：

var a；// a === underfined

2.2赋值阶段：

window.alert（a）// 弹窗：underfined

a = 2；

window.alert（a）// 弹窗：2

执行环境：作用域

变量对象：用来保存执行环境下的变量和方法的

作用域链：一个个变量对象形成的作用域，通过变量对象形成的链条，即作用域链

前面介绍变量提升时，便说过JS引擎的解析方式，先提取声明，再赋值执行，故第一次弹窗是underfined而不是1，因为a已经在局部作用域内声明过了，那么问题又来了：若a没有在局部作用域内声明呢？

说明：此时，局部作用域内没有声明变量a，那么将顺着作用域链，向父级，爷爷级，一级级往上查找，直到最顶层，故弹窗1。

2.3全局变量 & 局部变量

2.3.1全局变量

变量在函数外定义，整个代码都可以调用的变量

2.3.2局部变量

变量在函数内声明，只能在函数内部访问

2.3.3注意点

2.3.3.1 当全局变量与局部变量重名时，优先使用局部变量

2.3.3.2 var 和 function 声明的变量都声明提前，赋值留在原地

2.4作用域 & 作用域链

2.4.1作用域

JS分两级作用域：

全局作用域：作用于全局环境（整个script标签）

局部作用域（函数作用域）：作用于函数体内

2.4.2作用域链

一个个变量对象形成的作用域，通过变量对象形成的链条，即作用域链

综上，第一章BOSS：语句 の 第二层boss：变量，完结撒盐。

数据可是重头戏，下期见，┓( ´∀` )┏