《深入理解JavaScript》—— 变量:作用域、环境和闭包

(1) 静态性和动态性

你可以从两个角度来看一个程序:

1. 静态性(或词法性)

function f() {
    function g() {

    }
}

我们可以肯定函数g被函数f所包围在内部。

描述性的词法就像是静态声明,因为它们都涉及了程序的词法(单词、源码)。

2. 动态性

function g() {

}
function f() {
    g();
}

它表示一个程序子运行期间所变现出来的特性。当我们调用f(),他会调用g()。在执行期间,g被f调用代表了一种动态的关系。

(2) 背景知识: 变量的作用域

为了后面的学习,首先知道一下几个概念:

1. 变量的作用域。变量的作用域是指变量在何处可以被访问到。

function foo() {
    var x;
}

这里的x的直接作用域就是函数foo()。

2. 词法作用域

JavaScript中的变量都是有词法作用域的,因此一个程序的静态结构决定了一个变量的作用域(这个作用域并不会被函数从哪里调用所影响)。

3. 嵌套作用域

如果在一个变量的直接作用域中嵌套有多个作用域,那么这个变量在所有的这些作用域中都可以访问到。

function foo ( arg ) {
    function bar() {
        console.log( ‘arg : ‘ + arg );
    }
    bar();
}
console.log( foo(‘hello‘) );  // arg : hello

我们说嵌套,foo()是外部的作用域,而bar()是内部的作用域。

4. 覆盖

如果在一个作用域中声明了一个与外层作用域同名的变量,那么在这个内部作用域以及其内部的所有作用域中将会访问不到外面的变量。而内部的变量的变化并不影响外部的变量,当离开内部作用域,外部变量就又可以被访问了。

var x = ‘global‘;
function () {
    var x = ‘local‘;
    console.log(x);  // local
}
console.log(x);  // global

在这个函数中,全局变量x被本地的x所覆盖。

(3) 变量以函数为作用域

大多数主流语言都是块级作用域,但在JavaScript中,它的变量是函数级作用域的:只有函数可以产生新的作用域;代码块在作用域中是不起作用的。

(4) 变量声明的提前

JavaScript会提前所有的变量声明,它会把所有的声明移到直接作用域的最前面。很明显当我们试图在变量声明前来访问它会发生什么:

function f() {
    console.log(bar);  // undefined
    var bar = 1;
    console.log(bar);  // 1
}

因为实际上,在JavaScript中是这样执行f()的:

function f() {
    var bar;
    console.log(bar);  // undefined
    bar = 1;
    console.log(bar);  // 1
}

注:函数的声明也会提前,但是与变量截然不同,函数声明会被整体提前,而不仅仅是变量创建的那部分。

最好的方式是将所需要用到的变量声明放到函数的最开始,以避免因变量提前产生的误导。

(5) 通过IIFE引入新的作用域

这是JavaScript中最常见的一种模式。Ben Alman将它命名为“立即执行的函数表达式”。一般来说,它看起来是这样的:

( function () {

} ) ();

关于IIFE,我们有一些需要注意:

1. 它是立即执行的。函数结束的括号后面的括号是用来立即调用函数的。函数会立即执行。

2. 它必须是一个表达式。如果是一个语句,以function关键词开头,解析器会认为它是一个函数定义。但是一个函数声明并不会立即执行。因此,我们在语句开始前加了一个左括号告诉解析器function关键词是处于一个函数表达式的开头。在括号中,只存在表达式。

3. 别忘了后面的分号。

(6) IIFE变体

1. 前缀运算符

你可以用前缀运算符来强制执行一个表达式。例如逻辑非:

! function () {

}();

当然也可以用void。

使用前缀运算符的好处是忘了分号并不会造成任何问题。

2. 预内置表达式上下文

要注意的是,为IIFE强制执行表达式上下文并不是必须的,如果已经在一个表达式的上下文里,那么你可以不用括号或者前缀运算符。例如:

var File = function () {
    var UNTITLED = ‘Untitled‘;
    function Flie (name) {
        this.name = name || UNTITLED;
    }
    return Flie;
}();

3. 传参的IIFE

你可以使用参数的方式在IIFE的内部定义变量:

var x = 23;
(function (twice) {
    console.log(twice);  // 46
})(x*2);

(7) IIFE的应用

IIFE可以使你获取函数中的私有数据。你不必定义全局变量也可以严密地将函数本身的逻辑包装在一起。这样可以避免对全局命名空间的污染:

var setValue = function () {
    var preValue;
    return function ( value ) {
        if ( value !== preValue ) {
            console.log ( ‘value was changed‘ );
            preValue = value;
        }
    }
};

(8) 全局变量

包含整个程序的作用域叫做全局变量或程序的作用域。

注:最好避免创建全局变量。

