首页 web前端 js教程 Javascript中的作用域和上下文深入理解_javascript技巧

Javascript中的作用域和上下文深入理解_javascript技巧

May 16, 2016 pm 03:51 PM
javascript 上下文 作用域

概述

Javascript中的作用域和上下文的实现是Javascript语言独有的特性,从某种程度上来说,Javascript语言是十分灵活的。Javascript中的函数可以采用各种各样的上下文,作用域也可以被封装和保存。正是由于这些特性,Javascript中也提供了很多很有用的设计模式。然而,作用域和上下文也是Javascript程序员在开发中经常迷惑的地方。
下面会向大家介绍Javascript中作用域和上下文的概念,以及它们的不同。

作用域 VS 上下文

首先要说明的很重要的一点是作用域和上下文并不是同一个概念,它们指代的并不是同一个东西。作为一个前端的菜逼,经常会看到一些文章把这两个概念弄混,结果有些东西越看越不明白。这两个概念貌似被混淆了很长一段时间了。因此,查了很多资料,简单说明下这两个概念。:stuck_out_tongue_closed_eyes:
在Javascript中,当一个函数被调用时都会有一个作用域和上下文和这个函数绑定在一起。从根本上来说,作用域是基于函数的而上下文是基于对象的。换句话说,作用域适用于函数被调用时函数中变量的访问权限。上下文通常是指“this”关键字的值,“this”是拥有当前执行代码的对象的引用。

变量作用域

变量可以被定义在局域或全局作用域中,分别称为局部变量和全局变量。全局变量是指在函数体外声明的变量,在程序的任何地方都可以访问全局变量。局部变量是指在函数体内定义的变量,它仅可以在函数体内或者嵌套的函数内被访问,并且不能在函数外部被访问。
Javascript目前并不支持块级作用域(在if、switch、for等语句中定义的变量)。这意味着在块内定义的变量,在块外也可以访问。但是,在ES6中,我们可以使用“let”关键字定义块级作用域。
关于作用域的内容,大家可以查下别的资料,这部分内容相对简单些。

“this”上下文

上下文(context)通常取决于函数被调用的方式。当函数作为对象的方法被调用时,“this”指代的是调用该函数的对象。

复制代码 代码如下:

var obj={
    foo:function (){
        console.log(this === obj);
    }
};
obj.foo();   //输出true

同样,当我们使用“new”关键字创建新对象时,this引用的是新创建的对象。
复制代码 代码如下:

function foo(){
    console.log(this);
}
foo();         //输出window
var obj=new foo();     //输出 foo {}

有一点需要注意的是,当全局作用域中的函数被被调用时,this引用的是全局对象,在浏览器环境中指的就是window。但是,如果在严格模式下运行代码时,“this”被设置为“undefined”
执行上下文(Execution Context)

Javascript是单线程的语言,这也就是说Javascript在浏览器中运行时,一次只能做一件事情,其他的事情将被方法队列中,等待被处理。

1.当Javascript代码文件被浏览器载入后,默认最新进入的是一个全局的执行上下文。当在全局上下文中调用一个函数时,程序留就进入该被调用函数内,此时Javascript引擎就会为该函数创建一个新的执行上下文,并且将其压入到执行上下文堆栈的顶部。浏览器总是执行当前在堆栈顶部的上下文,一旦执行完毕,该上下文就会从堆栈顶部被弹出,然后,进入其下的上下文执行代码。这样,堆栈中的上下文就会被依次执行并且弹出堆栈,直到回到全局的上下文。

2.一个执行上下文可以被分为两个阶段:创建阶段和执行阶段。在创建阶段,javascript解释器首先会创建一个变量对象(也成为“活动对象”,activation object)。活动对象由变量,函数声明和参数组成。在这个阶段,函数的作用域链被初始化,this引用的对象也被确定。接下来就是执行阶段,在这个阶段,代码被解释并执行。
在Javascript代码中,可以有任意多个函数上下文,我们已经知道,当函数被调用时,Javascript解释器就会创建一个新的上下文,同时会创建一个私有的作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。

3.通过上面的解释,我们对函数的“执行上下文”有了一个基本的概念,但是这里也是大家最容易迷惑的一个地方。Javascript中的“执行上下文”主要是指作用域,而不是上面第四小节中指的“this上下文”。类似的容易混淆的概念在Javascript中还有很多,但是我们只要弄清楚了每个概念所指代的具体对象,就不会再迷惑,因此,这里也希望大家能够真正的区分开“执行上下文”和“this上下文”。

