详解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 滑入滑出效果实现代码
Mar 27 Javascript
Js基础学习资料
Nov 23 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
原生JS实现的放大镜特效示例【测试可用】
Dec 08 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
python中定义结构体的方法
2013/03/04 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python3+Appium安装使用教程
2019/07/05 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
如何利用python生成MD5并去重
2020/12/07 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
资料员的岗位职责
2013/11/20 职场文书
建议书标准格式
2014/03/12 职场文书
实习协议书范本
2014/04/22 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
员工给公司的建议书
2019/06/24 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
详解MySQL集群搭建
2021/05/26 MySQL