javascript声明提升的介绍(附示例)

本篇文章给大家带来的内容是关于javascript声明提升的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Javascript声明提升

在分析声明提升之前,我认为有必要知道的两点:

一、引擎查询变量的两种方式

引擎查询变量的方式可以分为LHS和RHS两种方式,通过“L”和“R”是可以大致了解意思,分别是赋值操作的左侧和右侧。 (不能光是理解为“=”的左右侧可不行,因为赋值操作的形式有多种。)

简单说下我对这两种查询方式的理解:
LHS:赋值操作的目标是谁。 (查询变量)
RHS:谁是赋值操作的源头。 (查询变量的值)

这样说可能有些难以理解,举个栗子:

function foo(a){    //这里存在一个隐式变量分配,LHS查询变量a,并赋值2.    //隐式a = 2;    //左边LHS查询变量b,查询作用域中是否存在b这个变量。    //右边RHS查询变量a的值,将a赋值给b。    var b = a;    //返回a,b是RHS查询变量a的值和变量b的值并使用。    return a + b;}//左边LHS查询变量c,查询作用域中是否存在c这个变量。//右边RHS引用函数foo,将2作为参数传进去。var c = foo(2);

登录后复制

二、异常

关于异常要强调一点,必须在严格模式下。因为在非严格模式下,LHS查询若是在最顶层的全局作用域上找不到查询的变量,则会创建一个该名称变量返还给引擎。

立即学习“Java免费学习笔记(深入)”;

ReferenceError:同作用域判别失败相关。(比如:作用域中遍寻不到所需的变量)
TypeError:作用域判别成功了,但是对结果的操作是非法或不合理的。(比如:试图对一个非函数类型的值进行函数调用,或者引用null或undefined类型的值中的属性)

举个栗子:

"strict"function foo() {    console.log(a) //undefined    console.log(b) //ReferenceError}var a = 2;

登录后复制

声明提升

一、初步了解

编写javascript代码时,很多时候都会觉得代码会自上而下的执行。但是碰到声明提升,这种想法就会被打破。

举个栗子:

a = 2;var a;console.log(a);运行结果为: 2

登录后复制

如果按照常理的自上而下执行,那么a执行的预期结果应当是undefined,然而为什么会是2?
这就是声明提升的结果。

二、进一步了解

当初步了解声明提升的时候,碰上下面的代码:

console.log(a);var a = 2;运行结果为:undefined

登录后复制

初步了解声明提升之后,会自然而然的认为,声明就会被提升,然而声明的时候赋值,却得不到变量的值。

其实,上面代码的运行步骤可以分解为:

var a; //声明提升console.log(a); //打印a的值a = 2; //对a进行赋值

登录后复制

原来,声明提升就是字面上的声明提升,其余的操作(如:赋值和其他逻辑)都还在原地踏步。

声明一个函数进行相应的操作,会得到函数声明提升的结果。由此可以发现:变量和函数的声明都会被提升在其他代码的前面执行。

三、逐步了解

通过几次试验可以逐步了解到,其实声明提升就是:变量和函数的声明会被提升在其他代码(当前作用域)的前面执行。

走到这里,有人就会想到,要是函数表达式,也会进行提升吗?

答案是:不会。而且,即使是具名函数表达式,在名称标识符赋值之前也是不能使用的。

举个栗子:

foo(); //TypeErrorbar(); //ReferenceErrorvar foo = function bar(){};

登录后复制

代码分解为:

var foo; //变量声明提升foo(); //foo对undefined值进行函数调用导致非法操作,故TypeErrorbar(); //bar函数并没有声明,故ReferenceErrorfoo = function bar(){}; //对foo进行赋值

登录后复制

所以:函数表达式在名称标识符赋值之前是不能使用的。

注意:1、每个作用域都会进行提升操作。(所以函数内部形成的作用域也会有提升操作,提升            操作仅限当前的函数内部作用域)
2、在函数和变量提升时,函数优先提升。
3、一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。

四、深入了解

在阅读《你不知道的javascript》时,学习let的过程中,会发现有说明提到:使用let进行的声明不会在作用域中进行提升。声明的代码在被运行之前是,声明并不存在。

举个栗子:

console.log(a);let a = 2;运行结果是:ReferenceError: Cannot access 'a' before initialization. //初始化前无法访问"a"

登录后复制

然后回到之前我运行的代码,将let换为var,返回的结果是undefined。

二者结合,再加上阅读我用了两个月的时间才理解let这篇文章,发现对let是否提升有了一个更新的认识。

作者把js变量分成三部分操作:创建(create)、初始化(initialize)和赋值(assign)

上面的操作之所以会有不同的响应并不是说let没有创建,而是有一个初始化的过程并没有执行。而在初始化之前使用变量,就会形成一个暂时性死区

经过var和let和function的测试可以总结到:

var的创建和初始化被提升,赋值不会被提升。

let的创建被提升,初始化和赋值不会被提升。

function的创建、初始化和赋值均会被提升。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!

以上就是javascript声明提升的介绍(附示例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2732177.html

(0)
上一篇 2025年3月8日 00:38:55
下一篇 2025年3月8日 00:39:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue-cli3.0安装与配置的方法教程(图文)

    本篇文章给大家带来的内容是关于vue-cli3.0安装与配置的方法教程(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近公司要开新项目,用vue-cli3.0配置,让我搞一搞,做个记录。 安装 首先你要升级到cl…

    2025年3月8日 编程技术
    200
  • JavaScript数据类型的介绍

    本篇文章给大家带来的内容是关于javascript数据类型的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近面试了三个开发,他们都没有说清楚JS的基本类型有哪些。而且往往错误的说了一些C语言的数据类型,例如in…

    编程技术 2025年3月8日
    200
  • Javascript的this的用法详解

    本篇文章给大家带来的内容是关于javascript的this的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在理解javascript的this之前,首先先了解一下作用域。 作用域分为两种: 1、词法作用域:引擎…

    编程技术 2025年3月8日
    200
  • react的setSate的异步问题的分析

    本篇文章给大家带来的内容是关于react的setsate的异步问题的分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在我们阅读文档的时候,大多都说react的setState是异步的,可是它真的是异步的吗?如果是,那我…

    编程技术 2025年3月8日
    200
  • es6-promise源码的分析

    本篇文章给大家带来的内容是关于es6-promise源码的分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 主要逻辑: 本质上还是回调函数那一套。通过_subscribers的判断完成异步和同步的区分。通过 resolv…

    编程技术 2025年3月8日
    200
  • Vue实现原理的简单介绍

    本篇文章给大家带来的内容是关于vue实现原理的简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用了Vue也有两年时间了,一直以来都是只知其然,不知其所以然,为了能更好的使用Vue不被Vue所奴役,学习一下Vue底层…

    编程技术 2025年3月8日
    200
  • JavaScript中的var和let的区别(代码示例)

    var和let都用于javascript中的函数声明,它们之间的区别是,var是函数作用域,let是块作用域。 可以说,与let相比,用var声明的变量在整个程序中都是定义的。 举个例子会更清楚地说明这种区别,如下: var的例子: 输入:…

    2025年3月8日 编程技术
    200
  • javascript中对象的介绍(附代码)

    本篇文章给大家带来的内容是关于javascript中对象的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 JavaScript 中的所有事物都是对象,并且JavaScript允许自定义对象。 对象拥有属性与方…

    编程技术 2025年3月8日
    200
  • JavaScript实现递归算法的方法介绍

    本篇文章给大家带来的内容是关于javascript实现递归算法的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 我们先来看一下定义。递归算法,是将问题转化为规模缩小的同类问题的子问题,每一个子问题都用一个同样的算法…

    2025年3月8日 编程技术
    200
  • jQuery的用法介绍(代码)

    本篇文章给大家带来的内容是关于jQuery的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 代码部分 window.jQuery=function(nodeOrSelector){ let nodes={}…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论