对立即执行函数的理解

一、立即执行函数定义:

此类函数没有声明,在一次执行过后即释放。适合做初始化工作。

二、立即执行函数使用场景

1、函数只执行一次,不需要定义浪费空间

var num = (function (a,b,c){
    
    
	var d = a+b+c*2-2
	return d;
}(1,2,3))

2、可以避免污染全局变量

某些代码只需要执行一次,比如只需要显示一个时间,但是这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到,如果将这些变量作为全局变量,不是一个好的主意,我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量,看如下代码:
在这里插入图片描述
比如上面的代码,如果没有被包裹在立即执行函数中,而是直接以非函数的形式直接写在script标签里面,虽然也会立即执行,但是临时变量todaydom,days,today,year,month,date,day,msg都将成为全局变量(初始化代码遗留的产物)。
而用立即执行函数之后,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。

三、立即执行函数的写法

(function (){
    
    }());//w3c建议使用
(function (){
    
    })();

注意:1、只有表达式才能被执行符号执行。2、被执行符号执行的表达式,会自动放弃函数的名称。

var test = function(){
    
    
	console.log(a);
}();

四、最容易踩坑的地方

实现功能 一个数组加上10个值,这个10个值分别是10个函数,分别打印从1到10

function test(){
    
    
	var arr =[];
	for(var i=1;i<=10;i++){
    
    
		arr[i]=function(){
    
    
			console.log(i);
		}
	}
	var myArr =test();
	for(var j=0;j<10;j++){
    
    
		myArr[j]();
	}
}

正确的写法是

function test(){
    
    
	var arr =[];
	for(var i=1;i<=10;i++){
    
    
		(function (j){
    
    
			arr[i]=function(){
    
    
				console.log(j);
			}
		})(i)
	}
	var myArr =test();
	for(var j=0;j<10;j++){
    
    
		myArr[j]();
	}
}

面试题系列1

<ul>
	<li>a</li>
	<li>a</li>
	<li>a</li>
	<li>a</li>
</ul>

使用原生js,addEventListener,给每个li元素绑定一个click事件,输出他们的顺序

function test(){
    
    
	var liCollection = document.getElementsByTagName('li');
	for(var i=0; i>liCollection.length;i++){
    
    
		(function(j){
    
    
			liCollection[i].onclick = function(){
    
    
				console.log(j);
			}
		}(i))
	 }
}
test();

面试题系列1

写出下面程序的执行结果:

var f = (
	function f(){
    
    
		return "1";
	),
	function g(){
    
    
		return 2;
	}
)();
typeof f;//number

逗号操作符:先看前面表达式,需要计算的话先计算,在看后面的表达式,需要计算的话先计算,然后将后面的表达式返回出去

let x = 1;

x = (x++, x);

console.log(x);//2

经常看到这样的匿名函数代码,会有很多疑问,今天花时间研究了下

;(function ( $, window, document, undefined ){
    
    

//函数体内具体代码

})(jQuery, window,document);
1.为什么要传入 jQuery

通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个 JS 框架必须支持的功能,jQuery 被应用在成千上万的 JavaScript 程序中,必须确保 jQuery 创建的变量不能和导入他的程序所使用的变量发生冲突。

2.window,document参数

window, document实参分别接受window, document对象,window, document对象都是全局环境下的,而在函数体内的window, document其实是局部变量,不是全局的window, document对象。这样做有个好处就是可以提高性能,减少作用域链的查询时间,如果你在函数体内需要多次调用window 或 document对象,这样把window 或 document对象当作参数传进去,这样做是非常有必要的。当然你如果你的插件用不到这两个对象,那么就不用传递这两个参数了。

3.undefined

undfined 这个形参我一直不理解,觉得有点多余,而且这个立即执行函数都没有传这个值,后来我在网上看到热心网友的答案才明白,实参不传这个参数,是故意让这个参数为undefined的。
原因是有的浏览器中(IE8)undefined 是可以重新赋值的,这样写可以避免函数体内的undefined被外部重写。

为什么我们有时候会看到自执行函数前面有分号";"

因为自执行函数前面是括号,可能会把括号前面的当成一个函数来执行。

猜你喜欢

转载自blog.csdn.net/literarygirl/article/details/105160985