javascript中的变量作用域以及变量提升详细介绍


Posted in Javascript onOctober 24, 2013

变量作用域
“一个变量的作用域表示这个变量存在的上下文。它指定了你可以访问哪些变量以及你是否有权限访问某个变量。”

变量作用域分为局部作用域和全局作用域。

局部变量(处于函数级别的作用域)
不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的);当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题)。

函数级别作用域的一个例子:

var name = "Richard";function showName () {
    var name = "Jack"; // local variable; only accessible in this showName function
    console.log (name); // Jack
}
console.log (name); // Richard: the global variable

没有块级作用域:

var name = "Richard";
// the blocks in this if statement do not create a local context for the name variable
if (name) {
    name = "Jack"; // this name is the global name variable and it is being changed to "Jack" here
    console.log (name); // Jack: still the global variable
}// Here, the name variable is the same global name variable, but it was changed in the if statement
console.log (name); // Jack

//    不要忘记使用var关键字
//    如果声明一个变量的时候没有使用var关键字,那么这个变量将是一个全局变量!
// If you don't declare your local variables with the var keyword, they are part of the global scope
var name = "Michael Jackson";
function showCelebrityName () {
    console.log (name);
}
function showOrdinaryPersonName () {    
    name = "Johnny Evers";
    console.log (name);
}
showCelebrityName (); // Michael Jackson
// name is not a local variable, it simply changes the global name variable
showOrdinaryPersonName (); // Johnny Evers
// The global variable is now Johnny Evers, not the celebrity name anymore
showCelebrityName (); // Johnny Evers
// The solution is to declare your local variable with the var keyword
function showOrdinaryPersonName () {    
    var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable
    console.log (name);
}
//    局部变量优先级大于全局变量
//如果在全局作用域中什么的变量在局部作用域中再次声明,那么在局部作用域中调用这个变量时,优先调用局部作用域中声明的变量: 
var name = "Paul";
function users () {
    // Here, the name variable is local and it takes precedence over the same name variable in the global scope
var name = "Jack";
// The search for name starts right here inside the function before it attempts to look outside the function in the global scope
console.log (name); 
}
users (); // Jack

全局变量
所有在函数外面声明的变量都处于全局作用域中。在浏览器环境中,这个全局作用域就是我们的Window对象(或者整个HTML文档)。

每一个在函数外部声明或者定义的变量都是一个全局对象,所以这个变量可以在任何地方被使用,例如:

// name and sex is not in any function
var myName = "zhou";
var sex = "male";//他们都处在window对象中
console.log(window.myName); //paul
console.log('sex' in window); //true

如果一个变量第一次初始化/声明的时候没有使用var关键字,那么他自动加入到全局作用域中。
function showAge(){
  //age初始化时没有使用var关键字,所以它是一个全局变量
  age = 20;
  console.log(age);
}showAge();  //20
console.log(age); //因为age是全局变量,所以这里输出的也是20

setTimeout中的函数是在全局作用域中执行的

setTimeout中的函数所处在于全局作用域中,所以函数中使用this关键字时,这个this关键字指向的是全局对象(Window):

var Value1 = 200;
var Value2 = 20;
var myObj = {
  Value1 : 10,
  Value2 : 1,  caleculatedIt: function(){
    setTimeout(function(){
      console.log(this.Value1 * this.Value2);
    }, 1000);
  }
}
myObj.caleculatedIt(); //4000

为了避免对全局作用域的污染, 所以一般情况下我们尽可能少的声明全局变量。 
变量提升(Variable Hoisting)
所以的变量声明都会提升到函数的开头(如果这个变量在这个函数里面)或者全局作用域的开头(如果这个变量是一个全局变量)。我们来看一个例子:

function showName () {
console.log ("First Name: " + name);
var name = "Ford";
console.log ("Last Name: " + name);
}showName (); 
// First Name: undefined
// Last Name: Ford
// The reason undefined prints first is because the local variable name was hoisted to the top of the function
// Which means it is this local variable that get calls the first time.
// This is how the code is actually processed by the JavaScript engine:
function showName () {
    var name; // name is hoisted (note that is undefined at this point, since the assignment happens below)
console.log ("First Name: " + name); // First Name: undefined
name = "Ford"; // name is assigned a value
// now name is Ford
console.log ("Last Name: " + name); // Last Name: Ford
}

函数声明会覆盖变量声明
如果存在函数声明和变量声明(注意:仅仅是声明,还没有被赋值),而且变量名跟函数名是相同的,那么,它们都会被提示到外部作用域的开头,但是,函数的优先级更高,所以变量的值会被函数覆盖掉。

// Both the variable and the function are named myName
var myName;?
function myName () {
console.log ("Rich");
}// The function declaration overrides the variable name
console.log(typeof myName); // function

但是,如果这个变量或者函数其中是赋值了的,那么另外一个将无法覆盖它:

// But in this example, the variable assignment overrides the function declaration
var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration.function myName () {
console.log ("Rich");
}
console.log(typeof myName); // string

最后一点, 在严格模式下,如果没有先声明变量就给变量赋值将会报错!

Javascript 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
javascript简单链式调用案例分析
May 10 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 #Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 #Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 #Javascript
JS 获取滚动条高度示例代码
Oct 24 #Javascript
通过javascript把图片转化为字符画
Oct 24 #Javascript
js编写trim()函数及正则表达式的运用
Oct 24 #Javascript
原生JS实现加入收藏夹的代码
Oct 24 #Javascript
You might like
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python 5个实用的技巧
2020/09/27 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
毕业生自荐书
2013/12/18 职场文书
法制宣传标语
2014/06/23 职场文书
python实现批量移动文件
2021/04/05 Python
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
教你一步步实现一个简易promise
2021/11/02 Javascript