JavaScript中的作用域

【转载】

1、定义

作用域scope
1)某样事物执行、操作、拥有控制权的那么一个区域
2)编写程序时,程序之中变量的可见度;例如,一个函数能否使用另外一个函数所创建的变量。

2、例子演示

打开firefox,弹出firebug,点击console tab。在Firefox状态栏上面看到有>>>提示的地方就可以输入了。

function fn(){alert(11);}

然后回车。一切安然...你刚才做的实际上是定义了一个函数fn。接着试试:

fn();

然后回车。得到11的警告窗口,接着试试:

window.fn();
this.fn();

得到一样的结果吧?这是因为函数fn是window对象的一个方法,在第二行的"this"的作用域实际指向了window对象。不过多数情况中你不需要像这样window.myFunction(...)地调用函数,这样太麻烦了,程序员工作起来会很不方便。

window对象

window 对象总是存在的,你可理解其为一个浏览器窗口对象。它包含了其它所有的对象如document 和所有的全局变量。

你可以打开Firebug,切换到 Script 页面并在Firebug右侧的New watch expression... 里面输入window。观察window对象究竟有什么在里面。

接着,尝试找出我们之前定义过的fn函数。

另外,每个frame或iframe拥有其自身的window对象,其自身的全局空间。

理解作用域

接下的内容开始有点复杂了。切换到Firebug Console标签页然后输入:

