js 中 var let const 解析

一.var
含义:变量声明,无论发生在何处,都在执行任何代码之前进行处理。

注意:
1.声明变量的作用域限制在其声明位置的上下文中,而非声明变量总是全局的

function x() {  
  y = 1;  // 在严格模式(strict mode)下会抛出ReferenceError异常。  
  var z = 2;
}
x();
console.log(y); // 打印"1" 。
console.log(z); // 抛出ReferenceError: z未在x外部声明。

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

console.log(a);   // 抛出ReferenceError。console.log('still going...'); // 永不执行。

var a;
console.log(a);  // 打印"undefined"或""(不同浏览器实现不同)。
console.log('still going...'); // 打印"still going..."

3. 声明变量是它所在上下文环境的不可配置属性,非声明变量是可配置的(如非声明变量可以被删除)。

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

建议:建议始终声明变量,无论它们是在函数还是全局作用域内。

参考例子:
变量提升:

 var a = 2;
 function foo() {
     console.log(a); //undefined
     var a = 10;
     console.log(a); //10
 }
 foo();

留意其中的顺序:

var x = y, y = 'A';
console.log(x + y); // undefinedA

在这里,x和y在代码执行前就已经创建了,而赋值操作发生在创建之后。当"x = y"执行时,y已经存在,所以不抛出ReferenceError,并且它的值是'undefined'。所以x被赋予 undefined 值。然后,y被赋予'A'。于是在执行完第一行之后,x === undefined && y === 'A'才出现了这样的结果。

多个变量的初始化

var x = 0;
function f(){  
  var x = y = 1; // x在函数内部声明,y不是!
}
f();
console.log(x, y); // 0, 1// x是全局变量。// y是隐式声明的全局变量。

隐式全局变量和外部函数作用域

看起来像是隐式全局作用域的变量也有可能是其外部函数变量的引用。

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;  // 已存在的外部函数的y变量被赋值为4,不生成新的全局变量。      z = 5;  // 创建新的全局变量z,并且给z赋值为5。  
  }        // (在严格模式下(strict mode)抛出ReferenceError)  b();    // 调用b时创建了全局变量z。  
  console.log(x, y, z);  // 3 4 5
}
a();                  // 调用a时同时调用了b。
console.log(x, z);    // 3 5
console.log(typeof y); // undefined,因为y是a函数的本地(local)变量。

二.let

含义:允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,它声明的变量只能是全局或者整个函数块的。

注意:let声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {  
  var x = 1;  
  if (true) {    
    var x = 2;  // 同样的变量!   
    console.log(x);  // 2 
   }  
  console.log(x);  // 2
}
function letTest() {  
  let x = 1;  
  if (true) {   
    let x = 2;  // 不同的变量    
    console.log(x);  // 2  
 } 
 console.log(x);  // 1
}

作用:

1.简化内部函数代码

当用到内部函数的时候,let会让你的代码更加简洁。

var list = document.getElementById('list');
for (let i = 1; i <= 5; i++) {  
  let item = document.createElement('li');         
  item.appendChild(document.createTextNode('Item ' + i)); 
  item.onclick = function(ev) { 
    console.log('Item ' + i + ' is clicked.');  };
  list.appendChild(item);
}// to achieve the same effect with 'var'// you have to create a different context// using a closure to preserve the value
for (var i = 1; i <= 5; i++) {  
  var item = document.createElement('li'); 
  item.appendChild(document.createTextNode('Item ' + i)); 
  (function(i){    
  item.onclick = function(ev) {  
    console.log('Item ' + i + ' is clicked.');   
  };  
})(i);  
list.appendChild(item);
}

以上示例的工作原理是因为(匿名)内部函数的五个实例引用了变量i的五个不同实例。注意,如果你将let替换为var,则它将无法正常工作,因为所有内部函数都将返回相同的i:6的最终值。此外,我们可以通过将创建新元素的代码移动到每个循环的作用域来保持循环更清晰。

