iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >JavaScript中的变量提升和函数提升方法
  • 726
分享到

JavaScript中的变量提升和函数提升方法

2023-07-02 14:07:54 726人浏览 泡泡鱼
摘要

本篇内容介绍了“javascript中的变量提升和函数提升方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言在js中对变量进行操作后打印

本篇内容介绍了“javascript中的变量提升和函数提升方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

前言

js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功

举例:

var data="lyyyyy";getData();function getData(){//第一次打印console.log("data值为: ", data);vardata="yyyyyyy";//第二次打印console.log("data值为: ", data);}

打印的值第一个为undefined,而第二个打印的值为yyyyy.

原因:

在执行getData()方法的时候会在函数内部首先将变量的声明提升到第一步。然后再声明函数内部的函数(如果函数内部有函数的话)。之后才会按照方法内部的逻辑先后顺序执行代码。前两步只是声明!!!看到这里应该就已经知道为什么会有上面那样的结果了。

实际的方法内部代码执行顺序应该是这样的:

function getData(){//一。声明变量vardata;//二。声明函数(如果函数内部有函数的话)//三。按照代码的顺序执行console.log("data值为: ", data);data="yyyyyyy";//第二次打印console.log("data值为: ", data);}

看到拆分后的代码执行顺序对结果也就不迷茫了。

为什么有变量提升

那么为什么会出现变量提升这个现象呢?

其实js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行。

javascript变量提升和函数提升

变量提升是把变量提升提到函数顶部。需要说明的是,变量提升只是提升变量的声明,并不会把赋值也提升上来。函数提升是把整个函数都提到前面去。函数表达式不能被提升,函数声明形式能被提升。

<!DOCTYPE html><html lang="en"><head></head><body><script>    //变量提升    function test(){        a=2;        var a;        console.log(a);   //2    }    test();    //变量提升,不会把赋值也提升上来    var v='Hello World';    (function(){        var v;        console.log(v);  //undefined        v='I love you';    })();    //函数声明形式能被提升    function myTest(){        foo();        function foo(){            console.log("hello world");  //hello world        }    }    myTest();    //函数表达式不能被提升    function myTest2(){        foo();    //foo is not a function        var foo =function foo(){            console.log("hello world");        }    }    myTest2();</script></body></html>

JavaScript中的变量提升和函数提升方法

<!DOCTYPE html><html lang="en"><head></head><body><script>//输出Goodbye Jackvar name = 'World!';(function () {    if (typeof name === 'undefined') {        var name = 'Jack';        console.log('Goodbye ' + name);    } else {        console.log('Hello ' + name);    }})();//输出Hello World!var name2 = 'World!';(function () {    if (typeof name2 === 'undefined') {        name2 = 'Jack';        console.log('Goodbye ' + name2);    } else {        console.log('Hello ' + name2);    }})();//输出Hello World!var name3 = 'World!';(function () {    if (typeof this.name3 === 'undefined') {        var name3 = 'Jack';        console.log('Goodbye ' + name3);    } else {        console.log('Hello ' + this.name3);    }})();</script></body></html>

“JavaScript中的变量提升和函数提升方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: JavaScript中的变量提升和函数提升方法

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中的变量提升和函数提升方法
    本篇内容介绍了“JavaScript中的变量提升和函数提升方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言在js中对变量进行操作后打印...
    99+
    2023-07-02
  • JavaScript中的变量提升和函数提升
    目录前言为什么有变量提升javascript变量提升和函数提升总结前言 在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功 ...
    99+
    2024-04-02
  • JavaScript中变量提升和函数提升实例详解
    js 执行 词法分析阶段:包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。 执行阶段 变量提升 ...
    99+
    2024-04-02
  • JS中的提升机制变量提升函数提升实例详解
    目录正文一.变量提升二.函数提升三.判断顺序四.其他“提升” 1.作为import结果的声明是“提升的”;正文 对一些计算机...
    99+
    2024-04-02
  • 基于js变量提升和函数提升的示例分析
    小编给大家分享一下基于js变量提升和函数提升的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、变量提升在ES6之前,J...
    99+
    2024-04-02
  • 浅析JavaScript中的变量提升
    目录前言:函数提升var变量提升let & const提升Class提升前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声...
    99+
    2024-04-02
  • Javascript变量函数声明提升深刻理解
    目录前言:变量提升函数提升为什么要提升?最佳实践总结前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以...
    99+
    2024-04-02
  • JavaScript中的变量提升实例分析
    这篇文章主要介绍“JavaScript中的变量提升实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中的变量提升实例分析”文章能帮助大家解决问题。前言:JavaScript中...
    99+
    2023-06-30
  • javascript中变量提升的示例分析
    这篇文章主要介绍了javascript中变量提升的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如下所示:a = ...
    99+
    2024-04-02
  • JavaScript中如何进行变量提升
    JavaScript中如何进行变量提升,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。变量提升就好比JavaScript引擎用一个很小的代码起重...
    99+
    2024-04-02
  • JavaScript变量声明如何提升
    这篇文章主要讲解了“JavaScript变量声明如何提升”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript变量声明如何提升”吧!变量一个变量...
    99+
    2024-04-02
  • javascript中变量提升和闭包的示例分析
    这篇文章主要介绍了javascript中变量提升和闭包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我们先来看一个题目:<s...
    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的变量提升实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  ...
    99+
    2024-04-02
  • 深入了解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变量提升的相关知识有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。咱们先看段代码,你觉得下面这段代码输出的结果是什么?...
    99+
    2024-04-02
  • JavaScript中变量提升与预编译的示例分析
    这篇文章主要为大家展示了JavaScript中变量提升与预编译的示例分析,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“JavaScript中变量提升与预编译的示例分析”这篇文章吧。Java的特点有...
    99+
    2023-06-06
  • es6的class有变量提升吗
    本文小编为大家详细介绍“es6的class有变量提升吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6的class有变量提升吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es6的class没有变量提升。在...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作