详解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为textarea添加maxlength属性的代码
Apr 07 Javascript
Javascript 面向对象之重载
May 04 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
js电话号码验证方法
Sep 28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
javascript的this关键字详解
May 20 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
js实现随机点名功能
Dec 23 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript中对对层的控制
2006/12/29 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jquery 笔记 事件
2011/11/02 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python连接DB2数据库
2016/08/27 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
校车安全管理责任书
2015/05/11 职场文书
七年级数学教学反思
2016/02/17 职场文书
pandas数值排序的实现实例
2021/07/25 Python