第三章基本概念（第五部分：函数初步）

Posted 2020-08-06 葡萄美酒夜光杯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三章基本概念（第五部分：函数初步）相关的知识，希望对你有一定的参考价值。

　　六. 函数初步

　　无论在哪门语言，函数都是一个相当核心的概念。通过函数可以封装任意多的语句，刻意在任何地方调用执行。函数实质上是一个短小的脚本，需要反复做一件事时，可以利用函数避免重复键入过多重复的代码。良好的编程习惯要求，先定义函数，再使用它们。定义函数用法如下：

　　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个参数

    }

}