理解 JavaScript 作用域

简介

JavaScript 有个特性称为作用域。尽管对于很多开发新手来说,作用域的概念不容易理解,我会尽可能地从最简单的角度向你解释它们。理解作用域能让你编写更优雅、错误更少的代码,并能帮助你实现强大的设计模式。

什么是作用域?

作用域是你的代码在运行时,各个变量、函数和对象的可访问性。换句话说,作用域决定了你的代码里的变量和其他资源在各个区域中的可见性。

为什么需要作用域?最小访问原则

那么,限制变量的可见性,不允许你代码中所有的东西在任意地方都可用的好处是什么?其中一个优势,是作用域为你的代码提供了一个安全层级。计算机安全中,有个常规的原则是:用户只能访问他们当前需要的东西。

想想计算机管理员吧。他们在公司各个系统上拥有很多控制权,看起来甚至可以给予他们拥有全部权限的账号。假设你有一家公司,拥有三个管理员,他们都有系统的全部访问权限,并且一切运转正常。但是突然发生了一点意外,你的一个系统遭到恶意病毒攻击。现在你不知道这谁出的问题了吧?你这才意识到你应该只给他们基本用户的账号,并且只在需要时赋予他们完全的访问权。这能帮助你跟踪变化并记录每个人的操作。这叫做最小访问原则。眼熟吗?这个原则也应用于编程语言设计,在大多数编程语言(包括 JavaScript)中称为作用域,接下来我们就要学习它。

在你的编程旅途中,你会意识到作用域在你的代码中可以提升性能,跟踪 bug 并减少 bug。作用域还解决不同范围的同名变量命名问题。记住不要弄混作用域和上下文。它们是不同的特性。

JavaScript中的作用域

在 JavaScript 中有两种作用域

全局作用域

局部作用域

当变量定义在一个函数中时,变量就在局部作用域中,而定义在函数之外的变量则从属于全局作用域。每个函数在调用的时候会创建一个新的作用域。

全局作用域

当你在文档中(document)编写 JavaScript 时,你就已经在全局作用域中了。JavaScript 文档中(document)只有一个全局作用域。定义在函数之外的变量会被保存在全局作用域中。

// the scope is by default global

var name = 'Hammad';

全局作用域里的变量能够在其他作用域中被访问和修改。

var name = 'Hammad';


console.log(name); // logs 'Hammad'


function logName() {

    console.log(name); // 'name' is accessible here and everywhere else

}


logName(); // logs 'Hammad'

局部作用域

定义在函数中的变量就在局部作用域中。并且函数在每次调用时都有一个不同的作用域。这意味着同名变量可以用在不同的函数中。因为这些变量绑定在不同的函数中,拥有不同作用域,彼此之间不能访问。

// Global Scope

function someFunction() {

    // Local Scope ##1

    function someOtherFunction() {

        // Local Scope ##2

    }

}


// Global Scope

function anotherFunction() {

    // Local Scope ##3

}

// Global Scope

块语句

块级声明包括if和switch,以及for和while循环,和函数不同,它们不会创建新的作用域。在块级声明中定义的变量从属于该块所在的作用域。

if (true) {

    // this 'if' conditional block doesn't create a new scope

    var name = 'Hammad'; // name is still in the global scope

}


console.log(name); // logs 'Hammad'

ECMAScript 6 引入了let和const关键字。这些关键字可以代替var。

var name = 'Hammad';


let likes = 'Coding';

const skills = 'Javascript and PHP';

和var关键字不同,let和const关键字支持在块级声明中创建使用局部作用域。

if (true) {

    // this 'if' conditional block doesn't create a scope


    // name is in the global scope because of the 'var' keyword

    var name = 'Hammad';

    // likes is in the local scope because of the 'let' keyword

    let likes = 'Coding';

    // skills is in the local scope because of the 'const' keyword

    const skills = 'JavaScript and PHP';

}


console.log(name); // logs 'Hammad'

console.log(likes); // Uncaught ReferenceError: likes is not defined

console.log(skills); // Uncaught ReferenceError: skills is not defined

一个应用中全局作用域的生存周期与该应用相同。局部作用域只在该函数调用执行期间存在。

上下文

