javascript 变量声明 var,let,const 的区别

目录
  • 作用域（Scope）是什么
  • var 声明
  • 提升(Hoisting)
  • let 声明
  • const 声明

作用域（Scope）是什么

作用域是程序的执行环境，它包含在当前位置可访问的变量和函数。在 ES5 语法中，有全局作用域和局部作用域，ES6 则新增了块级作用域。

全局作用域是最外层的作用域，在函数外面定义的变量属于全局作用域，可以被任何其他子作用域访问。在浏览器中，window 对象就是全局作用域。在编写前端代码过程中，其中有一条优化规则就是少使用全局变量，因为全局变量容易导致程序BUG，并且不容易查找。

局部作用域的基本单元是 function，只在函数体内有效。局部作用域是在函数内部的作用域。在局部作用域定义的变量只能在该作用域以及其子作用域被访问。

javascript中，变量声明使用 var、const、let来声明变量，var为ES5的语法，const和let为ES6之后的语法。ES6 的let和const为新引入的关键字，它们不会被提升，而且是块作用域。也就是说被大括号包围起来的区域声明的变量外部将不可访问。

下面我们就来说说各自的区别。

var 声明

var声明，为ES5的语法，var声明的变量总是归属于包含函数（即全局，如果在最顶层的话）。在 javaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

提升(Hoisting)

在编译过程中，将var和function的定义移动到他们作用域最前面的行为叫做提升。

整个函数定义会被提升。所以，可以在函数还未定义之前调用它，而不用担心找不到该函数。

console.log(toSquare(3)); // 9
function toSquare(n) {
    return n * n;
}

变量只会被部分提升。而且只有变量的声明会被提升，赋值不会动。

开发者可能最希望实现 for循环的块级作用域了，因为可以把随意声明的计数器变量限制在循环内部。

for (var i = 0; i < 10; i++) {
    console.log(i);
}

立即执行函数能够有效解决：

for (var i = 0; i < 10; ++i) {
    (function (value) {
        console.log(value);
    })(i);
}

再来看一个例子

(function () {
    var testValue = "hello";
    var testFunc = function () {
        console.log("just test");
    };
})();
console.log(window.testValue); // undefined
console.log(window.testFunc); // undefined

趣题：

var x = 10;
var y = 20;
[y, x] = [x, y];
console.log(x, y); // 20 10

let 声明

过早访问 let声明的引用导致的这个referenceerror叫做临时死亡区错误，在访问一个已经声明但还没有初始化的变量。创建一个块作用域。

let g1 = "global 1";
let g2 = "global 2";
{
    g1 = "new global 1";
    let g2 = "local global 2";
    console.log(g1); // new global 1
    console.log(g2); // local global 2
    console.log(g3); // ReferenceError: g3 is not defined
    let g3 = "I am not hoisted";
}

const 声明

const是对赋值做锁定，不对值的改变锁定。例如：数组、对象。 一个常见的误解是：使用const声明的变量，其值不可更改，但是对于数组和对象，其值是可以更改的。

const tryMe = "initial assignment";
//下面重新赋值会导致程序错误
tryMe = "this has been reassigned"; // TypeError: Assignment to constant variable.

//对于数组是可以更改元素值
const array = ["Ted", "is", "awesome!"];
array[0] = "Barney";
array[3] = "Suit up!";
console.log(array); // [ 'Barney', 'is', 'awesome!', 'Suit up!' ]
//下面这样更改整个数组，相对于重新赋值，是错误的
array = ["Barney", "is", "awesome!", "Suit up!"];

// 同样对于对象
const airplane = {};
airplane.wings = 2;
airplane.passengers = 200;
console.log(airplane); // { wings: 2, passengers: 200 }

//下面是错误
airplane = { wings: 2, passengers: 200 };

对于支持ES6的语法，建议默认使用 const， 在确实需要改变的变量声明使用 let, 这样可以在某种程度上实现代码的不可变。从而可以避免很多的问题的出现。

