前言

作用域是JavaScript一个很重要的概念,想要学好JavaScript就需要理解javascript作用域和作用域链的工作原理。这篇文章对JavaScript作用域链和作用域链做一个简单的介绍,希望能帮助大家更好的理解。

变量作用域

在js中,变量分为全局变量和局部变量。全局变量的作用域是全局的,在任意地方都是被定义的。而局部变量可以是函数的参数、函数内定义以及{}内(ES6语法)定义,如果局部变量与全局变量重名的话,会优先取局部变量。下面我们来看看例子:

引用全局变量例子:

var num = 1;  //定义一个全局变量

function func(){

    console.log(num);  //这里引用了全局变量

}

func();  //输出:1

同名变量优先局部变量例子:

var num = 1;  //定义一个全局变量

function func(){

    var num = 2;  //声明局部变量时一定要使用var,否则解释器会将该变量当做全局对象window的属性

    console.log(num);  //这里引用了局部变量

}

func();  //输出:1

函数作用域

变量在声明它们的函数体以及这个函数体内的任意函数体都是定义的,请看例子:

function func(){

    var num = 1;

    console.log(num);  //输出:1

    function func1(){

        console.log(num);  //输出:1

    }

    func1();

}

func();

作用域链

把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止,当函数中需要查询一个变量的值的时候,js解释器会去从作用域链查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续,如果找到最后也没有找到需要的变量,则解释器返回undefined。请看例子:

例子1:

var num = 1;

function func(){

    var num = 2;

    function func1(){

        var num = 3;

        console.log(num);  //输出:3  先找函数自身的本地变量

    }

    func1();

}

func();

例子2:

var num = 1;

function func(){

    var num = 2;

    function func1(){

        console.log(num);  //输出:2  先找函数自身的本地变量,再找父级函数中的变量

    }

    func1();

}

func();

例子3:

var num = 1;

function func(){

    function func1(){

        console.log(num);  //输出:1  先找函数自身的本地变量,再找父级函数中的变量,然后再找到全局对象的变量

    }

    func1();

}

func();

例子4:

function func(){

    function func1(){

        console.log(num);  //输出:undefined  先找函数自身的本地变量,再找父级函数中的变量,然后再找到全局对象的变量,还是没找到就返回undefined

    }

    func1();

}

func();

结语

这一篇文章我们讲解了变量作用域、函数作用域、作用域链,希望通过简单的例子帮助大家更好的了解其工作原理。

如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作能力!

JavaScript作用域链的理解的更多相关文章

  1. JavaScript作用域链

    之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...

  2. javascript作用域链学习笔记

    作用域链 "JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里." --权威指南 在JavaScript中,一切皆对象,包括函数.函数对象和其它对象 ...

  3. JavaScript 作用域链图具体解释

    <script type="text/javascript"> /** * 作用域链: */ var a = "a"; function hao94 ...

  4. 个人理解的javascript作用域链与闭包

    闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: function f1(){ n=100; function f2(){ alert(n); } retu ...

  5. JavaScript作用域链与闭包的理解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域 链的工作原理. 1. 全局作用域(Global Scope) (1)最外层函数和 ...

  6. javascript作用域链理解

    执行上下文(Execution context,简称EC)   概念   每当控制器到达ECMAScript可执行代码的时候,就进入了一个执行上下文.   javascript中,EC分为三种:   ...

  7. Javascript中的基本数据类型,如何判断数据类型,作用域链的理解

    第一部分:Javascript中的数据类型 javascript中 基本数据类型有 五种, 数字 number 字符串 string  布尔 boolean  未定义 undefined 空值 nul ...

  8. (好文推荐)一篇文章看懂JavaScript作用域链

    闭包和作用域链是JavaScript中比较重要的概念,首先,看看几段简单的代码. 代码1: var name = "stephenchan"; var age = 23; func ...

  9. 深入javascript作用域链到闭包

    我之前用过闭包,用过this,虽然很多时候知道是这么一回事,但是确实理解上还不够深入.再一次看javascript高级程序设计这本书时,发现一起很多疑难问题竟然都懂了,所以总结一下一些理解,难免有错, ...

随机推荐

  1. sequelize问题集锦

    查询: 查询在指定时间范围内的所有数据 options.where.crawl_time = { $lt: new Date('2017-04-08 00:00:00'), $gt: new Date ...

  2. 说一说MVC的CompressActionFilterAttrubute(五)

    通过action对文件流压缩,提高带宽速度!!! 引用using System.IO.Compression; public override void OnActionExecuting(Actio ...

  3. 程序导致IIS服务器应用程序池停止

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0sAAAC6CAIAAADwAEEAAAAQMElEQVR4nO3dz4scV2IH8Ma7EB9CQC

  4. Spring系列之手写一个SpringMVC

    目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 Spring系列之AOP的原理及手动实现 Spring系列之手写注解与配置文件的解析 引言 在前面的几个章节中我 ...

  5. 通俗易懂讲解TCP流量控制机制,了解一下

    上篇文章讲了TCP拥塞控制机制的原理,没看过的不妨看下:5分钟读懂拥塞控制,这篇文章讲讲TCP流量控制机制. 一.为什么需要流量控制? 双方在通信的时候,发送方的速率与接收方的速率是不一定相等,如果发 ...

  6. HBase Region合并分析

    1.概述 HBase中表的基本单位是Region,日常在调用HBase API操作一个表时,交互的数据也会以Region的形式进行呈现.一个表可以有若干个Region,今天笔者就来和大家分享一下Reg ...

  7. leetcode — binary-tree-inorder-traversal

    import java.util.Arrays; import java.util.Stack; import java.util.TreeMap; /** * * Source : https:// ...

  8. LeetCode专题-Python实现之第28题: Implement strStr()

    导航页-LeetCode专题-Python实现 相关代码已经上传到github:https://github.com/exploitht/leetcode-python 文中代码为了不动官网提供的初始 ...

  9. PE知识复习之PE合并节

    PE知识复习之PE合并节 一丶简介 根据上一讲.我们为PE新增了一个节. 并且属性了各个成员中的相互配合. 例如文件头记录节个数.我们新增节就要修改这个个数. 那么现在我们要合并一个节.以上一讲我们例 ...

  10. 教你MySQL Binlog实用攻略

    本文由云+社区发表 1.概述 binlog是Mysql sever层维护的一种二进制日志,与innodb引擎中的redo/undo log是完全不同的日志:其主要是用来记录对mysql数据更新或潜在发 ...