每次循环的i其实都是一个新的变量 注意for循环的作用域(父子作用域)

在程序或者函数的顶层,let并不会像var一样在全局对象上创造一个属性,比如:

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

2.模仿私有接口

在处理构造函数的时候,可以通过let绑定来共享一个或多个私有成员,而不使用闭包:

var Thing;
{  
   let privateScope = new WeakMap();  
   let counter = 0; 
   Thing = function() {    
   this.someProperty = 'foo';   
    privateScope.set(this, {
    hidden: ++counter,    
   });  
  };  
  Thing.prototype.showPublic = function() {    
    return this.someProperty;  
  };  
  Thing.prototype.showPrivate = function() {    
    return privateScope.get(this).hidden;  
  };
}
console.log(typeof privateScope);// "undefined"
var thing = new Thing();
console.log(thing);// Thing {someProperty: "foo"}
thing.showPublic();// "foo"
thing.showPrivate();// 1

暂存死区的错误

在相同的函数或块作用域内重新声明同一个变量会引发SyntaxError。

if (x) {  
  let foo;
  let foo; // TypeError thrown.
}

在 ECMAScript 2015 中,let绑定不受变量提升的约束,这意味着let声明不会被提升到当前执行上下文的顶部。在块中的变量初始化之前,引用它将会导致ReferenceError(而使用 var 声明变量则恰恰相反,该变量的值是 undefined )。该变量处于从块开始到初始化处理的“暂存死区”。

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError: foo is not defined
  var bar = 1;
  let foo = 2;
}

在switch声明中你可能会遇到这样的错误,因为它只有一个块.

switch (x) {
  case 0:
    let foo;
    break;   
  case 1:
    let foo; // TypeError for redeclaration.
    break;
}

但是,重要的是要指出嵌套在case子句内的块将创建一个新的块作用域的词法环境,这不会产生上面显示的重新声明错误。

let x = 1;
switch(x) {
  case 0: {
    let foo;
    break;
  } 
  case 1: {
    let foo;
    break;  }
}

与词法作用域结合的暂存死区

由于词法作用域,表达式(foo + 55)内的标识符“foo”会解析为if块的foo,而不是覆盖值为33的foo。在这一行中,if块的“foo”已经在词法环境中创建,但尚未达到(并终止)其初始化(这是语句本身的一部分):它仍处于暂存死区。

function test(){
  var foo = 33;
  if (true) {
      let foo = (foo + 55); // ReferenceError
  }
}
test();

这种现象可能会使您陷入以下情况。指令let n of n.a已经在for循环块的私有范围内,因此标识符“n.a”被解析为位于指令本身的第一部分(“let n”)中的'n'对象的属性'a' ,由于尚未达成和终止其声明,因此仍处于暂存死区。

function go(n) {
  // n here is defined!
  console.log(n); // Object {a: [1,2,3]}
  for (let n of n.a) { // ReferenceError    console.log(n);
  }
}
go({a: [1, 2, 3]});

一.const

含义:此声明创建一个常量,其作用域可以是全局或本地声明的块。 与var变量不同,全局常量不会变为窗口对象的属性。需要一个常数的初始化器。

注意:

// 注意: 常量在声明的时候可以使用大小写,但通常情况下全部用大写字母。

// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
//  MY_FAV 保留给上面的常量,这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) {
// 没问题,并且创建了一个块作用域变量 
MY_FAV    
// (works equally well with let to declare a block scoped non const variable)    
let MY_FAV = 20;    
// MY_FAV 现在为 20    
console.log('my favorite number is ' + MY_FAV);    
// 这被提升到全局上下文并引发错误    
var MY_FAV = 20;}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; 
// SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内,下面这个声明会成功执行
MY_OBJECT.key = "otherValue";// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); 
// ["A"]
// 但是,将一个新数组赋给变量会引发错误MY_ARRAY = ['B']
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容