JavaScript的变量声明与声明提前用法实例分析

本文实例讲述了JavaScript的变量声明与声明提前用法。分享给大家供大家参考，具体如下：

JavaScript的变量声明

JavaScript的变量声明语句无论出现在何处，都会先于其他代码首先被执行。使用var关键词声明变量的作用域是当前的执行上下文，有可能是外围函数，或者，当变量声明在函数体之外时，则为全局变量。

向一个未声明变量赋值会隐式地将其创建为一个全局变量（它变成了全局对象的一个属性）。声明变量与未声明变量之间的区别为：

1. 声明变量的作用范围限定在其执行的上下文环境中。未声明的变量总是全局的。

function x() {
 y = 1;  // Throws a ReferenceError in strict mode
 var z = 2;
}
x();
console.log(y); // logs "1"
console.log(z); // Throws a ReferenceError: z is not defined outside x

2. 声明变量在其他代码执行之前创建。未声明的变量在其赋值语句执行之前都是不存在的。

console.log(a);        // Throws a ReferenceError.
console.log('still going...'); // Never executes.
var a;
console.log(a);        // logs "undefined" or "" depending on browser.
console.log('still going...'); // logs "still going...".

3. 声明变量是执行上下文（函数或者全局）的不可配置的属性。而未声明变量是可配置的（例如，可以被delete）

var a = 1;
b = 2;
delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b;
console.log(a, b); // Throws a ReferenceError.
// The 'b' property was deleted and no longer exists.

由于以上三点不同，使用未声明变量可能会带来意想不到的结果。因此建议无论是全局变量还是局部变量，在使用前都要声明。在ECMAScript5的严格模式下，对未声明变量赋值会抛出一个错误。

声明提前（var hoisting）：

JavaScript的函数作用域是指在函数内声明的所有变量在函数体内是始终可见的。有趣的是，这意味着变量甚至可以先使用，后声明。

JavaScript的这一特性被非正式地称为声明提前（hoiosting），即JavaScript函数中所有变量的声明都被“提前”至函数体的顶部。

（“声明提前”的操作是在JavaScript引擎的“预编译”时进行的，即在代码运行之前）

例如下面的JavaScript代码：

var scope = "global";
function f() {
  alert(scope);
  var scope = "local"; //覆盖全局变量
  alert(scope);
}

读者可能误以为函数f的第一个alert会输出"global"，因为代码此时还没有执行到var语句声明局部变量的代码行。

其实不然，由于函数作用域的特性，局部变量在整个函数体内始终是有定义的，亦即，在函数体内局部变量覆盖了同名的全局变量。尽管如此，只有程序执行到var语句时，局部变量才会被赋值。因此上述过程等价于，将函数体内的变量声明“提前”至函数体顶部，而变量的初始化保留在原处。

function f() {
  var scope; //函数体顶部声明局部变量
  alert(scope); //输出"undefined"
  scope = "local"; //变量初始化赋值
  alert(scope); //输出"local"
}

基于此原因，建议将变量的声明都放在作用域的顶部（全局代码的顶端，或者函数代码的开始），从而清楚地区分变量的作用域，哪些是函数作用域，哪些在作用域链上解析。

参考资料：

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