var o1 = {testvar:22, fun:function() { alert(‘o1: ‘ + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert(‘o2: ‘ + this.testvar); }};

结果是什么?你声明了o1o2两个对象,分别都有一些属性和方法,但值不同。

接着试试:

fun();

window.fun();

this.fun();

出错了,是吧?因为window对象(等价于this)并没有fun的方法。试一试下面的:

o1.fun();
o2.fun();

22和33出来了?非常好!

接下来这部分的内容最复杂啦。基于这个原始的函数,如果对象的数量多的话,你必须为每个对象加上这个函数-明显是重复劳动了。这样说吧,o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。想象一下代码到处散布着this变量,怎么能不头疼?如果要将调用(执行)的o1.fun方法但this会执行o2,应该怎么实现呢?试一试下面的:

o1.fun.call(o2);

明白了吗?当执行o1的fun方法时你强行将变量this指向到o2这个对象,换句话说,更加严谨地说:o1.fun的方法在对象o2的作用域下运行。

当运行一个函数,一个对象的方法时,你可将作用域当作this值的变量

变量的可见度

变量的可见度和作用域的关系非常密切。我们已经了解到,可在任何对象的外部,声明变量,或在全局的函数(函数也是变量的一种)也可以,更严格说,它们是全局对象window的属性。 全局变量在任何地方都可见;无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量,其它函数也会得知这个值是修改过的。

对象可以有它自己的属性(像上面的testvar),这些属性允许从内部或是外部均是可见的。试:

alert(o1.testvar); // 从外部访问o1的属性testvar

从内部访问的演示可在两个测试对象的fun方法找到。

用关键字var在内部声明,相当于声明局部变量(局部声明也是在一条链上,即Scope Chain 作用域链上):

i = 44;
function fn2() {
    var i = 55;
    alert(i);
}
fn2();

将得到什么?对了,55。声明在函数fn2的变量i是一个本地变量(局部变量),和等于44的全局变量i 44没什么关系。But:

alert(i); 

这会访问全局变量i,显示44。

二.嵌套的函数(作用域链)

 1 var testvar = ‘window属性‘;
 2 var o3 = {
 3        testvar:‘3‘,
 4        testvar2:‘999‘,
 5        fun:function(){
 6           alert(‘o3: ‘+this.testvar);//‘o3 3‘
 7           var inner = function(){
 8               //当前对象的作用域+全局作用域 :闭包
 9              alert(‘o3-inner: ‘+this.testvar); //可以改成o3.testvar试下结果
10              alert(‘o3-inner: ‘+this.testvar2);
11              alert(‘o3-inner: ‘+testvar);
12           };
13           inner();        //window
14           //inner.call(this);    //o3+window
15           //inner.call(o2);    //o2+window
16        }
17     };
18     o3.fun();//可以调用非o3声明的成员变量

这里我们换了别的函数,这个函数与原先的函数几乎相似但区别是内部函数的写法。要注意的是内部函数运行时所在的作用域,和外部函数的作用域是不一样的。Ext可让你调用函数时指定函数的作用域,避免作用域的问题。

在此也先提一下闭包:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量(相信面试时好多小伙伴都会被问到闭包)

变量的声明

初始化变量时一定要加上“var”关键字,没有的话这就是一个全局变量。譬如,在下面的例子中,会有一个变量写在函数内部,然而你打算仅仅是声明局部的变量,但实际也可能出现覆盖全局变量的值的情形。在FIREBUG "DOM"的标签页中,你可通过检测“window”看到所有的全局变量。如果你发现有“k”或“x”变量那证明你把这个变量分配在一个不合适的作用域里面。见下例:

var i = 4;
var j = 5;
var k = 7;
var fn = function(){
   var i = 6;
   k = 8;//注意前面没有var 所以这句话的意思的把8赋予到变量k中去!
   alert(i);//6
   alert(j);//5
   alert(k+‘-1‘);//8-1
   x = 1;//这句的作用有两种情况,创建全部变量x或覆盖(overwrite)全部变量x
};
fn();
alert(k+‘-2‘);//8-2 (注意不是7-2)

与前面例子变化不大,另外注意的是函数内的k前面是没有var关键字的,所以这里不是声明局部变量,而是将某个值再次分配到k这个全局变量中。另外要注意的是,alert方法执行期间,参数i是当前能找到的局部变量,它的值是6,但参数j在当前作用域找不到,就沿着作用域链(scope chain向上查找,一直找到全局变量的那个j为止。

总结:

  1. 一切成员的作用域均为window
  2. 对象的作用域可以通过call传递
  3. 函数内部的变量声明:带var的为局部变量,不带的则为全局变量.
  4. 函数内部声明的函数,默认作用域指向window.
时间: 2024-10-10 12:39:40

JavaScript中的作用域的相关文章

javascript中函数作用域之”提升“

javascript中函数作用域之变量提升 当我们在函数内部用关键字var声明一个变量的时候,此变量的作用域限制在当前函数. 提升:在一个作用域内部,不管一个变量用var声明的位置在哪里,这个变量属于当前整个作用域,并且在当前作用域的任何位置都可以访问它.在javascript中,这种行为/现象称之为"提升",即一个变量在一个作用域的任何位置用var声明,javascript引擎都会把这些用var声明的变量"移动"到当前作用域的开始处. 谈到javascript这种

【翻译】JavaScript中的作用域和声明提前

原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执行结果是什么吗? 1 var foo=1; 2 function bar(){ 3 if(!foo){ 4 var foo=10; 5 } 6 alert(foo); 7 } 8 bar(); 如果你对弹出的结果是"10"感到惊讶的话,那么下面这段脚本会让你晕头转向的: 1 var a=1

JavaScript中的作用域链和闭包

JavaScript中的作用域链和闭包 2012-06-29 11:41 1878人阅读 评论(46) 收藏 举报 JavaScript中出现了一个以前没学过的概念——闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥

理解JavaScript中的作用域和上下文

JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScript中的很多强大的设计模式提供了坚实的基础. 然而这也概念也非常容易给开发人员带来困惑.为此,本文将全面的剖析这些概念,并阐述不同的设计模式是如何利用它们的. Statement 作者: 景庄,Web开发者,主要关注JavaScript.Node.js.React.Docker等. 原文地址: htt

JavaScript中的作用域与函数和变量声明的提升

  var foo = 1; function bar() {     if (!foo) {         var foo = 10;     }     alert(foo); } bar();//解释:js没有块级作用域,if switch while等不会有块级作用域 如果你对foo的值实际上为"10"而感到诧异的话,再看一下下面这个例子: var a = 1; function b() {     a = 10;     return;     function a() {

JavaScript中的作用域和作用域链(边学边写)[看着别人的博客纯手敲]

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域的工作原理.今天这篇文章对JavaScript作用域和作用域链简单的介绍,希望能帮助大家更好的学习JavaScript. JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 1.全局作用域(Global Scope

简单说说Javascript中的作用域链

    Javascript中作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.变量的作用域有全局作用域和局部作用域两种.当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象.这样由多个执行上下文的变量对象构成的链表就叫做作用域链. 看几个题目: A : 1 var a = 1 2 function fn1(){ 3 function fn2(){ 4 console.lo

浅说 JavaScript 中的作用域

今天遇到了一道题,说说你对 JavaScript 的作用域的理解 作用域有两种 全局作用域 顾名思义,在代码的任何地方都可以访问的变量用于全局作用域. 例如 未定义便直接赋值的变量 (function() { var a = b = 5;})(); console.log(a); // a is not defined console.log(b); // 5 所有 window 对象的属性,例如 window.name, window.location 登等. 2. 局部作用域 局部作用域和全

Javascript中的作用域问题

变量作用域 注意:JavaScript 预编译和执行的先后关系和特点 作用域定义 一个变量的作用域是程序源代码中定义这个变量的区域. 全局变量:拥有全局作用域,在JavaScript代码中的任何地方都是有定义的. 局部变量:作用域是局部性的,只在函数体内有定义,函数参数也是局部变量. 变量作用域优先级 在函数体内,局部变量优先级高于同名的全局变量,全局变量会被函数体内同名的局部变量或参数变量覆盖. 函数作用域 注意:在JavaScript中没有块级作用域概念,取而代之的是函数作用域. 定义 变量

JavaScript中的作用域 、作用域链和闭包

JavaScript中作用,作用域链和闭包详解 一.作用域在js中有全局变量和局部变量之分:比如var a = 1;function sum(){var b=1console.log(b) //1console.log(a) //2 }sum()console.log(a) //3console.log(b) //4 例子中 a 是全局变量,b是局部变量(定义在函数内部,只能在函数内部访问)所以第1行正确 函数内部也能访问全局变量 a所以第2行也能正确 第三行也正确.第4行有外部不能访问内部变量