ES6新特性varletconst

48次阅读

共计 1849 个字符,预计需要花费 5 分钟才能阅读完成。

1、var、let、const

var 不存在块级作用域,具有变量提升机制。let 和 const 存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。
## var 的说明 ##
function a(flag){if(flag){console.log(value);      // 结果为 undefined,已声明但未初始化
        var value=1;
        return value;
    }else{console.log(value);      // 仍旧可以访问到 value; 值为 undefined
    }
}
// 上述代码等价于
function a(flag){
    var value;
    if(flag){
        value=1;
        return value;
    }else{console.log(value);      // 仍旧可以访问到 value; 值为 undefined
    }
}
## let 说明 ##
function a(flag){if(flag){console.log(value);       // 报错, 因为 value 此时位于 TDZ(后面讲)内,无法访问
        let value=1;
        return value;
    }else{console.log(value);      //value is not defined
    }
}
## const 说明 ##
function a(flag){if(flag){console.log(value);       // 报错, 因为 value 此时位于 TDZ(后面讲)内,无法访问
        const value=1;        //const 必须在声明的时候初始化,并且其值无法被重新赋值
        return value;
    }else{console.log(value);      //value is not defined
    }
}

2、const 在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改

const obj={
    name:'Alisa',
    age:25
}
obj=23;        // 报错
obj.age=23;    // 允许修改

3、TDZ 暂存性死区
JavaScript 引擎在扫描代码发现变量声明时,如果是使用 var 声明的变量,则讲变量提升至作用域顶部;如果是采用 let 和 const 声明的变量,则将其放到 TDZ 中。访问 TDZ 中的变量会触发运行时错误,只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后才可以正常访问。 注意:其针对的是 let 和 const 所在的块级作用域。

if(flag){console.log(typeof value);     // 引用错误
    let value='time';
}

console.log(typeof value);         //undefined
if(flag){console.log(typeof value);     // 引用错误
    let value='time';
}

4、let、const 在循环中的应用

// 输出 0 -9
var funcs=[];
for(let i=0;i<10;i++){funcs.push(function(){console.log(i);
    })
}
funcs.forEach(function(func){func();        // 输出 0 -9
})
// 将上面的 let 变为 const 则会报错,因为 i ++ 操作试图修改 const 声明的常量
// 遍历对象
var person={
    name:"Alisa",
    age:23
};
for(let key in person){console.log(key);    // 输出 name、age
}
// 将上面的 let 换位 const 不会报错,因为每次 key 的值并不相同,即每次定义一个新的变量

5、var 可能修改全局属性(如浏览器环境下的 window 对象的属性),而 let 和 const 不会修改只是遮蔽

var RegExp='hello';
console.log(window.RegExp);       //"hello"
var say='hi';
console.log(window.say);          //"hi"

let RegExp='hello';
console.log(RegExp);       //"hello"
console.log(window.RegExp === RegExp);       //false

const say='hi';
console.log(say);          //"hi"
console.log(window.say);          //undefined

6、实际应用时的 tips
使用块级绑定时:声明变量默认采用 const,只有确实需要改变变量时才使用 let。
在编程过程中如果需要变量提升则使用 var 声明变量,否则采用 let 和 const 声明变量,以便更好地控制作用域,避免变量的混用、不可控。

正文完
 0