早期的JavaScript中,声明变量只能使用var关键字定义变量,并没有定义常量的功能。通过var关键字定义的变量,其作用域只能函数级或是全局作用域,并没有块级作用域。ES6(ECMAScript 2015)对这一问题做了改善,增加了用于定义块级变量的let关键字和用于定义常量的const关键字。

  1. var定义变量

  2. let定义块级变量
  3. const定义常量

1. var定义变量

1.1 语法及说明

var关键字用于声明一个或多个变量,声明多个变量时使用逗号(,)分隔,声明变量的同时可以对其初始化。

语法法结构如下:

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];
  • varname1…varnameN - 变更名。可以是任何合法的标识符。
  • value1…valueN - 初始化值。可选。可以是任何合法的表达式。

使用var声明变量时,声明的变量作用域是在当前位置的上下文件中:函数的内部(声明在函数内)或者全局(声明在函数外)。

1.2 使用及特点

使用var定义的变量有以下特点:

变量声明提升

无论在代码的任何位置声明变量,执行引擎都会在任何代码执行之前处理。由于这个原因,所以在代码中的任意位置声明变量与在代码开头声明变量是等效的。

这意味着我们可以在定义变量之前使用,这个行为叫做'hoisting',也就是把所有的变量声明移动到函数或者全局代码的开头位置。

hoist = 'http://itbilu.com';
var hoist; // 可以理解为:
var hoist;
hoist = 'http://itbilu.com';

注意:虽然变量声明提升让我们可以先使用再定义变量,但建议总是先定义再使用变量,这样可以让变量的作用域更加清晰。

声明与未声名变量的区别

未声明的变量会被添加一个全局作用域,而声明变量作用域是当前上下文:

function x() {
y = 1; // 在严格模式下会抛出ReferenceError
var z = 2;
}
x(); console.log(y); // '1'
console.log(z); // ReferenceError: z is not defined

声明变量在任何代码执行前创建,而未声明的变量只有在执行赋值操作的时候才会被创建:

console.log(a);  // 抛出ReferenceError。
console.log('still going...'); // 不会执行
var a;
console.log(a); // "undefined"或""(不同执行引擎的实现不同)
console.log('still going...'); // 'still going...'

声明变量是不可配置属性,而未声明变量是可配置的:

var a = 1;
b = 2; delete this.a; // 在严格模式下抛出TypeError,非严格模式下执行失败且无任何提示
delete this.b; console.log(a, b); // 抛出ReferenceError,'b'属性已经被删除

以上三点是声明与未声明变量区别,但错误表现是不可预知的。而在严格模型下,使用未赋值的变量会抛出异常,推荐总是先定义(声明)再使用变量。

全局作用域与函数作用域

函数内部声明的变量只能在函数内部使用,函数外部声明的变量可以全局使用:

var x = 0;

function f(){
var x = 1, y = 1;
}
f(); console.log(x); // 0
console.log(y); // ReferenceError: y is not defined

2. let定义块级变量

2.1 语法及说明

let用于定义块级变量,其语法结构类似于var

let varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

var声明的变量是函数级的或者是全局的,而let用于声明块级作用域。

如,使用let声明一个块级变量:

if (x > y) {
let gamma = 12.7 + y;
i = gamma * x;
}

2.2 与var的异同

letvar的区别主要体现在作用域上,当在子代码块中使用中其声明的是块级变量,而var声明的是全局变量:

var a = 5;
var b = 10; if (a === 5) {
let a = 4; // if 块级作用域
var b = 1; // 函数级作用域 console.log(a); // 4
console.log(b); // 1
} console.log(a); // 5
console.log(b); // 1

在函数或程序顶层使用时,letvar没有什么区别:

var x = 'global';
let y = 'global';
console.log(this.x); // 'global'
console.log(this.y); // 'global'

3. const定义常量

const用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

const定义常量与使用let定义变量十分相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用
  • 常量的值不能通过再赋值改变,也不能再次声明。而变量值可以修改

参考链接:

