简单聊聊JavaScript中作用域与自执行函数的使用

 更新时间:2024年03月18日 09:18:13   作者:^_^果冻^_^  
作用域指的是一个变量的作用范围,自执行函数是指定义后立即执行的函数,它可以被用来创建一个私有作用域,本文主要来和大家聊聊二者的具体定义与使用,感兴趣的可以了解下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

前言

不得不吐槽,学个JS,这个概念也太多了,但是这些概念你不懂吧,代码你都看不懂,你都寸步难行。好吧,这又遇到了作用域方面的知识盲区,然后发现,又牵扯出了自执行函数。那又能咋整,为了这点破工资,学呗。

适可而止,浅尝辄止。

JS作用域

作用域指的是一个变量的作用范围。我们定义的变量它只能在自己的作用域内有效,超出了自己的作用域,变量就不起作用了。但是,JavaScript这门语言很活,如果你不搞懂它的作用域原理,你很可能在不知不觉中被坑了。

在JavaScript中,主要有三种作用域:

  • 全局作用域:在所有函数外部定义的变量、函数和对象,可以被代码中的所有部分访问。
  • 函数作用域:在函数内部定义的变量、函数和对象,只能在函数内部访问。
  • 块级作用域:在块级作用域(使用 let 或 const 关键字定义的变量)中定义的变量,只能在该块内访问。

下面通过不同的示例代码来演示这几种作用域,以便更好的理解:

// 全局作用域
var a = "global_var_a";
console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a

if (true) {
	console.log("在判断语句中访问:" + a); // 在判断语句中访问:global_var_a
}

function getA() {
	console.log("在函数中访问:" + a); // 在函数中访问:global_var_a
}

getA()

// ==================================================================================
// 函数作用域
var a = "global_var_a";
console.log("全局作用域访问:" + a); // 全局作用域访问:global_var_a

if (true) {
	var a = "block_var_a"; // 与全局变量同名
	console.log("在判断语句中访问:" + a); // 在判断语句中访问:block_var_a
}

function getA() {
	var a = "func_var_a"; // 与全局变量同名
	var b = "func_var_b";
	console.log("在函数中访问:" + a); // 在函数中访问:func_var_a
}

getA()
console.log("在全局作用域中访问:" + a); // 在全局作用域中访问:block_var_a;由于允许变量重复声明,导致变量被覆盖
console.log("在全局作用域中访问:" + b); // Uncaught ReferenceError: b is not defined

// ==================================================================================
// 块作用域
var a = "global_var_a";
const b = "global_const_b";

console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a
console.log("全局作用域中访问:" + b); // 全局作用域中访问:global_const_b

if (true) {
	let a = "block_let_a";
	const b = "block_const_b";
	console.log("在判断语句中访问:" + a); // 在判断语句中访问:block_let_a
	console.log("在判断语句中访问:" + b); // 在判断语句中访问:block_const_b
	
	let c = "block_let_c";
    const d = "block_let_d";
}

function getA() {
	let a = "func_let_a";
	const b = "func_const_b";
	console.log("在函数中访问:" + a); // 在函数中访问:func_let_a
	console.log("在函数中访问:" + b); // 在函数中访问:func_const_b

	let e = "func_let_e";
    const f = "func_const_f";
}

getA()
console.log("全局作用域中访问:" + a); // 全局作用域中访问:global_var_a
console.log("全局作用域中访问:" + b); // 全局作用域中访问:global_const_b
// console.log("全局作用域中访问:" + c); Uncaught ReferenceError: c is not defined
// console.log("全局作用域中访问:" + d); Uncaught ReferenceError: d is not defined
// console.log("全局作用域中访问:" + e); Uncaught ReferenceError: e is not defined
// console.log("全局作用域中访问:" + f); Uncaught ReferenceError: f is not defined

这里顺便多说一嘴,关于var定义变量时的变量提升问题,看下面这段代码:

if (false) {
	var a = "abc";
	console.log(a);
} else {
	console.log(a);
}
console.log(a);

