声明风格及最佳实践

var 关键字

1. var 使用

2. var 声明作用域

3. var 声明提升

let 声明

1. let 作用域

2. 暂时性死区

3. 全局声明（网易前端笔试题）

4. for 循环中的 let 声明

const 声明

1.基本用法

2. for 循环中的 const 声明

声明风格及最佳实践

不使用 var
const 优先，let 次之

var 关键字

1. var 使用

var message;           // undefined （未赋初值）var test = 'hi';       // 字符串类型
test = 100;            // test 重写成数值 100 ，合法，但不推荐

2. var 声明作用域

如果使用 var 定义的变量是在函数内部定义，那么它是一个局部变量，会在函数退出时销毁。

function test() {var message = 100;       // 局部变量
}
test();
console.log(message);        // 出错！

但是当省略 var 操作符的时候，就会使得变量成为全局变量

function test() {message = 100;           // 全局变量
}
test();
console.log(message);        // 100

定义多个变量直接用逗号隔开

var message = 'hi', age = 10, time = 100;

3. var 声明提升

使用 var 声明的变量会自动提升搭配函数作用域的顶部

function foo() {console.log(age);var age = 20;
}
foo();            // undefined  不会报错// 不会报错，因为提升后等价于
function foo() {var age;console.log(age);age = 20;
}
foo();            // undefined

同时，可以反复多次使用 var 声明同一个变量

function foo() {var age = 10;var age = 11;var age = 20;console.log(age);
}foo();         // 20

let 声明

1. let 作用域

let 是块级作用域，var 是函数级作用域

// 函数级作用域
if(ture) {var name = 'hi';console.log(name);  // hi
}
console.log(name);      // hi// 块级作用域
if(ture) {let name = 'hi';console.log(name);  // hi
}
console.log(name);      // ReferenceError: name 没有定义

而且，同一个块级作用域不能出现冗余声明，会报错

var name;
var name;   let age;
let age;   // SyntaxError: 标识符 age 已经声明过了

let 和 var 混用也会报错

var name;
let name;   // SyntaxError: 标识符 name 已经声明过了let age;
let age;   // SyntaxError: 标识符 age 已经声明过了

但是，Js 引擎会记录用于变量声明的标识符以及他们所在的作用域，因此嵌套使用相同的标识符不会出错，因为只要同一个块没有重复声明即可

var name = 'mike';
console.log(name);            // mike
if(true) {var name = 'alice';console.log(name);       // alice
}let age = 10;
console.log(age);           // 10
if(true) {let age = 25;console.log(age);       // 25
}

2. 暂时性死区

产生暂时性死区的原因是因为 let 声明的变量不会在作用域中被提升，在使用未声明的变量到该变量声明之前被称为 “ 暂时性死区 ”

// name 会被提升
console.log(name);    // undefined
var name = 'alice';// age 不会被提升
console.log(age);    // ReferenceError
let age = 10;

3. 全局声明（网易前端笔试题）

var 关键字声明的对象会成为 window 对象的属性
let 不会

var name = 'mike';
console.log(window.name);     // mikelet age = 10;
console.log(window.age);     // undefined

4. for 循环中的 let 声明

let 声明的迭代变量的作用域仅限于 for 循环块的内部，而 var 声明的变量会渗透到循环体外部

for(var i = 0;i < 5;i++){// 循环体
}
console.log(i);             // 5for(let i = 0;i < 5;i++){// 循环体
}
console.log(i);             // ReferenceError: i 没有定义

var 渗透保存存在的问题（有关宏任务和微任务）

for(var i = 0;i < 5;i++) {setTimeout(() => {console.log(i);},0)
}
// 输出结果为 5，5，5，5，5

原因：在退出循环时，迭代变量保存的时导致循环退出的值：5。在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的都是同一个最终值。

而如果使用 let 声明迭代变量，Js 引擎在后台会为每个迭代循环声明一个新的迭代变量，所以每个 setTimeout 引用的都是不同的变量实例，所以每个值就不同。

for(let i = 0;i < 5;i++) {setTimeout(() => {console.log(i);},0)
}
// 输出结果为 1,2,3,4,5