https://itbilu.com/javascript/js/NJqR2qmrW.html

var、let、const与JavaScript变量/常量的定义的更多相关文章

  1. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

  2. C基础知识(2):变量&常量的定义和声明

    变量定义和声明 (1) 使用int,char等类型符定义变量 使用int,char等类型符定义变量时,不管有没有指定初始值,都就已经建立了存储空间(开辟内存).内存寻址由大到小,优先分配内存地址比较大 ...

  3. Go 语言基础——变量常量的定义

    go语言不支持隐式类型转换,别名和原有类型也不能进行隐式类型转换 go语言不支持隐式转换 变量 变量声明 var v1 int var v2 string var v3 [10]int // 数组 v ...

  4. 7.JavaScript变量

    VAR声明变量,一条语句可以声明多个变量 var name="Gates", age=56, job="CEO"; Value = undefined 在计算机 ...

  5. PHP内置常量,和可变变量,常量的定义

    关键常量 可变变量----变量名是变量的变量 常量的定义

  6. JavaScript 变量声明:var、let、const

    1. 概述 1.1 说明 在ES5 声明变量的方法:var命令和function命令. 在ES6 声明变量的方法:var命令.function命令.let命令.const命令.import命令.cla ...

  7. JavaScript变量声明var,let.const

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. f ...

  8. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

    JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

  9. javaScript 变量提升 var let const,以及JS 的解析阶段和执行阶段

    我们先来看一道面试题,大家猜想一下,下面这段代码,打印出来的结果是什么 var name = 'World!'; (function () { if (typeof name === 'undefin ...

随机推荐

  1. jQuery_2_常规选择器-高级选择器

    高级选择器 层次选择器 1. 后代选择器    $("#d1 p")   获取追溯到的多个DOM对象  (无论儿子还是孙子都是后代) 2. 子选择器       $("# ...

  2. 无法通过CTRL+空格及SHIFT+CTRL调出输入法的解决方案

    打开任务管理器: 运行:CTFMON.EXE

  3. HDU5269 字典树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5269 ,BestCoder Round #44的B题,关于字典树的应用. 比赛的时候没想出做法,现在补 ...

  4. 撸了个 django 数据迁移工具 django-supertube

    撸了个 django 数据迁移工具 django-supertube 支持字段映射和动态字段转化. 欢迎 star,issue https://github.com/FingerLiu/django- ...

  5. IOS UIView动画(封装动画)

    ● UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView 将为这些改变提供动画支持 ● 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视 图, ...

  6. java中的两同两小一大原则

    子类覆盖父类要遵循“两同两小一大” “两同”即方法名相同,形参列表相同 “两小”指的是子类方法返回值类型应比父类方法返回值类型更小或相等,子类方法声明抛出的异常类应比父类方法声明抛出的异常类更小或相等 ...

  7. 使用dotnet-dump 查找 .net core 3.0 占用CPU 100%的原因

    公司的产品一直紧跟 .net core 3.0 preview 不断升级, 部署到 Linux 服务器后, 偶尔会出现某个进程CPU占用100%. 由于服务部署在云上, 不能使用远程调试; 在局域网内 ...

  8. Java continue break 制作简单聊天室程序,屏蔽不文明语言,显示每句话聊天时间 for(;;) SimpleDateFormat("yyyy-MM-dd hh:mm:ss") equalsIgnoreCase

    package com.swift; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanne ...

  9. 【Django】URL中传递中文的问题

     开发环境:Ubuntu16.04+Django 1.11.9+Python2.7 在开发中,在做查找某些信息这个功能的时候,遇到的一个问题.需要在URL中传递查找的关键字,当关键字为中文的时候,并不 ...

  10. TCP/IP与OSI参考模型原理

    网络是很重要同时也是很难理解的知识,这篇文章将会用自己容易理解的方式来记录有关网络的tcp与osi模型内容,不求专业深刻,但求通俗易懂也好. OSI参考模型 OSI定义了网络互连的七层框架(物理层.数 ...