知识库

变量提升

在当前上下文中，代码并没有自上而下立即执行，而是继续做了一些事，把当前作用域中所有带 var 关键字的进行提前的声明，由于没有定义，值是 undefined，所有带 function 关键字的的进行提前的声明和定义，这就是变量提升机制。（var 变量提升在 function 变量提升之前）但是 function 出现在了全局上下文中除函数或对象以外的花括号中，全局上下文中只声明不定义，为以后 function 形成块级上下文做准备。

let/const/import/class声明的变量不存在变量提升

变量提升情况（全局作用域下）

function fn () {} 
// 声明+定义 先创建堆内存，存储键值对, 代码串，确定上级作用域[[scope]]，返回地址到GO中
// GO中创建变量fn，
// fn与地址关联

var a = 10
// 提前声明，GO中创建变量a，值为undefined

var b = 10; var b = 20
// 提前声明，GO中创建变量b，var b = 20由于GO中已经有b了，直接忽略

// 条件判断下的变量提升
// 当前上下文变量提升阶段，无论条件是否成立，都先进行变量提升
// 带var和之前一样，只有变量提升，而判断体中出现function，也只有变量提升，没有定义

a = 10
// 不带var：不会进行变量提升，执行时相当于给全局对象window添加属性a

a = 13 // <=> window.a = 13

function fn (a) {
  var a = 20 // var没有提升 VO(FN)中已经存在a, 直接忽略var
}
fn(10)

function fn () {
  var a = 20 // 函数执行时内部提升
}

(function () {})()
// 函数不提升，全局上下文下里面的也不提升

(function fn() {})()
// 函数不提升，本质上匿名函数具名化，全局上下文下里面的也不提升

return function () {}
// 函数不提升，全局上下文下里面的也不提升

const fn = function fn () {}
// 函数不提升，本质匿名函数具名化，全局上下文下里面的也不提升

var a = 10, b = 20 // <=> var a = 10; var b = 20
var a = b = 10 // <=> var a = 10; b = 10，先创建值10,再依次关联
var a = b = {} // 先创建对象,再依次关联,都关联同一个对象，=> a === b 结果为 true

// example 1
console.log(a)
var a = 12
var b = a
b = 13
console.log(a) 

// example2
console.log(sum(1, 2)) 
function sum (a, b) {
  return a + b
}

// example3
sum(1, 2) 
var sum = function (a, b) {
  return a + b
}

// example4
console.log(a) 
let a = 12
a = 13
console.log(a) 

// example5
console.log(a) 
a = 10
console.log(a)

// example6
var a = 12
var a = 13
console.log(a) 

// example7
let a = 12
let a = 13
console.log(a) 

// example8
fn()
function fn () { console.log(1) } // 第一个变量提升，声明并且赋值
fn()
function fn () { console.log(2) } // 第二个变量提升，不重新声明，但进行赋值
fn()
var fn = function () { console.log(3) } // 第三个变量提升，不重新声明也不进行赋值
fn()
function fn () { console.log(4) } // 第四个变量提升，不重新声明，但进行赋值
fn()
function fn () { console.log(5) } // 第五个变量提升，不重新声明，但进行赋值
fn()
// 5 5 5 3 3 3

// example9
// [Property] in [Object] 验证当前属性是否属于这个对象，会沿着原型链找
// 全局作用域
// 1.变量提升
// 不管条件是否成立，都要先进行变量提升
// var a => 变量a && window.a = undefined ???
// 2.代码执行

console.log(a)
if (!('a' in window)) {
  var a = 13
}
console.log(a) 

// example1
console.log(a, b) 
var a = 12,
  b = 12

function fn () {
  console.log(a, b) 
  var a = b = 13 
  console.log(a, b) 
}

fn()
console.log(a, b) 

// example2
console.log(a, b, c) 
var a = 12,
  b = 13,
  c = 14
function fn(a) {
  console.log(a, b, c) 
  a = 100;
  c = 200;
  console.log(a, b, c)
}
b = fn(10) 
console.log(a, b, c) 

// example3
var arr = [12, 23]
function fn(arr) {
  console.log(arr) 
  arr[0] = 100
  arr = [100]
  arr[0] = 0
  console.log(arr) 
}
fn(arr) 
console.log(arr)

// example
console.log(fn)
function fn () {}
var fn = 10

// example
function fn () {}
console.log(fn)
var fn = 10

变量提升 ​

变量提升