1、变量提升

前言
hoist
vt.升起,提起;
vi.被举起或抬高;
n.起重机,升降机; 升起; <俚>推,托,举;
这篇文章不讲英语,但是对于某些英语单词找不到很好的翻译,一上来就列出“hoist”这个单词的释义是为了让大家有个准备,我在这里将此单词翻译为“提前”,是为了解释 JavaScript 语言中很“古怪”的一个特性。

变量声明“被提前”
JavaScript 的语法和 C 、Java、C# 类似,统称为 C 类语法。有过 C 或 Java 编程经验的同学应该对“先声明、后使用”的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错。然而,JavaScript 却能够在变量和函数被声明之前使用它们。下面我们就深入了解一下其中的玄机。

运行下边代码立马就报错,不过,这也正是我们期望的,因为 x 变量根本就没有定义过嘛!

console.log(x);

[Web浏览器] "Uncaught ReferenceError: x is not defined"

再来看看下面的代码,x 变量是在调用语句后面定义,为什么居然输出的是 undefined呢?!
这其实是 JavaScript 解析器搞的鬼,解析器将当前作用域内声明的所有变量和函数都会放到作用域的开始处,但是,只有变量的声明被提前到作用域的开始处了,而赋值操作被保留在原处。
上述代码对于解析器来说其实是如下这个样子滴,备注里是重点。
这就是为什么上述代码不报异常的原因!变量和函数经过“被提前”之后,x变量其实就被放在了调用函数的前面,根据 JavaScript 语法的定义,已声明而未被赋值的变量会被自动赋值为 undefined ,所以,打印 x变量的值就是 undefined

console.log(x);
var x=123;
/*
 JavaScript 解析器将上面这个变量相当于下边的代码:
 var x; //声明被提前到作用域开始处了!
 console.log(x);
 x=123; //赋值操作还在原地!
*/

[Web浏览器] "undefined"

其实这种影响还蛮烦人的,比如:
我们先声明了一个变量 x ,我们的本意是希望在第一次打印 name 变量时能够输出全局范围内定义的 x 变量,然后再在函数中定义一个局部 x 变量覆盖全局变量,最后输出局部变量的值。可是第一次输出的结果和我们的预期完全不一致,原因就是我们定义的局部变量在其作用域内被“提前”了,也就是变成了如下形式:

var x=123;
window.onload=function(){
    console.log(x);
    var x=456;
    console.log(x);

    /*
    var x;
    console.log(x);
    x=456;
    console.log(x);
    */
}

[Web浏览器] "undefined"
[Web浏览器] "456"

后语

由于 JavaScript 具有这样的“怪癖”,所以你会看到很多编码指南建议大家将变量声明放在作用域的最上方,这样就能时刻提醒自己注意了。

时间: 2024-12-20 13:08:30

1、变量提升的相关文章

js 变量提升+方法提升

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = 100; function t() { alert(a); var a = 10; } t(); //输出结果为undefine

JavaScript变量提升及作用域

今天在知乎看前端面试题的时候,看到这样的问题,发现自己懂的真的是太少了,看了给的例子,所以写一下自己的理解. 首先放一段代码: var v= "hello JavaScript"; alert(v); 很明显,这样的是会弹出对话框: 将alert(v)写到一个函数中: var v= "hello JavaScript"; function test(){ alert(v); }; test(); 这样弹出的结果肯定也是和第一个一样:那么下面这种方式输出的结果是什么?

js变量提升小记

作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升. 每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在着一定的陷阱.首先看一下下面一道题: <script> var str1 = "haha"; var str2 = "hehe"; function t1() { console.log(str1); console.log(str2); var str2

js变量作用域--变量提升

1.JS作用域 在ES5中,js只有两种形式的作用域:全局作用域和函数作用域,在ES6中,新增了一个块级作用域(最近的大括号涵盖的范围),但是仅限于let方式申明的变量. 2.变量声明 1 var x; //变量声明 2 var x=1; //变量声明并赋值 3 x = 1; // 定义全局变量并赋值 3.函数声明 function fn(){}; //函数声明并定义 var fn = function(){}; // 实际上是定义了一个局部变量fn和一个匿名函数,然后把这个匿名函数赋值给了fn

回归基础: JavaScript 变量提升

from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面. 当然了,函数声明也是可以被提升的.然后,函数表达式却没有提升. 原文:Back to Basics: JavaScript Hoisting 译文:回归基础: JavaScript 变量提升 变量声明是所有的编程语言中最基础部分之

JavaScript变量提升

此文章首发于segmentfault,若有转载引用,请务必私信告知,并注明出处:https://segmentfault.com/q/1010000005921127 变量的问题,莫过于声明和赋值两个步骤,而这两个步骤是分开的. 函数声明被提升时,声明和赋值两个步骤都会被提升,而普通变量却只能提升声明步骤,而不能提升赋值步骤. 变量被提升过后,先对提升上来的所有对象统一执行一遍声明步骤,然后再对变量执行一次赋值步骤.而执行赋值步骤时,会优先执行函数变量的赋值步骤,再执行普通变量的赋值步骤.当你明

JS 变量提升

1 var a = 1; 2 function foo() { 3 console.log(a); 4 var a = 2; 5 6 } 7 8 foo(); //undefined 根据变量提升机制,最后得出undefined; 变量提升是指在一个作用域中声明的变量,JS解析时会把变量声明提升至作用域内的第一行,也就是说上面那段代码等同于: 1 var a = 1; 2 function foo() { 3 var a; //被提升至作用域内第一行 4 console.log(a); 5 va

js变量提升和函数提升

变量,作为编程语言最基础的部分,每种语言的变量不尽相同,但又大径相庭.大部分编程语言的变量有块级作用域,如if.for.while... 但JavaScript不纯在块级作用域,而是函数作用域,并且有自己独有的特性--变量提升.(ES6新添加的let.const使其可以用块级作用域) 对于函数的变量访问时遵循作用域链的,即当前函数运行时会有一个当前作用域,当饮用某个变量时,会先查找当前作用域内是否存在该变量的定义,如果不存在则根据作用域链向上去查找父函数的作用域,有则拿来使用,没有则继续向上直到

Javascript作用域和变量提升

下面的程序是什么结果? [javascript] view plain copy var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么下面这个呢? [javascript] view plain copy var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); 结果是1. 吓你一跳

深入理解js的变量提升和函数提升

一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: 1 2 3 4 5 6 7 8 9 10 console.log(global); // undefined var global = 'global'; console.log(global); // global function fn () { console.log(a); // unde