首页 > 代码库 > 第三章 基本概念（第五部分：函数初步）
第三章 基本概念（第五部分：函数初步）
六. 函数初步
无论在哪门语言，函数都是一个相当核心的概念。通过函数可以封装任意多的语句，刻意在任何地方调用执行。函数实质上是一个短小的脚本，需要反复做一件事时，可以利用函数避免重复键入过多重复的代码。良好的编程习惯要求，先定义函数，再使用它们。定义函数用法如下：
function 函数名(参数){函数代码;}
比如封装以下代码：
var beatles=["Joln","Paul","George","Ringo"];for(var count=0;count<beatles.length;count++){alert(beatles[count]);};声明为函数shout并调用的语句是：function shout(){var beatles=["Joln","Paul","George","Ringo"];for(var count=0;count<beatles.length;count++){alert(beatles[count]);}};//以下是调用。shout();
1. 返回值
就是函数的的执行结果。函数可以没有返回值。一个空函数返回的是undefined。因此可以通过return语句来给函数指定一个返回值，这样函数会更加实用。请注意：执行完return之后，函数后边的语句将不会执行。
一个函数应该只返回一种类型的值。
当然，把结果直接返回给这个函数的语句，会更加实用。因此引出return语句。
【例1】12mol/L 的HCl溶液转换为g/ml计量是多少？
HCl摩尔质量（Molar Mass）为36.5g/mol，体积重量（volume）的化学计算公式为36.5g/mol * 1mol/L * 1/1000=0.0365g/ml。
因此在js中定义函数
//定义函数体积重量换算法则：function ConverToVolume(temp){var resaut=temp*36.5/1000;return temp;};//函数只有一个参数，用temp代替。var temp_MolarConcentration=12;//当摩尔浓度为12mol/L时var volume=ConverToVolume(temp_MolarConcentration);/*赋予体积重量为变量volume。为函数表达式ConverToVolume(temp_MolarConcentration)，已返回值到volume。*/alert(volume);//显示volume的值。
2. 参数（argument）
在数学函数中，二元函数可以表示为f(x,y)。在JS中，x，y就是这个二元函数的参数。
比如f(x,y)=x+y
在js应该定义为复合函数，应该这样写
function f(x,y){var total=x+y;alert(total);}//声明函数。x=3;y=7;f(x,y);输出结果为10。如果直接调用f(),输出结果为NaN（Not a Number）。更简单地，可以直接书写：
f(3,7);
参数分为可变参（不定参）和不变参。
function(arguments){} arguments：参数的个数是可变的。
【例2】任意多个数据求和函数：
function sum () { arguments var result=0 for(i=0;i<arguments.length;i++){ result+=arguments[i]; } alert(result); // body...}sum(2,3,5,7)理论上js可以传递任意个参数。参数在js的表述就是arguments。
【例3】自己封装一个实用的css函数：模拟一个jq（Jquery）函数。jq的css既可以设置又可以获取。（xxx.css(名字，属性)格式）
html代码如下：
<div id="div1" style="width:200px;height:200px;background:red"></div>js代码
function css () { if(arguments.length==2){//获取 return arguments[0].style[arguments[1]]; }else if (arguments.length==3) {//设置 arguments[0].style[arguments[1]]=arguments[2]; /*对象.样式=属性值*/ }; // body...}
//以下是调用过程window.onload=function(){ var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function(){ //css(oDiv,‘background‘,‘green‘) //以上语句可选：可选设置绿色 //alert(css(oDiv,‘width‘)); //以上语句可须按：获取宽度 //此CSS参数有可能是2个参数，也可能是3个参数 }}
以上函数只能设置行间样式，但实际工作中很少去写行间样式。问题来了，如何去取非行间的样式呢？
用currentStyle来取计算后的样式。把上述代码的style替换为currentStyle就可以了。currentStyle取哪的样式都可以。但是浏览器兼容性会出现问题。只能在ie9以上的ie下能用！
那怎么办呢？用getComputedStyle！意思还是获取计算后的样式。
getComputedStyle(对象,false).属性
但是在ie下getComputedStyle又是用不了的。
现在要做ie和火狐的兼容。
封装一个获取计算后样式的函数：
function getStyle(obj,attr){ //元素，样式 if(obj.currentStyle){ return obj.currentStyle[attr] }else{ return getComputedStyle(obj,false)[attr]; }}调用时：
function css () { if(arguments.length==2){//获取 return getStyle(arguments[0],arguments[1]); }else if (arguments.length==3) {//设置 arguments[0].style[arguments[1]]=arguments[2]; /*对象.样式=属性值*/ };}window.onload=function(){ var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function(){ //css(oDiv,‘background‘,‘green‘) alert(css(oDiv,‘width‘)); //获取宽度 //此CSS参数有可能是2个参数，也可能是3个参数 }}
这个函数就算完整了。
改善可读性：
arguments[0].style[arguments[1]]=arguments[2];
这样的代码读起来太不友好了。不如改善一下。实际上在函数中定义若干个参数，本质上1和argument[]是一一对应的。所以写函数时
function(obj,attr,value){};
后边引用时就有较好的观赏性了。
obj.style[attr]=value
3. 局部变量和全局变量
变量类型（按作用域分） | 用法 | |
全局变量 | 范围是整个脚本。可以在脚本的任何位置引用。 | temp=x*x |
局部变量 | 只存在于声明它函数的内部，在外部无法使用。 | function f(x){var temp=x*x；return temp} 这样temp就不会在函数范围外时生效。 当省略了var符时，temp就变成全局变量！ |
函数的特点：应该是一个自给自足的脚本。定义函数时，一定要把内部的变量全部声明为局部变量。
第三章 基本概念（第五部分：函数初步）