最简单的变量提升和优先级

时间:2021-1-8 作者:admin

本文档已更新于 【前端橘子君】 【Github】

目的:
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仓库【前端橘子君】

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。