2. 《JavaScript权威指南》 第6版 中文版

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JAVASCRIPT函数作用域和提前声明 分享

    一些语言如C.java都有块级作用域,即花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的,但是javascript没有块级作用域.javascript使用函数作用域,即变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的,也即函数内声明的所有变量在函数体内始终是可见的.这样就意味着变量在声明之前就可以使用,这个特性被称为"声明提前",即javascript函数里声明的所有变量都被提前至函数的顶部.来看个例子. 复制代码 代码如下: var

  • 一个JavaScript变量声明的知识点

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有坐mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行讨论.发现虽然很基础,但是通过讨论收获不少,分享出来.当然在有开发经验的开发者看来,这些都是学习JavaScript最基础的东西.因为平时都是用jQuery或者第三JS组件,所以对JavaScript基础学习不够重视.题目如下,问题是:2次alert分别输出什么结果? 复制代码 代码如下: <scr

  • JavaScript变量声明var,let.const及区别浅析

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. function a() { // 当a被调用时, var y = 2; // y被声明成函数a作用域的变量,然后赋值成2. console.log(x, y); // 0 2 function b() { // 当b被调用时, x = 3; // 全局变量x被赋值为3,不生成全局变量. y = 4;

  • js变量声明var使用与不使用的区别详解

    一.区分显示的声明与隐式声明(var) JS中变量声明分显式声明和隐式声明. var name = 'muzidigbig';//显示声明 name = 'muzidigbig';//隐式声明(为全局变量的一个属性) 在函数中使用var关键字进行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量:而没有用var关键字,使用直接赋值方式声明的是全局变量(全局对象属性). // name = 'muzidigbig';//隐式声明(为全局变量的一个属性) console.log(name

  • JavaScript中提前声明变量或函数例子

    JavaScript中提前声明变量或函数例子

    如题所示,看下面的示例. (可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入) (使用技巧: 控制台输入时Shift+Enter可以中途代码换行) 复制代码 代码如下: var name = "xiaoming"; (function(){   var name = name || "小张";   console.info(name); })();// 小张 (function(){   name = name

  • JavaScript中变量声明有var和没var的区别示例介绍

    本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部,有var和没var声明的变量是不一样的.有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口东东. 在全局作用域内声明变量时,有var 和没var看起来都一样,我们知道,声明的全局变量,就是window的属性,究竟是否一样,我们通过ECMAScrpit5提供

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

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

  • 深入理解javascript变量声明

    相对于C/C++来说,ECMAScript里的for循环并不能创建一个局部的上下文. 复制代码 代码如下: for (var k in {a: 1, b: 2}) {   alert(k); } alert(k); // 尽管循环已经结束但变量k依然在当前作用域 任何时候,变量只能通过使用var关键字才能声明.   上面的赋值语句:   a = 10; 这仅仅是给全局对象创建了一个新属性(但它不是变量)."不是变量"并不是说它不能被改变,而是指它不符合ECMAScript规范中的变量概

  • 区别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的变量声明与声明提前用法实例分析

    本文实例讲述了JavaScript的变量声明与声明提前用法.分享给大家供大家参考,具体如下: JavaScript的变量声明 JavaScript的变量声明语句无论出现在何处,都会先于其他代码首先被执行.使用var关键词声明变量的作用域是当前的执行上下文,有可能是外围函数,或者,当变量声明在函数体之外时,则为全局变量. 向一个未声明变量赋值会隐式地将其创建为一个全局变量(它变成了全局对象的一个属性).声明变量与未声明变量之间的区别为: 1. 声明变量的作用范围限定在其执行的上下文环境中.未声明的

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • javascript与jquery中的this关键字用法实例分析

    本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

  • JavaScript 浏览器对象模型BOM原理与常见用法实例分析

    JavaScript 浏览器对象模型BOM原理与常见用法实例分析

    本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法.分享给大家供大家参考,具体如下: 什么是BOM BOM:Browser Object Model,浏览器对象模型 从上图也可以看出: window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. DOM是BOM的一部分. window对象: window对象是JavaScript中的顶级对象. 全局变量.自定义函数也是window对象的属性和方法. window对象下的属性和方法

  • javascript设计模式 – 职责链模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 职责链模式原理与用法.分享给大家供大家参考,具体如下: 介绍:很多情况下,在一个软件系统中可以处理某个请求的对象不止一个.例如一个网络请求过来,需要有对象去解析request Body,需要有对象去解析请求头,还需要有对象去对执行对应controller.请求一层层传递,让每一个对象都基于请求完成自己的任务,然后将请求传递给下一个处理程序.是不是感觉有点中间件的感觉. 定义:职责链就是避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求.将

  • javascript设计模式 – 享元模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 享元模式原理与用法.分享给大家供大家参考,具体如下: 介绍:在我们日常开发中需要创建很多对象,虽然垃圾回收机制能帮我们进行回收,但是在一些需要重复创建对象的场景下,就需要有一种机制来进行优化,提高系统资源的利用率. 享元模式就是解决这类问题,主要目的是减少创建对象的数量.享元模式提倡重用现有同类对象,如未找到匹配的对象则创建新对象 定义:运用共享技术有效的支持大量细粒度对象的复用.系统只适用少量的对象,而这些对象都很相似,状态变化很小,可以实现对象

  • javascript设计模式 – 中介者模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 中介者模式原理与用法.分享给大家供大家参考,具体如下: 介绍:在前端开发的过程中,组件与组件之间的通讯特别常见,一个组件的change需要引起数个组件的change,这就需要组件与组件之间存在复杂的多对多关系链.如何来减轻维护这些关系的复杂度,让组件和组件之间实现低耦合?这就是我们即将介绍的中介者模式. 定义:用一个中介对象(中介者)来封装一系列的对象交互,中介者使个对象不需要显式的相互引用,从而使其耦合松散,而且可以独立的改变他们之间的交互.中介

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

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

  • Python iter()函数用法实例分析

    本文实例讲述了Python iter()函数用法.分享给大家供大家参考,具体如下: python中的迭代器用起来非常灵巧,不仅可以迭代序列,也可以迭代表现出序列行为的对象,例如字典的键.一个文件的行,等等. 迭代器就是有一个next()方法的对象,而不是通过索引来计数.当使用一个循环机制需要下一个项时,调用迭代器的next()方法,迭代完后引发一个StopIteration异常. 但是迭代器只能向后移动.不能回到开始.再次迭代只能创建另一个新的迭代对象. 反序迭代工具:reversed()将返回

  • Python callable()函数用法实例分析

    本文实例讲述了Python callable()函数用法.分享给大家供大家参考,具体如下: python中的内建函数callable( ) ,可以检查一个对象是否是可调用的 . 对于函数, 方法, lambda 函数式, 类, 以及实现了 _ _call_ _ 方法的类实例, 它都返回 True. >>> help(callable) Help on built-in function callable in module __builtin__: callable(...) calla

随机推荐