目的:
1、变量,参数,函数,变量赋值的优先级
2、变量提升的本质
参数和函数的优先级
// 参数和函数的优先级
function fn (fn) {
console.log(fn);
}
fn(12) // 输出:12
由此可见:
参数优先级 > 函数优先级,即当函数标识名和参数一致时,参数的优先级比函数的优先级高。
参数和变量的优先级
// 局部变量和参数
function fn (num) {
var num = 12;
console.log(num)
}
fn(5); // 输出:12
// 全局变量和参数
var num = 12;
function fn (num) {
console.log(num)
console.log(window.num);
}
fn(5); // 输出: 5 12
可以从上边看到:
局部变量的优先级 > 参数的优先级 > 全局变量的优先级,该全局变量的定义只针对于当前环境- 如果指定变量的环境,则
被指定环境下变量的优先级 > 局部变量优先级和参数的优先级,被指定环境中的优先级遵循上一条规则
函数和变量的优先级
// 参数和函数的优先级
var fn;
function fn () {
return fn;
}
console.log(fn);
fn = 12;
console.log(fn);
/*
输出:
ƒ fn () {
return fn;
}
12
*/
因此:
被赋值变量的优先级 > 函数优先级 > 变量优先级,即当函数的标识名和变量的名称一致时,函数的优先级高于变量的优先级(前提是变量没有被赋值)- 如果变量被赋值(即
局部变量),则该变量的优先级高于函数优先级
优先级总结
1、
局部变量优先级 > 参数优先级 > 函数优先级 > 全局变量优先级
2、被指定环境下变量的优先级 > 局部变量优先级
变量提升
1、函数声明和变量声明总是会被解释器"提升"到方法体的最顶部
2、所有变量或函数都会经过声明阶段
// 变量声明
var a;
// 函数声明
function fn () {}
注意:以下方式不属于声明,而是赋值
// 变量赋值
a = 12;
// 函数表达式
var fn = function () {}
变量赋值和函数表达式可以可以理解为:
// 变量赋值
a = 12;
// 等价于
var a;
a = 12;
// 函数表达式
var fn = function () {}
// 等价于
function fn () {}
var fn = fn;
注意事项:
1、非严格模式下允许先使用后声明
2、严格模式下不允许使用未声明的变量
// 非严格模式下
console.log(a); // 输出:undefined
var a = 10;
console.log(a); // 输出:10
// 严格模式下
"use strict";
console.log(a); // 报错:a is not defined
let a = 10;
面试题
// 面试题1
var a = 10;
(function () {
console.log(a)
a = 5
console.log(window.a)
var a = 20;
console.log(a)
})()
// 结果:依次输出 undefined 10 20
// 解析:上述代码等价于
var a;
a = 10;
(function () {
var a // 倒数第三行代码变量提升了
console.log(a) // 根据优先级原则,局部变量优先级 > 全局变量优先级
a = 5
console.log(window.a) // `被指定环境下变量的优先级 > 局部变量优先级`
a = 20;
console.log(a) // 与第四行原理一样
})()
更多相关文档,请见:
线上地址 【前端橘子君】
GitHub仓库【前端橘子君】