Javascript变量函数声明提升深刻理解

目录
  • 前言:
  • 变量提升
  • 函数提升
  • 为什么要提升?
  • 最佳实践
  • 总结

前言:

Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样。变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的知识点之一。在这里分享,不是什么新鲜的内容,只是作为一个自己的学习笔记,加速对其的理解。

变量知道是ES5中的 var 和 function 中的产物,ES6中的 let 、 const 则不存在有变量提升。

变量提升

JavaScript引擎的工作方式是先解析代码,获取所有声明的变量和函数,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(Hoisting)。

这里说的变量声明,包括函数的声明,接下来看看代码:

function hoistingVariable() {
    if (!devpoint) {
        var devpoint = 1;
    }
    console.log(devpoint);
}
hoistingVariable();

// 下面是输出结果
// 1

变量所处的作用域为函数体内,解析的时候查找该作用域中的声明的变量,devpoint在if虽然未声明,根据变量提升规则,变量的声明提升到函数的第一行,但未赋值。

实际的效果等同于下面的代码:

function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
        devpoint = 1;
    }
    console.log(devpoint);
}
hoistingVariable();

接下再增加一些迷惑的代码,如下:

var devpoint = "out";
function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
hoistingVariable();
console.log(devpoint);

// 下面是输出结果
// in
// out

对于同名变量声明,个人理解是先找作用域,就近原则,函数体内声明(前提是有声明 var ),就只找函数内查找,并不受函数外声明的影响。

把上面函数体内的声明语句去掉,输出情况也就不一样。

var devpoint = "out";
function hoistingVariable() {
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
hoistingVariable();
console.log(devpoint);

// 下面是输出结果
// out
// out

函数体内声明语句去掉后,这是就需要去函数体外找声明,根据这一条,函数外声明并赋值了,函数体内的 if 语句就不会执行。

下面代码调整了赋值的顺序,代码如下:

var devpoint;
function hoistingVariable() {
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
devpoint = "out";
hoistingVariable();
console.log(devpoint);

// 下面是输出结果
// out
// out

根据上面说的,函数体内的变量是外部声明的,但未赋值,函数是提升了,并为执行。在函数执行前赋值给devpoint,再执行就变成了out

函数提升

上面介绍过,变量提升,同样包括函数的声明,不同方式的函数声明,执行也有所不同。这种问题就是直接上代码。

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }
}
hoistingFun();

// 下面是输出结果
// hello

上面的代码能够正常运行是因为函数声明被提升,函数 hello 被提升到顶部,运行效果跟下面代码一致:

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    hello();
}
hoistingFun();

// 下面是输出结果
// hello

如果在同一个作用域中对同一个函数进行声明,后面的函数会覆盖前面的函数声明。

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }

    function hello() {
        console.log("hello2");
    }
}
hoistingFun();

// 下面是输出结果
// hello2

两个函数声明都被提升了,按照声明的顺序,后面的声明覆盖前面的声明。

函数声明常见的方式有两种,还有一种是匿名函数表达式声明方式,这种方式可以视为是变量的声明来处理,当作用域中有函数声明和变量声明时,函数声明的优先级最高,将上面的代码更改后,结果就不一样了,

如下:

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }

    var hello = function () {
        console.log("hello2");
    };
}
hoistingFun();

// 下面是输出结果
// hello

上面的代码,编译逻辑如下:

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    hello();

    hello = function () {
        console.log("hello2");
    };
}
hoistingFun();
// 下面是输出结果
// hello

接下来再来看下,外部使用变量声明,函数体内使用函数声明的示例:

var hello = 520;

function hoistingFun() {
    console.log(hello);

    hello = 521;
    console.log(hello);
    function hello() {
        console.log("hello");
    }
}
hoistingFun();
console.log(hello);
// 下面是输出结果
// [Function: hello]
// 521
// 520

上面说过,在函数体内声明过的变量或者函数,只作用于函数体内,受限于函数体内,不受外部声明的影响,相当于函数体内作用域与外部隔离。

上面代码的编译后的逻辑如下:

var hello = 520;
function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    console.log(hello);

    hello = 521;
    console.log(hello);
}
hoistingFun();
console.log(hello);

在变量声明中,函数的优先权最高,永远提升到作用域最顶部,然后才是函数表达式和变量的执行顺序。

来看下面的代码:

var hello = 520;
function hello() {
    console.log("hello");
}
console.log(hello);
// 下面是输出结果
// 520

根据函数声明优先级最高的原则,上面代码的执行逻辑如下:

function hello() {
    console.log("hello");
}
hello = 520;
console.log(hello);

为什么要提升?

至于为什么要提升,这里不做详细介绍,提供一些参考文章,有兴趣的可以去查阅

最佳实践

现代Javascript中,已经有很多方式避免变量提升带来的问题,使用letconst替代var,使用eslint等工具避免变量重复定义,在一些前端开发团队中,可以针对团队做一些规范化的脚手架,如项目初始化强制项目的目录、eslint的最佳配置等,用程序规范的过程比人督促要靠谱。

