六. 函数初步
无论在哪门语言，函数都是一个相当核心的概念。通过函数可以封装任意多的语句，刻意在任何地方调用执行。函数实质上是一个短小的脚本，需要反复做一件事时，可以利用函数避免重复键入过多重复的代码。良好的编程习惯要求，先定义函数，再使用它们。定义函数用法如下：
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="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就变成全局变量！ |
函数的特点：应该是一个自给自足的脚本。定义函数时，一定要把内部的变量全部声明为局部变量。