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命名禁忌

前方敌军即将上线:盘一下:执行环境(作用域),变量对象(全局 & 局部),作用域链

现象:

为什么第一次弹窗出来的不是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:变量,完结撒盐。

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

posted @ 2019-05-27 22:24  傅玖  阅读(181)  评论(0编辑  收藏  举报