iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中变量提升和函数提升实例详解
  • 553

0
分享到

JavaScript中变量提升和函数提升实例详解

2024-04-02 19:04:59 553人浏览 泡泡鱼
摘要

js 执行 词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。 执行阶段 变量提升

js 执行

  • 词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。
  • 执行阶段

变量提升

  • 只有声明被提升，初始化不会被提升
  • 声明会被提升到当前作用域的顶端

🌰 1:


console.log(num)
var num
num = 6

预编译之后


var num
console.log(num) // undefined
num = 6

🌰 2:


num = 6
console.log(num)
var num

预编译之后


var num
num = 6
console.log(num) // 6

🌰 3:


function bar() {
    if (!foo) {
        var foo = 5
    }
    console.log(foo) // 5
}
bar()

预编译之后


function bar() {
    var foo // if语句内的声明提升
    if (!foo) {
        foo = 5
    }
    console.log(foo)
}
bar()

函数提升

  • 函数声明和初始化都会被提升
  • 函数表达式不会被提升

🌰 1: 函数声明可被提升


console.log(square(5)) // 25
function square(n) {
    return n * n
}

预编译之后


function square(n) {
    return n * n
}
console.log(square(5))

🌰 2: 函数表达式不可被提升


console.log(square) // undefined
console.log(square(5)) // square is not a function
var square = function(n) {
    return n * n
}

预编译之后


var square
console.log(square)
console.log(square(5))
square = function() {
    return n * n
}

🌰 3:


function bar() {
    foo() // 2
    var foo = function() {
        console.log(1)
    }
    foo() // 1
    function foo() {
        console.log(2)
    }
    foo() // 1
}
bar()

预编译之后：


function bar() {
    var foo
    foo = function foo() {
        console.log(2)
    }
    foo() // 2
    foo = function() {
        console.log(1)
    }
    foo() // 1
    foo() // 1
}

函数提升在变量提升之前

🌰 1:


console.log(foo) // 会打印出函数

function foo() {
    console.log('foo')
}
var foo = 1

🌰 2:


var foo = 'hello' // hello
;(function(foo) {
    console.log(foo)
    var foo = foo || 'world'
    console.log(foo) //hello
})(foo)
console.log(foo) // hello

预编译之后


var foo = 'hello'
;(function(foo) {
    var foo
    foo = 'hello' // 传入参数的foo值
    console.log(foo) // hello
    foo = foo || 'world' // foo有值为hello，所以没有赋值为world
    console.log(foo) // hello
})(foo)
console.log(foo) // hello, 打印的事全局作用域下的var foo = 'hello'

JS变量提升和函数提升的顺序

最近笔试时碰到考察变量提升与函数提升顺序的一道题目，之前只知道var定义的变量会有变量提升以及函数声明也会提升，但没有深入研究他们的顺序以及详细过程。事后查阅资料加上自己的验证，得出了自己对于它们顺序的一些理解，话不多说，直接进入正题。

首先给出我的结论：函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被同名变量赋值后覆盖

大家可以看下面这段代码：


     console.log(a) // ƒ a(){}  变量a赋值前打印的都会是函数a
     var a=1;
     function a(){}
     console.log(a) // 1    变量a赋值后打印的都会是变量a的值

首先变量和函数声明都提升，但函数提升优先级高于变量，都提升后变量只是定义没有赋值，所以输出的是函数a。详细过程如下：


     function a(){}  // 函数声明提升 a-> f a (){}
     var a;        // 变量提升
     console.log(a)  // 此时变量a只是声明没有赋值所以不会覆盖函数a --> 输出函数a  f a (){}
     a=1;     //变量赋值
     console.log(a)  // 此时变量a赋值了 --> 输出变量a的值 1

总结：由于函数声明和变量都会提升，如果函数与变量同名，那么只要在变量赋值前打印的都会是函数，在变量赋值之后打印都是变量的值。

现在让我们再看一段代码：


     a();  // 2
     var a = function(){  // 看成是一个函数赋值给变量a
        console.log(1)
     }
     a(); // 1
     function a(){
        console.log(2)
     }
     a(); // 1

其实只是想告诉大家只有函数声明才会提升函数表达式不会提升，所以在函数表达式后面的代码会输出1，因为变量a赋值后把提升的函数a覆盖了。详细过程如下：


     function a(){      // 函数提升
         console.log(2)
     }
     var a;   // 变量提升
     a();    // 2  
     a = function(){    // 变量a赋值后覆盖上面的函数a
         console.log(1)
     }
     a(); // 1
     a(); // 1