很多开发者经常弄混作用域和上下文,似乎两者是一个概念。但并非如此。作用域是我们上面讲到的那些,而上下文通常涉及到你代码某些特殊部分中的this值。作用域指的是变量的可见性,而上下文指的是在相同的作用域中的this的值。我们当然也可以使用函数方法改变上下文,这个之后我们再讨论。在全局作用域中,上下文总是 Window 对象。

// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}

console.log(this);


function logFunction() {

    console.log(this);

}

// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}

// because logFunction() is not a property of an object

logFunction();

如果作用域定义在一个对象的方法中,上下文就是这个方法所在的那个对象。

class User {

    logName() {

        console.log(this);

    }

}


(new User).logName(); // logs User {}

(new User).logName()是创建对象关联到变量并调用logName方法的一种简便形式。通过这种方式你并不需要创建一个新的变量。

你可能注意到一点,就是如果你使用new关键字调用函数时上下文的值会有差异。上下文会设置为被调用的函数的实例。考虑一下上面的这个例子,用new关键字调用的函数。

function logFunction() {

    console.log(this);

}


new logFunction(); // logs logFunction {}

当在严格模式(strict mode)中调用函数时,上下文默认是 undefined。

执行环境

为了解决掉我们从上面学习中会出现的各种困惑,“执行环境(context)”这个词中的“环境(context)”指的是作用域而并非上下文。这是一个怪异的命名约定,但由于 JavaScript 的文档如此,我们只好也这样约定。

JavaScript 是一种单线程语言,所以它同一时间只能执行单个任务。其他任务排列在执行环境中。当 JavaScript 解析器开始执行你的代码,环境(作用域)默认设为全局。全局环境添加到你的执行环境中,事实上这是执行环境里的第一个环境。

之后,每个函数调用都会添加它的环境到执行环境中。无论是函数内部还是其他地方调用函数,都会是相同的过程。

每个函数都会创建它自己的执行环境。

当浏览器执行完环境中的代码,这个环境会从执行环境中弹出,执行环境中当前环境的状态会转移到父级环境。浏览器总是先执行在执行栈顶的执行环境(事实上就是你代码最里层的作用域)。

全局环境只能有一个,函数环境可以有任意多个。

执行环境有两个阶段:创建和执行。

创建阶段

第一阶段是创建阶段,是函数刚被调用但代码并未执行的时候。创建阶段主要发生了 3 件事。

创建变量对象

创建作用域链

设置上下文(this)的值

变量对象

变量对象(Variable Object)也称为活动对象(activation object),包含所有变量、函数和其他在执行环境中定义的声明。当函数调用时,解析器扫描所有资源,包括函数参数、变量和其他声明。当所有东西装填进一个对象,这个对象就是变量对象。

'variableObject': {

    // contains function arguments, inner variable and function declarations

}

作用域链

在执行环境创建阶段,作用域链在变量对象之后创建。作用域链包含变量对象。作用域链用于解析变量。当解析一个变量时,JavaScript 开始从最内层沿着父级寻找所需的变量或其他资源。作用域链包含自己执行环境以及所有父级环境中包含的变量对象。

'scopeChain': {

    // contains its own variable object and other variable objects of the parent execution contexts

}

执行环境对象

执行环境可以用下面抽象对象表示:

executionContextObject = {

    'scopeChain': {}, // contains its own variableObject and other variableObject of the parent execution contexts

    'variableObject': {}, // contains function arguments, inner variable and function declarations

    'this': valueOfThis

}

代码执行阶段

执行环境的第二个阶段就是代码执行阶段,进行其他赋值操作并且代码最终被执行。

词法作用域

词法作用域的意思是在函数嵌套中,内层函数可以访问父级作用域的变量等资源。这意味着子函数词法绑定到了父级执行环境。词法作用域有时和静态作用域有关。

function grandfather() {

    var name = 'Hammad';

    // likes is not accessible here

    function parent() {

        // name is accessible here

        // likes is not accessible here

        function child() {

            // Innermost level of the scope chain

            // name is also accessible here

            var likes = 'Coding';

        }

    }

}

你可能注意到了词法作用域是向前的,意思是子执行环境可以访问name。但不是由父级向后的,意味着父级不能访问likes。这也告诉了我们,在不同执行环境中同名变量优先级在执行栈由上到下增加。一个变量和另一个变量同名,内层函数(执行栈顶的环境)有更高的优先级。

闭包