我们执行上面的代码,理应报Uncaught ReferenceError: a is not defined这个错误的,但是由于变量提升问题,这段代码是不会报错的,但是逻辑是有问题的。

JS自执行函数

说完JS的作用域问题,再来说说自执行函数。它的定义如下:

自执行函数是指定义后立即执行的函数,它可以被用来创建一个私有作用域。自执行函数的作用域只在函数内部有效,可以用来隐藏变量和函数,避免全局命名冲突,保持代码的整洁性和可维护性。它可以用来创建私有作用域、实现模块化、简化代码等等,非常灵活和实用。

自执行函数有三种写法:

(function("参数") {"函数方法";})("给参数传的值")
(function("参数") {"函数方法";}("给参数传的值"))
!function("参数") {"函数方法";}("给参数传的值") // ! 可以换作 void 或其他运算符(比如 +,-,= 等,都能起到立即执行的作用)

因为全局变量很容易引起一些Bug,所以使用自执行函数来实现模块化,内部变量和函数对外部不可见,只有暴露出去的接口可以被外部访问。看下面这段代码。

var myModule = (function(){
	var privateVar ='私有变量';

	function privateFunc(){
		console.log('私有函数');
	}

	return {
		publicFunc: function() {
			console.log('公有函数');
		}
	};
})();

myModule.publicFunc(); // "公有函数"
console.log(myModule.privateVar); // undefined
myModule.privateFunc(); // Uncaught TypeError: myModule.privateFunc is not a function

在上面的代码中,自执行函数返回一个包含公有函数publicFunc的对象,这个函数可以被外部访问,而私有变量privateVar和私有函数privateFunc对外部不可见。这样可以有效地隔离代码,避免全局变量污染,提高代码的可维护性和重用性。大部分开元的JavaScript模块就是以这种方式提供的。

到此这篇关于简单聊聊JavaScript中作用域与自执行函数的使用的文章就介绍到这了,更多相关JavaScript作用域与自执行函数内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • JS实现的简单分页功能示例

    JS实现的简单分页功能示例

    这篇文章主要介绍了JS实现的简单分页功能,涉及javascript事件响应及页面元素遍历、动态构造等相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • Angular 页面跳转时传参问题

    Angular 页面跳转时传参问题

    这篇文章主要介绍了Angular 页面跳转时传参问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • javascript设计简单的秒表计时器

    javascript设计简单的秒表计时器

    这篇文章主要介绍了javascript设计简单的秒表计时器,该秒表将包括两个按钮和一个用于显示时间的文本框,当单击开始按钮时开始计时,最小单位为0.01秒,此时再次单击按钮则停止计时,文本框显示经过的时间,需要的朋友可以参考下
    2015-11-11
  • Bootstrap5的断点与容器的具体使用

    Bootstrap5的断点与容器的具体使用

    本文将结合实例代码,介绍Bootstrap5的断点与容器的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • JS分页控件 可用于无刷新分页

    JS分页控件 可用于无刷新分页

    今天无意看到了这个分页控件,不过使用方法不是很清楚没有研究,。大家可以自行研究,里面的函数写法倒是不错,需要内容的结合
    2013-07-07
  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    众所周知图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
    2016-09-09
  • js获取TreeView控件选中节点的Text和Value值的方法

    js获取TreeView控件选中节点的Text和Value值的方法

    在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口,本文将详细介绍此方法的实现
    2012-11-11
  • Echarts图表移动端横屏进入退出的实现

    Echarts图表移动端横屏进入退出的实现

    本文主要介绍了Echarts图表移动端横屏进入退出的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 最全面的JS倒计时代码

    最全面的JS倒计时代码

    这篇文章主要为大家详细介绍了最全面的JS倒计时代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 微信小程序连接服务器展示MQTT数据信息的实现

    微信小程序连接服务器展示MQTT数据信息的实现

    这篇文章主要介绍了微信小程序连接服务器展示MQTT数据信息的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论

?


http://www.vxiaotou.com