再看一段代码：


     a();
     function a(){
         console.log(1)
     }
     function a(){
         console.log(2)
     }

打印的是2，道理很简单先声明的会被后声明的覆盖。

总结

到此这篇关于javascript中变量提升和函数提升的文章就介绍到这了,更多相关js变量提升和函数提升内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中变量提升和函数提升实例详解

本文链接: https://www.lsjlt.com/news/129975.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JavaScript中变量提升和函数提升实例详解
    js 执行 词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。 执行阶段 变量提升 ...
    99+
    2024-04-02
  • JS中的提升机制变量提升函数提升实例详解
    目录正文一.变量提升二.函数提升三.判断顺序四.其他“提升” 1.作为import结果的声明是“提升的”；正文 对一些计算机...
    99+
    2024-04-02
  • JavaScript中的变量提升和函数提升
    目录前言为什么有变量提升javascript变量提升和函数提升总结前言 在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功 ...
    99+
    2024-04-02
  • JavaScript中的变量提升和函数提升方法
    本篇内容介绍了“JavaScript中的变量提升和函数提升方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！前言在js中对变量进行操作后打印...
    99+
    2023-07-02
  • 基于js变量提升和函数提升的示例分析
    小编给大家分享一下基于js变量提升和函数提升的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、变量提升在ES6之前，J...
    99+
    2024-04-02
  • JavaScript中的变量提升实例分析
    这篇文章主要介绍“JavaScript中的变量提升实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript中的变量提升实例分析”文章能帮助大家解决问题。前言：JavaScript中...
    99+
    2023-06-30
  • JavaScript的变量提升实例分析
    本篇内容介绍了“JavaScript的变量提升实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　...
    99+
    2024-04-02
  • Javascript变量函数声明提升深刻理解
    目录前言：变量提升函数提升为什么要提升？最佳实践总结前言： Javascript变量函数声明提升（Hoisting）是在 Javascript 中执行上下文工作方式的一种认识（也可以...
    99+
    2024-04-02
  • javascript变量提升案例分析
    本篇内容主要讲解“javascript变量提升案例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript变量提升案例分析”吧! ...
    99+
    2024-04-02
  • javascript中变量提升的示例分析
    这篇文章主要介绍了javascript中变量提升的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如下所示：a = ...
    99+
    2024-04-02
  • JavaScript中的声明提升实例详解
    目录函数的提升var 变量声明提升let 和 const 变量声明和死区总结函数的提升 声明提升（hosting）是 JavaScript 解析器的一个特性，它会把代码中的函数、变量...
    99+
    2022-11-16
    JavaScript 声明提升 JavaScript 声明
  • 浅析JavaScript中的变量提升
    目录前言：函数提升var变量提升let & const提升Class提升前言： JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声...
    99+
    2024-04-02
  • javascript中变量提升和闭包的示例分析
    这篇文章主要介绍了javascript中变量提升和闭包的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。我们先来看一个题目：<s...
    99+
    2024-04-02
  • JavaScript中如何进行变量提升
    JavaScript中如何进行变量提升，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。变量提升就好比JavaScript引擎用一个很小的代码起重...
    99+
    2024-04-02
  • JavaScript变量声明如何提升
    这篇文章主要讲解了“JavaScript变量声明如何提升”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript变量声明如何提升”吧！变量一个变量...
    99+
    2024-04-02
  • 简单谈谈JavaScript变量提升
    目录前言1. 什么变量提升？ 2. 为什么会有变量提升？ （1）提高性能（2）容错性更好3. 变量提升导致的问题 （1）变量被覆盖（2）变量没有被销毁4. 禁用变量提升 5. JS如...
    99+
    2024-04-02
  • JavaScript中变量提升与预编译的示例分析
    这篇文章主要为大家展示了JavaScript中变量提升与预编译的示例分析，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“JavaScript中变量提升与预编译的示例分析”这篇文章吧。Java的特点有...
    99+
    2023-06-06
  • 深入了解JavaScript中let/var/function的变量提升
    目录前言1. let存在提升2. var/function的变量提升2.1 var的变量提升2.2 function的变量提升3. 总结前言 在我们的印象中，当提到JavaScrip...
    99+
    2024-04-02
  • JavaScript声明提升实例分析
    本篇内容主要讲解“JavaScript声明提升实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript声明提升实例分析”吧!   ...
    99+
    2024-04-02
  • JavaScript函数提升指的是什么
    这篇文章主要介绍了JavaScript函数提升指的是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript函数提升指的是什么文章都会有所收获，下面我们一起来看看...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作