简单的一句话概括来说,执行上下文是与作用域相关的概念,虽然这样说可能不太严谨。

作用域链

对每一个执行上下文来说,都有一个作用域连跟它绑定在一起。作用域链包含了执行上下文堆栈中的执行上下文活动对象(activation object,听起来有点绕口)。作用域链决定了变量的访问和标识符的解析。

代码示例:

复制代码 代码如下:

function first(){
    second();
    function second(){
        third();
        function third(){
            fourth();
            function fourth(){
                //代码
            }
        }
    }
}
first();

执行上面的代码,嵌套的函数都会被执行。就上面的代码来说,也会形成一个作用域链,作用域链从顶部到底部的顺序为:fourth, third, second, first, global。函数fourth可以访问全局作用域中的变量,并且可以访问函数third, second, first中定义的任何变量。
有一点需要注意的是,在函数体内,局部变量的优先级高于同名的全局变量。如果在函数内声明的局部变量或函数参数中带有的变量和全局变量重名,那么全局变量就被局部变量所覆盖。
简单来说,每次我们尝试访问一个变量时,程序都会在当前函数作用域内查找变量,如果找不到就沿着作用域链到该函数的上层去查找,直到找到该变量为止,如果找不到则返回undefined。

总结

这篇文章介绍了javascript中上下文和作用域的相关概念,javascript中还有几个比较重要的概念,如闭包等,这些在以后自己弄明白了会写成文章~~

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

c语言中typedef struct的用法 c语言中typedef struct的用法 May 09, 2024 am 10:15 AM

typedef struct 在 C 语言中用于创建结构体类型别名,简化结构体使用。它通过指定结构体别名将一个新的数据类型作为现有结构体的别名。优点包括增强可读性、代码重用和类型检查。注意:在使用别名前必须定义结构体,别名在程序中必须唯一并且仅在其声明的作用域内有效。

java中的variable expected怎么解决 java中的variable expected怎么解决 May 07, 2024 am 02:48 AM

Java 中的变量期望值异常可以通过以下方法解决:初始化变量;使用默认值;使用 null 值;使用检查和赋值;了解局部变量的作用域。

js中闭包的优缺点 js中闭包的优缺点 May 10, 2024 am 04:39 AM

JavaScript 闭包的优点包括保持变量作用域、实现模块化代码、延迟执行和事件处理;缺点包括内存泄漏、增加了复杂性、性能开销和作用域链影响。

c++中的include什么意思 c++中的include什么意思 May 09, 2024 am 01:45 AM

C++ 中的 #include 预处理器指令将外部源文件的内容插入到当前源文件中,以复制其内容到当前源文件的相应位置。主要用于包含头文件,这些头文件包含代码中需要的声明,例如 #include <iostream> 是包含标准输入/输出函数。

C++ 智能指针:全面剖析其生命周期 C++ 智能指针:全面剖析其生命周期 May 09, 2024 am 11:06 AM

C++智能指针的生命周期:创建:分配内存时创建智能指针。所有权转移:通过移动操作转移所有权。释放:智能指针离开作用域或被明确释放时释放内存。对象销毁:所指向对象被销毁时,智能指针成为无效指针。

js中this的指向有几种情况 js中this的指向有几种情况 May 06, 2024 pm 02:03 PM

JavaScript 中,this 的指向类型有:1. 全局对象;2. 函数调用;3. 构造函数调用;4. 事件处理程序;5. 箭头函数(继承外层 this)。此外,可以使用 bind()、call() 和 apply() 方法显式设置 this 的指向。

c++中函数的定义和调用可以嵌套吗 c++中函数的定义和调用可以嵌套吗 May 06, 2024 pm 06:36 PM

可以。C++ 允许函数嵌套定义和调用。外部函数可定义内置函数,内部函数可在作用域内直接调用。嵌套函数增强了封装性、可复用性和作用域控制。但内部函数无法直接访问外部函数的局部变量,且返回值类型需与外部函数声明一致,内部函数不能自递归。

闭包在 Java 中是如何实现的? 闭包在 Java 中是如何实现的? May 03, 2024 pm 12:48 PM

Java中的闭包允许内部函数访问外部的作用域变量,即使外部函数已经退出。通过匿名内部类实现,内部类持有一个外部类的引用,使外部变量保持活动。闭包增强了代码灵活性,但需要注意内存泄漏风险,因为匿名内部类对外部变量的引用会保持这些变量的活动状态。

See all articles