JavaScript函数IIFE使用详解
一、认识函数
javaScritp中的的函数
//函数声明语法定义 functionfun1(name,age){ console.log(name+','+age); } fun1('Amy',18);//Amy,18
//函数表达式定义 varfun2=function(name,age){ console.log(name+','+age); } fun1('Amy',18);//Amy,18
javaScript函数带默认参数
/*默认参数*/ functionfun1(name,age=17){ console.log(name+','+age); } fun1('Amy',18);//Amy,18 fun1('Amy','');//Amy, fun1('Amy');//Amy,17 fun1("Amy",null);//Amy,null
函数参数默认值存在暂时性死区,在函数参数默认值表达式中,还未初始化赋值的参数值无法作为其他参数的默认值。
functionfun2(x,y=x){ console.log(x,y); } fun2(1);//11 functionfun3(x=y){ console.log(x); } fun3();//ReferenceError:yisnotdefined
javaScript函数不定参数
//不定参数用来表示不确定参数个数 functionfun4(...values){ console.log(values.length); } fun4(1,2);//2 fun4(1,2,3,4);//4
Function的构造定义
通过Function构造函数创建函数,可向构造函数中传入任意数量的参数,但值得注意的是传入的最后一个参数会作为函数体,而其他参数则作为参数传入函数中。用该方法去定义函数是不推荐使用的,因为该语法会导致解析两次代码,第一次解析常规ECMAScript代码,第二次解析传入构造函数的字符串,影响性能。
varfunctionName=newFunction("value",...,"函数体"); varf2=newFunction("n1","n2","returnn1+n2;"); console.log(f2(1,2));//3
注:函数是引入值类型,所以函数名仅仅是指向函数的指针,当使用函数名去赋值给另一个变量名时,仅仅复制的是一个指针。即在下列a设置为null时,仅将a存的指针消除而已,不会影响b调用函数。
vara=b=function(value1){ returnvalue1; } a=null; b(1);
function中的默认对象叫arguments,类似数组,但不是数组,该对象是传递给函数的参数。我们可以通过这个arguments知道该函数有多少个参数
functioncounter(){ varsum=0; for(vari=0;i注:这里的arguments是一个隐式对象,不声明也在函数中,内部函数可以访问外部函数的任意内容,但是不能直接访问外部函数的arguments与this对象。
functionf1(){ console.log(arguments.length); f2=function(){ console.log(arguments.length); } returnf2; } varf=f1(1,2,3);//3 f();//0function.call-调用一个对象的一个方法,以另一个对象替换当前对象
/*构造函数*/ functionStudent(name,age){ this.name=name; this.age=age; } show=function(add){ console.log(add+":"+this.name+","+this.age); } //通过new关键字调用构造函数,创建一个对象tom varrose=newStudent("rose",18); varjack=newStudent("jack",20); //调用show方法,指定上下文,指定调用对象,this指向rose,“大家好是参数” show.call(rose,"大家好");//大家好:rose,18 show.call(jack,"Hello");//Hello:jack,20call方法中的参数都可以省去,第1个参数表示在哪个对象上调用该方法,或this指向谁,如果不指定则会指向window对象。
varname="无名"; varage=18;//全局变量 show.call();//undefined:无名,18立即执行表达式函数(IIFE)
块级作用域与函数作用域
functioncalc(){ for(vari=0;i<5;i++){ console.log(i);////0,1,2,3,4 } console.log(i);//5 } calc();函数没有块级作用域所以后面输出的i是5,没有报错
解决方法,模拟一个块级作用域
functioncalc(){ //IIFE (function(){ for(vari=0;i<5;i++){ console.log(i);//0,1,2,3,4 } })(); console.log(i);//报错 } calc();函数表达式或匿名对象立即执行
//调用匿名函数 (function(){ console.log("这是一个函数表达式"); })(); //调用匿名对象 ({ name:"foo", show:function(){ console.log(this.name); } }).show(); console.log({a:1}.a); console.log({a:function(){}}.a());多种函数立即表达式的写法
//最常用的两种写法 (function(){/*code*/}());//推荐写法 (function(){/*code*/})();//当然这种也可以 //括号和JS的一些操作符(如=&&||,等)可以在函数表达式和函数声明上消除歧义 //如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式 //但是两者交换则会报错 vari=function(){return10;}(); true&&function(){/*code*/}(); 0,function(){/*code*/}(); //如果你不怕代码晦涩难读,也可以选择一元运算符 !function(){/*code*/}(); ~function(){/*code*/}(); -function(){/*code*/}(); +function(){/*code*/}(); //你也可以这样 newfunction(){/*code*/} newfunction(){/*code*/}()//带参立即表达函数带参数
(function(n){ console.log(n);//100 })(100);最好在立即表达函数前面添加分号
vark=100 (function(n){ console.log(n); })(k); //出错,解释器会认为100是函数vark=100 ;(function(n){ console.log(n); })(k);IIFE的形变
(function(n){ console.log(n); //认为这里有30000代码 }(100));如果中间有很长的代码,参数100只有到文档的末尾才可以看得到,变形后的结果:
(function(exp){ exp(100); }(function(n){ console.log(n); //认为这里有30000代码 }));以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。