下面的代码可以看到const 和 var 声明的变量的区别,const 声明的变量不会提升,具体的区别可以查阅《javascript 变量声明 var,let,const 的区别》

console.log("1a", myTitle1);
if (1) {
    console.log("1b", myTitle1);
    var myTitle1 = "devpoint";
}
if (1) {  // 这里的代码是有错误无法执行
    console.log("3c", myTitle2);
    const myTitle2 = "devpoint";
}
// 下面是输出结果
// 1a undefined
// 1b undefined

总结

通过自我学习变量函数提升,加深了对其理解,对于前端面试所涉及的类似问题可以自信的给出答案,算是一种收获。

到此这篇关于Javascript变量函数声明提升加深理解的文章就介绍到这了,更多相关JS变量声明内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 区别JavaScript函数声明与变量声明

    今天,又由一到题目引发了一场我跟JS基础的较量:首先是 var getName = function(){alert(1)}; function getName(){alert(2)}; getName();// 1 or function getName(){alert(2)}; var getName = function(){alert(1)}; getName();// 1 为什么我调换声明顺序,结果还是输出以 var 形式声明的函数的值? 有人回答我说 "啊,变量提升呀..."

  • javascript 变量声明 var,let,const 的区别

    目录 作用域(Scope)是什么 var 声明 提升(Hoisting) let 声明 const 声明 作用域(Scope)是什么 作用域是程序的执行环境,它包含在当前位置可访问的变量和函数.在 ES5 语法中,有全局作用域和局部作用域,ES6 则新增了块级作用域. 全局作用域是最外层的作用域,在函数外面定义的变量属于全局作用域,可以被任何其他子作用域访问.在浏览器中,window 对象就是全局作用域.在编写前端代码过程中,其中有一条优化规则就是少使用全局变量,因为全局变量容易导致程序BUG,

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • 浅析JavaScript中的变量提升

    目录 前言: 函数提升 var变量提升 let & const提升 Class提升 前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { console.log('Hi there!') } name = 'John Doe' console.log(name) // John Doe var name 然而JavaScript并不会移动你的

  • Javascript变量函数声明提升深刻理解

    目录 前言: 变量提升 函数提升 为什么要提升? 最佳实践 总结 前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样.变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的

  • 跟我学习javascript的var预解析与函数声明提升

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错.然而,JavaScript 却能够在变量和函数被声明之前使用它们.下面我们就深入了解一下其中的玄机. 先来看一段代码: (function() { console.log(noSuchVariable);//ReferenceError: noSuchVari

  • JavaScript中函数声明优先于变量声明的实例分析

    复制代码 代码如下: var a; // 声明一个变量,标识符为a function a() { // 声明一个函数,标示符也为a } alert(typeof a); 显示的是"function",即function的优先级高于var. 有人觉得这是代码顺序执行的原因,即a被后执行的funcion覆盖了.好,将它们调换下. 复制代码 代码如下: function a() { } var a; alert(typeof a); 结果仍然显示的是"function"而

  • JavaScript中函数声明与函数表达式的区别详解

    前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

  • 从JavaScript纯函数解析最深刻的函子 Monad实例

    目录 序言 纯函数 输入 & 输出 副作用 “纯”的好处 自文档化 组合函数 引用透明性 其它 无形参风格 Monad 结语 序言 转眼间,来到专栏第 3 篇,前两篇分别是: 从历史讲起,JavaScript 基因里写着函数式编程 从柯里化讲起,一网打尽 JavaScript 重要的高阶函数 建议按顺序“食用”.饮水知其源,由 lambda 演算演化而来的闭包思想是 JavaScript 写在基因里的东西,闭包的“孪生子”柯里化,是封装高阶函数的利器. 当我们频繁使用高阶函数.甚至自己不断在封装

  • Javascript变量函数浅析

    一.变量 在javascript变量中可以存放两种类型的值:原始值和引用值. 原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内. 引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值. 在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String. 引用类型其实就是对象,类似其他语言中类实例的概念. 复制代码 代码如下: var b = true; // 存储在栈上 var num = 20; //存储在栈上 var b

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • JavaScript 函数表达式与函数声明的用法及区别

    目录 前言 什么是函数声明? 函数声明的好处 什么是函数表达式? 函数表达式的好处 函数表达式和函数声明之间的区别 函数表达式中的作用域 如何在表达式和声明之间进行选择 何时选择函数声明与函数表达式 在以下情况下使用函数声明 在以下情况下使用函数表达式 前言 在 JavaScript 中创建函数有两种方法:函数表达式和函数声明.在本文中,将讨论何时使用函数表达式与函数声明,并解释它们之间的区别. 函数声明已经使用了很长时间,但函数表达式已经逐渐占据主导地位.函数表达式和函数声明之间有一些关键区别

随机推荐