JavaScriptDay02 函数及作用域，不定参数arguments，闭包

最新推荐文章于 2022-08-20 09:19:25 发布

'"<>{{7*7}}

最新推荐文章于 2022-08-20 09:19:25 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43415644/article/details/88362492

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

本文深入探讨JavaScript函数的定义、传参、作用域及闭包原理，通过实例解析函数如何实现代码复用，变量作用域链以及闭包如何维持函数内部状态。

0x00 函数的定义：

0x01 函数传参

0x02 函数传参之不定参arguments

0x03 深度剖析变量作用域和闭包

0x04 闭包

函数：为了实现代码的复用。

function slogan(num,time){
   for(var a=1;a<=num;a++){
       console.log(time+"点"+a+"好好学习，努力赚钱");
   }

}
slogan(10，1);
var fname=slogan;
fname(10，1);//执行slogan()函数，相当于换名字
//如果第二个参数没有写，则为undefined。

function add(x,y){//加法
   var z=x+y;
   return z;
}
var rs=add(1,2);
console.log(rs);

function add(x,y){//加法
    if(y==undefined)
      y=6;//如果没有传参，y默认为6。
   var z=x+y;
   return z;
}
var rs=add(1,2);
console.log(rs);
function add(x,y){//加法
   y=y||7;//若y=undefined，则将7赋值给y
   var z=x+y;
   return z;
}

0x00 函数的定义：

function xxx(){ console.log(1)};
var xxx=function(){console.log(2)};

(function xxx(){console.log(3)}()) 外部无法访问

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	(function fun(){
		console.log(3);
	})();
	(function fun2(){
		console.log(4);
	}());
    //fun2();这样会报错，因为fun2只在括号内起作用，在外面找不到它
</script>
</body>
</html>

var xxx=new Function(console.log(3));第三种方式函数会自调用(函数自己完成调用);

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	new Function(console.log(3));
</script>
</body>
</html>

export default function(){} ；es6的向外暴露方法
()=>{} 箭头函数，后序es6会详细讲解

0x01 函数传参

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#tim{
			width:100px;
			height:100px;
			background: black;
			margin:0 auto;
		}
	</style>
</head>
<body>
<button id='taller' onclick="change('height','300px')">增高</button>
<button id='longer' onclick="change('width','300px')">增长</button>
<button id='changebk' onclick="change('background','green')">变色</button>
<div id='tim'></div>
<script type="text/javascript">
		var tim = document.getElementById('tim');
		function change(attr,value){
			//tim.style.attr=value;
			tim.style[attr]=value;
			//以上两种写法意义相同，但是如果attr是变量的话就需要用第二种了
		}
</script>
</body>
</html>

0x02 函数传参之不定参arguments

动态参数
//函数的定义
function add(x,y){
    return x+y;
}
//函数的调用
var rs=add(1,2,3,4,6);//[1,2,3,4,6]作为一个数组被传递过去，但是只有一二起作用
/*
相当于 var arguments=[1,2,3,4,6]
x=argument[0];
y=argument[1];
*/

function sum(x,y){
    var s=0;
    for(var i=0;i<arguments.length;i++){
        s+=arguments[i];
    }
    return s;
}

var su=sum(1,2,3,4,5,6);//相当于1+2+3+4+5+6,实现了动态参数，不论你传什么值，都给你加起来。

0x03 深度剖析变量作用域和闭包

变量分为局部变量和全局变量

全局变量：在函数外定义的变量，在所有地方都能被访问
局部变量：在函数里面定义的变量，函数里面能被访问

作用域链:只有在自己当前的小作用域内找不到才会向父级作用域寻找，直到找到为止

存在同名变量时，在当前作用域内局部变量会覆盖全局变量，局部变量优先级比较高

function add(){
    console.log("add:x"+x);
}
var x=1;
add();//在函数中仍然可以访问到x；

function  sub(){
   y=100;//如果y前没有声明var，则y默认为全局变量
   console.log(y);
}

预解析：浏览器获得js文件之后，不是立刻去执行代码，会全篇快速扫描一遍，主要把变量进行预先解析
预解析的作用就是把变量的声明提前。

console.log("x="+x);
var x=10;
add();
function add(){
    console.log("add()");
}
//这个代码是能够被正常执行的。

function sub(){
   y=10;//按理说y应该默认为全局变量，但是因为有预解析，所以var y被提到y=10;之前了。
   var y=1;
   console.log("add():y="+y);
}

0x04 闭包

闭包=函数地址+让函数内部自由变量闭合的环境。

一个函数的返回值是一个函数指针时，该函数返回的不仅仅是函数指针，还有能让该子函数中自由变量（未声明的变量）闭合的环境。该环境中就是这些自由变量的声明。

注意：环境中返回是变量的引用，且这些变量具有全局变量的生命周期。


function add(){
   var counter=0;//局部变量
   plus=function(){//匿名函数 没有名字的函数，plus 没有声明var，plus为全局函数
       counter++;//一个函数中变量没有声明，默认为全局变量，但是上层函数中又有一个局部变量，所以该变量有着局部变量的作用域，全局变量的生命周期
       console.log("counter="+counter); 
    }
}

add();//实现counter的初始化
plus();//counter=1;
plus();//counter=2;
plus();//counter=3;

/*或者也可以这样写 */
function add(){
    var counter=0;//局部变量
    return function(){//匿名函数 没有名字的函数，plus 没有声明var，plus为全局函数
        counter++;//一个函数中变量没有声明，默认为全局变量，但是上层函数中又有一个局部变量，所以该变量有着局部变量的作用域，全局变量的生命周期
        console.log("counter="+counter); 
     }
 }
 var plus=add();//实现counter的初始化,并且将匿名函数命名为plus；
 plus();//counter=1;
 plus();//counter=2;
 plus();//counter=3;
/*或者也可以这样写 */
//函数的立即执行，函数声明和函数执行放在一起，即用括号把声明扩起来，并且在后面加上（）；
var plus=(function(){
    var counter=0;//局部变量
    return function(){//匿名函数 没有名字的函数，plus 没有声明var，plus为全局函数
        counter++;//一个函数中变量没有声明，默认为全局变量，但是上层函数中又有一个局部变量，所以该变量有着局部变量的作用域，全局变量的生命周期
        console.log("counter="+counter); 
     }
 })();//调用外层的function匿名函数将counter初始化，并且将返回的匿名函数命名为全局函数plus。
 plus();//counter=1;
 plus();//counter=2;
 plus();//counter=3;