const 声明

1.基本用法

const 的行为与 let 基本相同，唯一一个重要区别是，const 声明变量时一定要初始化，且不能修改 const 声明的变量，会导致运行错误。

const age = 10;
age = 20;         // TypeError: 给常量赋值

const 不允许重复声明
作用域也是块级
const 声明的限制只适用于它指向的变量的引用。例如：如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制，不会报错。

const person = {};
person.name = 'mike';     // ok

2. for 循环中的 const 声明

不能用 const 声明迭代变量，虽然跟 let 一样每次都会声明一个新的迭代变量，但是迭代变量会自增，所以不能用 const。

for(const i = 0;i < 5;i++) {    // TypeError: 给常量赋值// 循环体
}

同时，如果仅仅只是声明一个不会被修改的 for 循环变量，那是可以的。

let i = 0;
for(const j = 7;i < 5;i++) {      // okconsole.log(j);
}
// 输出结果：7，7，7，7，7for(const key in {a:1, b:2} ) {console.log(key);
}
// a, bfor(const key of [1,2,3,4,5]) {console.log(key);
}
//  1,2,3,4,5

红宝书系列之 var let const 的区别相关推荐

红宝书系列之对象（一）
目录 1. 定义 1.1 创建对象 2.属性的类型 2.1 数据属性 2.2 修改默认属性 2.3 访问器属性 3.对象的操作 3.1 定义多个属性 Object.defineProperties( ...
红宝书系列之对象（二）
目录一.创建对象(接口方法) 1.1 工厂模式 1.2 构造函数模式二.构造函数 2.1 构造函数也是函数 2.2 构造函数的问题优化一.创建对象(接口方法) 虽然使用 Object 构造函数 ...
游戏开发计算机图形学杂项知识系列：OpenGL红宝书中第一个渲染程序Triangles常见问题归总
游戏开发计算机图形学杂项知识系列:OpenGL红宝书中第一个渲染程序Triangles常见问题归总声明:未经作者允许,严禁商用,转载请标明出处和来源,谢谢转载自:https://www.cnblo ...
红宝书初步研读随手笔记
红宝书初步研读系列–第一二三章红宝书第一遍研读,知识点整理–随手笔记第一章什么是JavaScriptS 1.1. JavaScript包括: ECMAScript (核心)DOM(文档对象模型) ...
《JavaScript高级程序设计（第四版）》红宝书学习笔记（2）（第四章：变量、作用域与内存）
个人对第四版红宝书的学习笔记.不适合小白阅读.这是part2.持续更新,其他章节笔记看我主页. (记 * 的表示是ES6新增的知识点,记 ` 表示包含新知识点) 第四章:变量.作用域与内存 4.1 原 ...
《JavaScript高级程序设计（第四版）》红宝书学习笔记（1）
个人对第四版红宝书的学习笔记.不适合小白阅读.这是part1,包含原书第二章(HTML中的Javascript)和第三章(语言基础).持续更新,其他章节笔记看我主页. (记 * 的表示是ES6新增的知 ...
《JavaScript高级程序设计》红宝书第二遍阅读（动手实践）
<JavaScript高级程序设计>红宝书第二遍阅读(动手实践) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
《JavaScript高级程序设计》红宝书第一遍阅读（了解概念）
<JavaScript高级程序设计>红宝书第一遍阅读(了解概念) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
红宝书阅读笔记（持续更新）
今天是2021年8月15日 ,在自学的同时开始阅读前端相关的书籍,愿不断在学习中进步. 这一本是<JavaScript高级程序设计>(第四版),也俗称红宝书,第四版中加入了ES6. 下一本 ...

红宝书系列之 var let const 的区别

声明风格及最佳实践

var 关键字

1. var 使用

2. var 声明作用域

3. var 声明提升

let 声明

1. let 作用域

2. 暂时性死区

3. 全局声明（网易前端笔试题）

4. for 循环中的 let 声明

const 声明

1.基本用法

2. for 循环中的 const 声明

红宝书系列之 var let const 的区别相关推荐

最新文章

热门文章