首先说一下函数传参。
函数传参:顾名思义就是函数传递参数。这个参数指的就是已知的JS数据类型:数字、字符串、布尔值、函数、对象以及未定义。
1、数字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script> 7 fn1(100,'px'); 8 function fn1(a,b){ 9 alert(a+b); 10 } 11 </script> 12 </head> 13 </html>
上边代码中相当于使用a来接收100,b来接收px,通过函数中的alert(a+b)展示为100px。
2、字符串
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script> 7 fn1('abc'); 8 fn1('前端技术'); 9 function fn1(a) { 10 alert(a.charAt(2)); 11 } 12 </script> 13 </head> 14 </html>
执行之后第一次弹出
第二次弹出
在这段代码里边相当于a接收了两次传入的参数,第一次是abc,第二次是前端技术;而且两次调用均没有问题都能正常展示。
3、函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script> 7 fn3(function fn3(a) { 8 alert(a); 9 }) 10 function fn3(fn){ 11 fn(); 12 } 13 </script> 14 </head> 15 </html>
在这段代码中:fn3=fn3(function fn3(a) { alert(a); }),fn=fn3,fn()=调用fn,由于没有给a进行赋值,所以去预解析的值展示undefined。
如果在fn()内加入内容就会展示加入的内容。
例如:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script> 7 fn3(function fn3(a) { 8 alert(a); 9 }) 10 function fn3(fn){ 11 fn('nihao'); 12 } 13 </script> 14 </head> 15 </html>
以上是匿名函数,如果函数已经命名则会是这样的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script> function fn4(){ alert(4); } fn3(fn4); function fn3(fn){ fn(); } </script> </head> </html>
在这段代码里边,fn3=function fn4() { alert(4);},fn=fn3,调用fn()=调用fn3所以展示结果为4。
4、对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script> 7 fn5( window, document ); 8 function fn5( w, d ) { 9 w.onload = function () { 10 d.body.innerHTML = 123; 11 }; 12 } 13 </script> 14 </head> 15 </html>
在这段代码里边通过w,d来接收window和document,然后通过在函数内使用innerHTML来对body进行操作,最终显示123。