Javascript中的变量提升、函数提升及变量访问原则

zhigoo 发布于2019-08-23 14:29 / 2795人阅读

摘要：变量提升什么是变量提升在函数体内声明的变量，无论你是在函数的最底端还是中间声明的，那么都会把该变量的声明提升到函数的最顶端相当于第一行，但是只是提升变量的声明，不会赋值。

1、变量提升

什么是变量提升？
在函数体内声明的变量，无论你是在函数的最底端还是中间声明的，那么都会把该变量的声明提升到函数的最顶端(相当于第一行)，但是只是提升变量的声明，不会赋值。

var num = 10;
fun(); //输出结果为undefined
function  fun(){
    console.log(num);
    var num = 20;
}

/*上面这个函数相当于：
    function  fun(){
        var num;
        console.log(num);
        num = 20;
    }
*/

2、函数提升

什么是函数提升？
在JavaScript中以函数声明的方式创建的函数就跟用var创建的变量一样，它们的声明都会提前声明，这就使得我们在JavaScript中可以调用函数在前面，而声明函数在后面，这就是函数提升。

func();
function func(){
    alert(“函数执行了！”);
}
/*
上面这段代码相当于：
function func(){
    alert(“函数执行了！”);
}
func();
*/

3、函数与变量同名时的变量提升

alert(fun); // 最终输出结果为：输出fun函数体
function fun(){
    alert(“我是一个函数”);
}
var fun = “我是一个变量”;
alert(fun); // 输出：我是一个变量

/* 为什么第一个alert输出的是fun函数体，而第二个alert输出的是“我是一个变量”？
因为用var声明的变量及function声明的函数在执行前都会将声明提升到最前面，如果变量与函数同名，
那么在声明的时候会忽略变量，只提升函数声明！ */

/*
上面这段代码相当于：
function fun(){
    alert(“我是一个函数”);
}
alert(fun);
fun = “我是一个变量”;
alert(fun);
*/

4、变量搜索原则(变量访问原则)

在JavaScript中变量的访问(搜索)是有原则的：

1）、首先在访问变量的作用域(函数)中查找该变量，如果找到直接使用
2）、如果没有找到，去上一级作用域中查找，如果找到直接使用
3）、如果还是没有找到，则再去上一级作用域中查找，知道全局作用域
4）、如果找到了就直接使用，如果没有找到则报错

var num = 123;
function foo1(){
    function foo2(){
        console.log(num);
    }
    /*当调用foo2时，会首先去foo2这个作用域中查找是否有num变量，结果没找到则去上一级作用域(即foo1)中查找是否有foo1变量，
    结果还 是没找到，则再去上一级作用域(全局作用域)中查找，结果找到了，则拿来使用*/
    foo2();
}

5、变量提升、变量搜索机制经典面试题

fun();

console.log(b);
console.log(c);
console.log(a);

functoin fun(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

云服务器 GPU云服务器 js变量声明提升 php中的变量函数 php函数访问变量 javascript提升

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100695.html

js-编译原理与声明提升

摘要：编译原理在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为编译。定义声明是在编译阶段进行的，而赋值是在执行阶段进行的。编译原理在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为编译。词法分析将由字符组成的字符串分解成(对编程语言来说)有意义的代码块，这些代码块被称为词法单元(token)。语法分析这个过程是将词法单元流(数组)转...

zhongmeizhi 2019-08-26 10:12 评论0 收藏0
弄懂JavaScript的作用域和闭包

摘要：关于本书，我会写好几篇读书笔记用以记录那些让我恍然大悟的瞬间，本文是第一篇弄懂的作用域和闭包。作用域也可以看做是一套依据名称查找变量的规则。声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域。《你不知道的JavaScript》真的是一本好书，阅读这本书，我有多次哦，原来是这样的感觉，以前自以为理解了（其实并非真的理解）的概念，这一次真的理解得更加透彻了。关于本书，我会写好...

everfly 2019-08-22 10:45 评论0 收藏0
ES6 变量作用域与提升：变量的生命周期详解

摘要：不同的是函数体并不会再被提升至函数作用域头部，而仅会被提升到块级作用域头部避免全局变量在计算机编程中，全局变量指的是在所有作用域中都能访问的变量。 ES6 变量作用域与提升：变量的生命周期详解从属于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建...

lmxdawn 2019-08-21 11:55 评论0 收藏0
夯实基础-作用域与闭包

摘要：作用域分类作用域共有两种主要的工作模型。换句话说，作用域链是基于调用栈的，而不是代码中的作用域嵌套。词法作用域词法作用域中，又可分为全局作用域，函数作用域和块级作用域。一篇巩固基础的文章，也可能是一系列的文章，梳理知识的遗漏点，同时也探究很多理所当然的事情背后的原理。为什么探究基础？因为你不去面试你就不知道基础有多重要，或者是说当你的工作经历没有亮点的时候，基础就是检验你好坏的一项...

daydream 2019-08-22 16:22 评论0 收藏0
理解JavaScript的核心知识点：作用域

摘要：也毫不例外，但在中作用域的特性与其他高级语言稍有不同，这是很多学习者久久难以理清的一个核心知识点。主要使用的是函数作用域。关于作用域：About Scope 作用域是程序设计里的基础特性，是作用域使得程序运行时可以使用变量存储值、记录和改变程序的状态。JavaScript 也毫不例外，但在 JavaScript 中作用域的特性与其他高级语言稍有不同，这是很多学习者久久难以理清的一个核...

HelKyle 2019-08-26 13:31 评论0 收藏0