(9) 全局对象

时间: 2024-10-18 01:23:51

《深入理解JavaScript》—— 变量:作用域、环境和闭包的相关文章

深入理解JavaScript变量作用域

JS变量作用域特点: a.JS变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数中都有定义. 1.作用域链 var rain = 1 ; function rainman(){ var man = 2 ; function inner(){ var innerVar = 4; alert(rain); } inner(); // 调用inner函数 } rainman(); // 调用rainman函数 观察alert(rain);这句

JavaScript变量作用域和内存问题(js高级程序设计总结)

1,变量 ECMAScript和JavaScript是等同的吗?个人认为是否定的.我的理解是这样的,ECMAScript是一套完整的标准或者说协议,而JavaScript是在浏览器上实现的一套脚本语言.也就是说,ECMAScript是JavaScript的父类标准.JavaScript是ECMAScript的具体实现.所有ECMAScript定义的数据类型或者语言特性实际上都是伪代码的形式规定的.当然如果可以,ECMAScript也可以有服务器实现,单片机实现(不一定恰当).如果说ECMAScr

第一百零六节,JavaScript变量作用域及内存

JavaScript变量作用域及内存 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 一.变量及作用域 1.基本类型和引用类型的值 ECMAScript变量可能包含两种不同的数据类型的值:基本类型值和引用类型值.基本类型值指的是那些保存在栈

javascript 变量作用域[初级简单]

通过一下3个小例子先去理解一下变量作用域的作用. 1----------------------------function aaa(){ var a=12; //局部变量:定义在一个函数里,只能在这个函数里用} function bbb(){ alert(a);//a is not defined} aaa();bbb();2-----------------------------var a; //全局变量:不定义在任何一个函数里,可以在任何地方去用 function aaa(){ a=12

JavaScript变量作用域(Variable Scope)和闭包(closure)的基础知识

在这篇文章中,我会试图讲解JavaScript变量的作用域和声明提升,以及许多隐隐藏的陷阱.为了确保我们不会碰到不可预见的问题,我们必须真正理解这些概念. 基本定义 作用范围是个“木桶”,里面装着变量.变量可以是局部或者全局性的,但在子范围中定义的变量是可以访问父范围的,这一点可能会造成一些困扰. 在JavaScript中使用"var"关键字声明变量.一旦在父范围宣声明,就会作为各自子范围的一部分.即在本地范围内有效,但本地定义的变量不可在全局范围内访问. 让我们来看一个例子.执行下面

JavaScript中作用域链和闭包

一.匿名函数 1.1 匿名函数的概念 ? 声明一个没有函数名的函数,就是匿名函数. ? 有函数名的函数就是具名函数. 看下面的代码: <script type="text/javascript"> /* //这里定义了一个函数,而且没有函数名.这样写语法是错误的,如果允许这样定义,那么根本就没有办法调用. //所以,我们可以用一个变量来存储一下 function(){ } */ // 声明了一个匿名函数,并把匿名函数赋值给变量f. 注意这个时候这个匿名函数并没有执行. va

JavaScript变量作用域

全部变量拥有全局作用域,局部变量拥有局部作用域(这里注意函数的参数也是局部变量) 1.在函数体内,局部变量的优先级高于同名的全局变量. 我的理解就是当你同时定义了同名的局部变量和全局变量时,函数体内返回的将是局部变量的值. 例如: var scope="我是全局变量"; function checkscope(){ var scope="我是局部变量"; console.log(scope); } checkscope(); 输出:我是局部变量 这里需要注意的是,在

javascript变量作用域与内存

第四章 变量作用域与内存基本类型 5种Undefined Null Boolean Number String 两种变量类型 基本类型与引用类型注意:String 再其他语言中是引用类型,再javascri中为基本类型即:这五种基本类型是按值访问的 引用类型是按照引用访问的 动态的属性对于一个引用类型,一个引用变量被赋值后,可以为其添加属性,也可以删除与修改其属性var o = new object();o.name = "qi"; //可以为引用变量添加属性 变量的复制基本类型的复制

深入浅出JavaScript变量作用域

在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域.赌王娱乐城 函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链 首先看下下面这段代码: <script type="text/javascript"> var rain = 1;     function rainman(){     var man = 2;     function inn

JavaScript 变量作用域 详解

变量作用域要点 - 在JavaScript中没有块级作用域,只有函数作用域 - 在函数体内,局部变量的优先级高于同名的全局变量 - 在全局作用域编写代码时可以不写var语句,但声明局部变量时必须使用var语句 - 函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,变量在声明之前已经可用JavaScript的这个特性被非正式的称为*声明提前* - 函数内的变量声明提前至函数体顶部,同时变量初始化留在原来的位置 - 但声明一个JavaScript全局变量时,实际上是定义了全局对象的一个属性