闭包的概念和我们刚学习的词法作用域紧密相关。当内部函数试着访问外部函数的作用域链(词法作用域之外的变量)时产生闭包。闭包包括它们自己的作用域链、父级作用域链和全局作用域。

闭包不仅能访问外部函数的变量,也能访问外部函数的参数。

即使函数已经return,闭包仍然能访问外部函数的变量。这意味着return的函数允许持续访问外部函数的所有资源。

当你的外部函数return一个内部函数,调用外部函数时return的函数并不会被调用。你必须先用一个单独的变量保存外部函数的调用,然后将这个变量当做函数来调用。看下面这个例子:

function greet() {

    name = 'Hammad';

    return function () {

        console.log('Hi ' + name);

    }

}


greet(); // nothing happens, no errors


// the returned function from greet() gets saved in greetLetter

greetLetter = greet();


// calling greetLetter calls the returned function from the greet() function

greetLetter(); // logs 'Hi Hammad'

值得注意的是,即使在greet函数return后,greetLetter函数仍可以访问greet函数的name变量。如果不使用变量赋值来调用greet函数return的函数,一种方法是使用()两次()(),如下所示:

function greet() {

    name = 'Hammad';

    return function () {

        console.log('Hi ' + name);

    }

}


greet()(); // logs 'Hi Hammad'

共有作用域和私有作用域

在许多其他编程语言中,你可以通过 public、private 和 protected 作用域来设置类中变量和方法的可见性。看下面这个 PHP 的例子

// Public Scope

public $property;

public function method() {

  // ...

}


// Private Sccpe

private $property;

private function method() {

  // ...

}


// Protected Scope

protected $property;

protected function method() {

  // ...

}

将函数从公有(全局)作用域中封装,使它们免受攻击。但在 JavaScript 中,没有 共有作用域和私有作用域。然而我们可以用闭包实现这一特性。为了使每个函数从全局中分离出去,我们要将它们封装进如下所示的函数中:

(function () {

  // private scope

})();

函数结尾的括号告诉解析器立即执行此函数。我们可以在其中加入变量和函数,外部无法访问。但如果我们想在外部访问它们,也就是说我们希望它们一部分是公开的,一部分是私有的。我们可以使用闭包的一种形式,称为模块模式(Module Pattern),它允许我们用一个对象中的公有作用域和私有作用域来划分函数。

模块模式

模块模式如下所示:

var Module = (function() {

    function privateMethod() {

        // do something

    }


    return {

        publicMethod: function() {

            // can call privateMethod();

        }

    };

})();

Module 的return语句包含了我们的公共函数。私有函数并没有被return。函数没有被return确保了它们在 Module 命名空间无法访问。但我们的共有函数可以访问我们的私有函数,方便它们使用有用的函数、AJAX 调用或其他东西。

Module.publicMethod(); // works

Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined

一种习惯是以下划线作为开始命名私有函数,并返回包含共有函数的匿名对象。这使它们在很长的对象中很容易被管理。向下面这样:

var Module = (function () {

    function _privateMethod() {

        // do something

    }

    function publicMethod() {

        // do something

    }

    return {

        publicMethod: publicMethod,

    }

})();

立即执行函数表达式(IIFE)

另一种形式的闭包是立即执行函数表达式(Immediately-Invoked Function Expression,IIFE)。这是一种在 window 上下文中自调用的匿名函数,也就是说this的值是window。它暴露了一个单一全局接口用来交互。如下所示:

(function(window) {

    // do anything

})(this);

使用 .call(), .apply() 和 .bind() 改变上下文

Call 和 Apply 函数来改变函数调用时的上下文。这带给你神奇的编程能力(和终极统治世界的能力)。你只需要使用 call 和 apply 函数并把上下文当做第一个参数传入,而不是使用括号来调用函数。函数自己的参数可以在上下文后面传入。

function hello() {

    // do something...

}


hello(); // the way you usually call it

hello.call(context); // here you can pass the context(value of this) as the first argument

hello.apply(context); // here you can pass the context(value of this) as the first argument

.call()和.apply()的区别是 Call 中其他参数用逗号分隔传入,而 Apply 允许你传入一个参数数组。

