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

所属分类: 网络编程 / JavaScript 阅读数: 2111
收藏 0 赞 0 分享

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作用域、作用域链和闭包的资料请关注脚本之家其它相关文章!

更多精彩内容其他人还在看

Jquery-data的三种用法

本篇文章主要介绍了Jquery-data的三种用法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义toast(6)

这篇文章主要为大家详细介绍了微信小程序实战之自定义toast的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序--onShareAppMessage分享参数用处(页面分享)

本篇文章主要介绍了微信小程序的页面分享onShareAppMessage分享参数用处的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义抽屉菜单(7)

这篇文章主要为大家详细介绍了微信小程序实战之自定义抽屉菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

本篇文章主要介绍了微信小程序开发之从相册获取图片--使用相机拍照,本地图片上传的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

JavaScript错误处理和堆栈追踪详解

这篇文章主要为大家详细介绍了JavaScript错误处理和堆栈追踪的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序开发之麦克风动画 帧动画 放大 淡出

本篇文章主要介绍了微信小程序开发之麦克风动画:帧动画、放大、淡出的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义模态弹窗(8)

这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery加密密码到cookie的实现代码

本文通过实例代码给大家分享了jquery 加密密码到cookie的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

javascript实现日期三级联动下拉框选择菜单

这篇文章主要介绍了javascript实现日期三级联动下拉框选择菜单,实现JS年月日三级联动下拉框选择功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多