详解JavaScript作用域、作用域链和闭包的用法


Posted in Javascript onSeptember 03, 2020

1. 作用域

作用域是指可访问的变量和函数的集合。

作用域可分为全局作用域和局部作用域。

1.1 全局作用域

全局作用域是指最外层函数外面定义的变量和函数的集合。

换言之,这些最外层函数外面定义的变量和函数在任何地方都能访问。

举个例子:

// 最外层定义变量
var a = 1;

console.log(a); // 最外层可以访问

function fnOne() { // 最外层函数
  
  console.log(a); // 函数内可以访问
  
  function fnTwo() { // 子函数
    console.log(a); // 子函数内也可以访问
  }
}



// 说明
在最外面定义一个变量,不仅在最外面可以访问,
在函数内也能访问,在函数的子函数内也能访问。

1.2 局部作用域

局部作用域是指在函数内部定义的变量和函数的集合。

换言之,这些在函数内部定义的变量和函数,在函数外面是无法访问的,只能在函数内部(包括函数的子孙函数)访问。

举个例子:

function fnThree() {
  // 在函数内定义变量
  var b = 2;
  
  console.log(b); // 函数内部可以访问
  
  function fnFour() {
    console.log(b); // 子函数内也能访问
  }
}
// 函数外不能访问
//console.log(b); 


// 说明
在函数 fnThree 中定义一个变量 b ,在函数内可以访问,
在子函数 fnFour 中也能访问,但在 函数 fnThree 外是不能访问的。

2. 作用域链

从上面的两个例子可以看出,最里层的子函数不仅可以访问最外层函数内的变量,还能访问最外层函数外的全局变量。

这是因为,在创建最外层函数的时候,会把全局作用域拿过来,然后在创建子函数时候,又会把最外层的作用域(包括全局作用域)拿过来,就这样一环扣一环,就形成了作用域链。

所以,作用域链是指内层函数拥有外层函数到最外层(最外层函数外,全局)的所有作用域列表。

3. 闭包

闭包就是能够读取其他函数内部变量的函数。(——百度百科)

从上面的第二个例子可知,函数外是不能访问函数内部定义的局部变量,但是闭包提供了可能。

举个例子:

function User() {
	// 定义私有变量
	var userName = "default";
	
	// 提供 setUserName() 方法
	function setUserName(uName) {
		userName = uName;
	}
	
	// 提供 getUserName() 方法
	function getUserName() {
		return userName;
	}
	
	// 将方法对外开放
	return {
		set: setUserName,
		get: getUserName
	}
}

var user1 = User();
user1.set('tom');
console.log(user1.get());
var user2 = User();
user2.set('jack');
console.log(user2.get());

// 说明
User 函数内部定义变量 uesrName ,
并在内部定义两个子函数操作 userName,
最后将两个子函数返回(一个可直接放回,多个可放到对象中返回。)。

这样,在函数外面可以调用子函数访问函数内部的变量,
这两个子函数便实现了闭包的功能。

以上就是详解JavaScript作用域、作用域链和闭包的用法的详细内容,更多关于JavaScript作用域、作用域链和闭包的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JS常用知识点整理
Jan 21 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
node实现基于token的身份验证
Apr 09 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
JS变量提升及函数提升实例解析
Sep 03 #Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 #Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
You might like
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
JavaScript 继承的实现
2009/07/09 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python通过ssh-powershell监控windows的方法
2015/06/02 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python time()的实例用法
2020/11/03 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
高一自我鉴定
2013/12/17 职场文书
食品安全工作实施方案
2014/03/26 职场文书
博士生导师推荐信
2014/07/08 职场文书
初中教师个人工作总结
2015/02/10 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python