zoukankan      html  css  js  c++  java
  • 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:变量,完结撒盐。

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

  • 相关阅读:
    JAVA8时间插入mysql少了8小时的解决办法
    Kubernetes 部署 Mysql 8.0 数据库(单节点)
    Spring Boot + MyBatisPlus,简直完美!
    美团面试官:生成订单后一段时间不支付订单会自动关闭的功能该如何实现?越详细越好~
    100道Java并发和多线程基础面试题大集合(含解答),这波面试稳了~
    windows端口占用快速查询解决方法
    解决github无法连接错误 OpenSSL SSL_connect: Connection was reset in connection to github.com:443
    Mysql:好好的索引,为什么要下推?
    漫画 | 程序员的悲哀是什么?
    聊聊那些年的骚操作!!!
  • 原文地址:https://www.cnblogs.com/nightnight/p/10933851.html
Copyright © 2011-2022 走看看