浅谈 var、let 和 const (二)

2019-08-15  本文已影响0人  以虚名称之

浅谈 var、let 和 const (二)

前言

在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。在前一篇文章中,我们讲到了 var、let 和 const 的块级作用域,今天我们主要学习下变量提升和函数提升。

声明方式 变量提升 暂时性死区 重复声明 初始值 作用域
var 允许 不存在 允许 不需要 除块级
let 不允许 存在 不允许 不需要 块级
const 不允许 存在 不允许 需要 块级

1. 变量提升

定义:变量提升,即将变量声明提升到它所在作用域的最开始的部分。变量声明在编译阶段被处理,而变量赋值则留在原地等待执行。

下面给出代码来解释

var 命令 — 存在变量提升
console.log(global); // undefined
var global = 'global';
console.log(global); // global
 
function fn () {
  console.log(a); // undefined
  var a = 'a';
  console.log(a); // a
}
fn();

由于js的变量提升,导致代码实际上是按照以下来执行的

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // global

function fn () {
  var a; // 变量提升,函数作用域范围内
  console.log(a); // undefined
  a = 'a';
  console.log(a); // a
}
fn();
let — 不存在变量提升
console.log(a);
let a = 1;
//报错! Uncaught ReferenceError: Cannot access 'a' before initializatio

const — 不存在变量提升

console.log(a);
const a = 1;
//报错! Uncaught ReferenceError: Cannot access 'a' before initializatio

使用 let 和 const 命令声明变量之前,该变量是不可用的。

2. 函数提升

​ JavaScript中,创建函数主要有两种方式:函数声明式和函数表达式。

  1. 函数声明 (Function Declaration);
// 函数声明
function funDeclaration(type){
return type === "Declaration";
}
  1. 函数表达式 (Function Expression)。
// 函数表达式
var funExpression = function(type){
return type === "Expression";
}

// 或者let、const

​ 编译阶段,JavaScript 引擎能把 函数声明 提升到顶部(即使声明函数的代码在调用它的代码后面)

下面给出代码来解释

函数声明

console.log(fn(1)); 
function fn(a) {
    return a
}
// 1

由于函数提升,函数声明被置于执行环境顶部,即使调用函数的代码在声明函数之前也可以正确访问。

函数表达式

var

console.log(fn(1)); 
var fn = function (a) {
    return a;
}
//报错!Uncaught TypeError: fn is not a function

// 相当于
var fn;
console.log(fn(1));
fn = function (a) {
  return a;
}

let(const和let类似)

console.log(fn(1)); 
let fn = function (a) {
    return a;
}
// 报错!Uncaught ReferenceError: Cannot access 'fn' before initialization
上一篇下一篇

猜你喜欢

热点阅读