2021-04-02

变量提升和函数提升以及他们的优先级

1，变量提升：变量提升是指将变量声明提升到它所在的作用域的最开始部分

console.log(str)
var str = 'Jerry'
console.log(str)
// undefined Jerry

相当于
var str
console.log(str)
str = 'Jerry'
console.log(str)

2，函数提升：函数创建有两种方式, 只有函数声明形式才存在函数提升

// 1,函数表达式(函数字面量)
var fn = function () {}

// 2,函数声明
function fn() {}

还有一种方式：函数构造法 - var fn = new Fun()，技术角度来讲也是一个字面量形式

function foo() {}
相当于：
var foo = function () {}

console.log(bar)
console.log(bar())
var bar = 1000

function bar() {
  console.log('函数体内')
}
console.log(bar)
bar = 2000
console.log(bar)
console.log(bar())

相当于
var bar = function () {  // 函数提升，函数提升优先级高于变量提升
  console.log('函数体内') 
}
var bar;  // 变量提升，变量提升不会覆盖同名函数提升，只有变量再次赋值时，才会被覆盖
console.log(bar)  // function () {console.log('函数体内')}
console.log(bar()) // 先输出"函数体内" 在输出undefined bar()的返回值，如果函数没有返回值，默认为：undefined
bar = 1000  // 变量赋值，覆盖同名函数字面量
console.log(bar)
bar = 2000
console.log(bar)
console.log(bar())

image

3，优先级

函数提升优先级高于变量提升，且不会被同名变量所覆盖，但是会被变量赋值后覆盖

console.log(person)
console.log(fun)
var person = 'jack'
console.log(person)

function fun() {
  console.log(person)
  var person = 'tom'
  console.log(person)
}
fun()
console.log(person)

相当于
var fun = function () {
  var person;
  console.log(person)
  person = 'tom'
  console.log(person)
}
var person;
console.log(person)
console.log(fun)
person = 'Jack'
console.log(person)
fun()
console.log(person)

image

var getName = function () {
  console.log(1)
}
function getName() {
  console.log(2)
}
getName()

相当于
var getName = function () {
  console.log(2)
}
var getName = function () {
  console.log(1)
}
getName()

// 1

console.log(getName)
var getName = 1;

function getName() {
  console.log(2)
}
// getName () {console.log(2)}

test();
console.log(test);

function test() {
  console.log('我是函数');
}
console.log(test);
var test = '我是变量';
console.log(test);
var test = function (params) {
  console.log('我是函数表达式');
}
console.log(test);
test();

相当于
var test = function () {
  console.log('我是函数')
}
var test;
test() // 我是函数
console.log(test) // function () {console.log('我是函数')}
console.log(test) // function () {console.log('我是函数')}
test = '我是变量'
console.log(test) // 我是变量
var test = function (params) {
  console.log('我是函数表达式')
}
console.log(test) // function (params) {console.log('我是函数表达式')}
test() // 我是函数表达式

image