说js作用域,就不得不说说自执行函数-kb88凯时官网登录

来自:
时间:2024-03-17
阅读:
免费资源网,https://freexyz.cn/

一个兜兜转转,从“北深”回到三线城市的小码农,热爱生活,热爱技术,在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号:果冻想

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

适可而止,浅尝辄止。

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

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

  1. 全局作用域:在所有函数外部定义的变量、函数和对象,可以被代码中的所有部分访问。
  2. 函数作用域:在函数内部定义的变量、函数和对象,只能在函数内部访问。
  3. 块级作用域:在块级作用域(使用 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的作用域问题,再来说说自执行函数。它的定义如下:

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

自执行函数有三种写法:

(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模块就是以这种方式提供的。

每天一个小知识点,每天进步一点,与君共勉。

免费资源网,https://freexyz.cn/
返回顶部
顶部
网站地图