到此这篇关于javascript 变量声明 var,let,const 的区别的文章就介绍到这了,更多相关JS var,let,const 的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 浅析JavaScript中的变量提升

    目录 前言: 函数提升 var变量提升 let & const提升 Class提升 前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { console.log('Hi there!') } name = 'John Doe' console.log(name) // John Doe var name 然而JavaScript并不会移动你的

  • Javascript变量函数声明提升深刻理解

    目录 前言: 变量提升 函数提升 为什么要提升? 最佳实践 总结 前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样.变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的

  • 区别JavaScript函数声明与变量声明

    今天,又由一到题目引发了一场我跟JS基础的较量:首先是 var getName = function(){alert(1)}; function getName(){alert(2)}; getName();// 1 or function getName(){alert(2)}; var getName = function(){alert(1)}; getName();// 1 为什么我调换声明顺序,结果还是输出以 var 形式声明的函数的值? 有人回答我说 "啊,变量提升呀..."

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • JavaScript变量声明var,let.const及区别浅析

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. function a() { // 当a被调用时, var y = 2; // y被声明成函数a作用域的变量,然后赋值成2. console.log(x, y); // 0 2 function b() { // 当b被调用时, x = 3; // 全局变量x被赋值为3,不生成全局变量. y = 4;

  • javascript 变量声明 var,let,const 的区别

    目录 作用域(Scope)是什么 var 声明 提升(Hoisting) let 声明 const 声明 作用域(Scope)是什么 作用域是程序的执行环境,它包含在当前位置可访问的变量和函数.在 ES5 语法中,有全局作用域和局部作用域,ES6 则新增了块级作用域. 全局作用域是最外层的作用域,在函数外面定义的变量属于全局作用域,可以被任何其他子作用域访问.在浏览器中,window 对象就是全局作用域.在编写前端代码过程中,其中有一条优化规则就是少使用全局变量,因为全局变量容易导致程序BUG,

  • JavaScript变量中var,let和const的区别

    目录 前言 ES5与ES6的区别 1. 作用域 2. 全局属性 3. 变量提升与暂时性死区 4. 重复声明 let与const的区别 1. 常量 最佳实践 前言 JavaScript中一共有3种用来声明变量的关键字,分别是var.let和const. 其中var关键字是ES5时代的产物,由于ES5对变量的约束很宽松,使用var来声明变量时经常会出现一些预料之外的问题. ES6为了使变量的定义更加规范,提出了let和const这两个关键字. 因此要解释清楚这三个的区别,首先要从ES5时代和ES6时

  • JavaScript变量声明的var、let、const详解

    目录 前言 内容 JavaScript的变量声明 var的变量声明 变量声明在函数作用域中 变量重复声明 变量声明提升 怪异危险的var let和const的变量声明 块级作用域 不可重复声明 暂时性死区 使用好let和const 总结 参考资料 前言 一个程序语言在运行的过程中,变量的声明在整个程序的生命周期中,是不断在进行的过程.任何程序的计算都会涉及至少一个变量,而计算的结果的则可能会涉及到另外的一个或者多个变量.变量在使用前是要声明,变量声明的过程在计算机的底层,牵涉到的是内存空间和内存

  • javascript变量声明实例分析

    本文实例讲述了javascript变量声明的方法.分享给大家供大家参考.具体分析如下: js中使用一个变量之前应当先声明.变量使用关键字var来声明. 如果未在var声明语句中给变量指定初始值,则该变量值为undefined. 不用在声明变量时指定变量类型,js变量可以是任意数据类型. 使用var语句重复声明变量是合法且无害的.如果重复声明带有初始化器,则就和简单的赋值语句没啥区别. 如果试图读取一个没有声明的变量,则js会报错.在ECMAScript5严格模式下,给一个没有声明的变量赋值也会报

  • JavaScript函数声明和函数表达式的区别

    JavaScript函数声明和函数表达式的区别

    目录 一.写法不一样 二.函数声明加载 三.分析浏览器如何执行代码 一.写法不一样 //函数声明 let res1 = sum1(10 , 20) console.log(res1) function sum1(num1, num2) { return num1 + num2 } //函数表达式 let res2 = sum2(10 , 20) console.log(res2) let sum2 = function ( num1, num2 ){ return num1 + num2 } 二

  • js变量声明var使用与不使用的区别详解

    一.区分显示的声明与隐式声明(var) JS中变量声明分显式声明和隐式声明. var name = 'muzidigbig';//显示声明 name = 'muzidigbig';//隐式声明(为全局变量的一个属性) 在函数中使用var关键字进行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量:而没有用var关键字,使用直接赋值方式声明的是全局变量(全局对象属性). // name = 'muzidigbig';//隐式声明(为全局变量的一个属性) console.log(name

  • 深入理解javascript变量声明

    相对于C/C++来说,ECMAScript里的for循环并不能创建一个局部的上下文. 复制代码 代码如下: for (var k in {a: 1, b: 2}) {   alert(k); } alert(k); // 尽管循环已经结束但变量k依然在当前作用域 任何时候,变量只能通过使用var关键字才能声明.   上面的赋值语句:   a = 10; 这仅仅是给全局对象创建了一个新属性(但它不是变量)."不是变量"并不是说它不能被改变,而是指它不符合ECMAScript规范中的变量概

  • 一个JavaScript变量声明的知识点

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有坐mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行讨论.发现虽然很基础,但是通过讨论收获不少,分享出来.当然在有开发经验的开发者看来,这些都是学习JavaScript最基础的东西.因为平时都是用jQuery或者第三JS组件,所以对JavaScript基础学习不够重视.题目如下,问题是:2次alert分别输出什么结果? 复制代码 代码如下: <scr

  • JavaScript变量声明详解

    定义在函数体外的都属于全局变量,定义在函数体内的属于局部变量.这里的定义是指通过var声明的. JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性.例如: 复制代码 代码如下: function test(){     myname = "huming";     alert(myname); } test(); // "huming" alert(myname); //"huming" 两个结果是一样的,说明

随机推荐