function introduce(name, interest) {

    console.log('Hi! I'm '+ name +' and I like '+ interest +'.');

    console.log('The value of this is '+ this +'.')

}


introduce('Hammad', 'Coding'); // the way you usually call it

introduce.call(window, 'Batman', 'to save Gotham'); // pass the arguments one by one after the contextt

introduce.apply('Hi', ['Bruce Wayne', 'businesses']); // pass the arguments in an array after the context


// Output:

// Hi! I'm Hammad and I like Coding.

// The value of this is [object Window].

// Hi! I'm Batman and I like to save Gotham.

// The value of this is [object Window].

// Hi! I'm Bruce Wayne and I like businesses.

// The value of this is Hi.

Call 比 Apply 的效率高一点。

下面这个例子列举文档中所有项目,然后依次在控制台打印出来。

    

    Things to learn

    

Things to Learn to Rule the World

    

            

  • Learn PHP
  •         

  • Learn Laravel
  •         

  • Learn JavaScript
  •         

  • Learn VueJS
  •         

  • Learn CLI
  •         

  • Learn Git
  •         

  • Learn Astral Projection

  •     

            // Saves a NodeList of all list items on the page in listItems

            var listItems = document.querySelectorAll('ul li');

            // Loops through each of the Node in the listItems NodeList and logs its content

            for (var i = 0; i < listItems.length; i++) {

              (function () {

                console.log(this.innerHTML);

              }).call(listItems[i]);

            }


            // Output logs:

            // Learn PHP

            // Learn Laravel

            // Learn JavaScript

            // Learn VueJS

            // Learn CLI

            // Learn Git

            // Learn Astral Projection


    HTML文档中仅包含一个无序列表。JavaScript 从 DOM 中选取它们。列表项会被从头到尾循环一遍。在循环时,我们把列表项的内容输出到控制台。

    输出语句包含在由括号包裹的函数中,然后调用call函数。相应的列表项传入 call 函数,确保控制台输出正确对象的 innerHTML。

    对象可以有方法,同样函数对象也可以有方法。事实上,JavaScript 函数有 4 个内置方法:

    Function.prototype.apply()

    Function.prototype.bind() (Introduced in ECMAScript 5 (ES5))

    Function.prototype.call()

    Function.prototype.toString()

    Function.prototype.toString()返回函数代码的字符串表示。

    到现在为止,我们讨论了.call()、.apply()和toString()。与 Call 和 Apply 不同,Bind 并不是自己调用函数,它只是在函数调用之前绑定上下文和其他参数。在上面提到的例子中使用 Bind:

    (function introduce(name, interest) {

        console.log('Hi! I'm '+ name +' and I like '+ interest +'.');

        console.log('The value of this is '+ this +'.')

    }).bind(window, 'Hammad', 'Cosmology')();


    // logs:

    // Hi! I'm Hammad and I like Cosmology.

    // The value of this is [object Window].

    Bind 像call函数一样用逗号分隔其他传入参数,不像apply那样用数组传入参数。

    结论

    这些概念是 JavaScript 的基础,如果你想钻研更深的话,理解这些很重要。我希望你对 JavaScript 作用域及相关概念有了更好地理解。如果有东西不清楚,可以在评论区提问。

    作用域常伴你的代码左右,享受编码!

    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 151,688评论 1 330
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 64,559评论 1 273
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 101,749评论 0 226
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 42,581评论 0 191
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 50,741评论 3 271
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 39,684评论 1 192
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 31,122评论 2 292
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 29,847评论 0 182
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 33,441评论 0 228
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 29,939评论 2 232
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 31,333评论 1 242
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 27,783评论 2 236
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 32,275评论 3 220
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 25,830评论 0 8
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 26,444评论 0 180
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 34,553评论 2 249
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 34,618评论 2 249

    推荐阅读更多精彩内容

    • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
      悟名先生阅读 4,045评论 0 13
    • 介绍 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是...
      安_6dd1阅读 890评论 0 8
    • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
      苏黎九歌阅读 13,504评论 0 38
    • 老诗人走了 乡愁还在 一个时代结束 魂回归故里 在那一方的上空 长情地守护 不变的青山和绿水 聚溪而流入海 终盼望...
      木水爰阅读 179评论 0 2
    • 1.顺利通过三基考试 2.完成培训手册 3.读书报告 4.10+篇晨读感悟分享 5.精致一些 6.英语入门初级两本...
      努力努力再努力的菇凉阅读 175评论 0 0