Javascirpt详解之函数function

1.function是什么？

定义1：函数是有事件驱动的或者当它被调用时执行的可重复使用的代码块。

定义2：函数定义指的是在javascript引擎内部创建一个函数对象的过程，如果是全局函数的话，这个函数对象会作为属性添加到全局对象上，如果是内部函数（嵌套函数）的话，该函数对象会作为属性添加到上层函数的活动对象上，属性名就是函数名。

2.使用function　　

2.1 定义

function f1(){return 'f1';}
function f1(args){ return 'f1';}

在javascript中的这两个function被认为是同一个，运行时后面的会覆盖前面的同名函数，另外，function的参数是可选参数，更多时候声明是为了引用方便和可读性。

function f2(arg1,arg2,arg3)
{
       return 'f2';
}
//调用f2
f2();

//调用f2
f2('xiaom','China');

//调用f2
f2('xiaom','China','boy');

以上三种调用方法都正确。

2.2 创建函数实例

//定义式，定义一个function，该function的名字是f3，相当于一个名为f3的变量指向该function。
 function f3(a,b)
{
    return a+b;
}
 
//声明式，即通过创建"匿名函数"直接赋值给变量，以该变量作为调用时的函数名称
 
var f3=function(a,b)
{
   return a+b;
}

//构造函数式 不常用

var f3=new Function(‘a’,‘b’,‘return a+b’);

定义式创建函数实例后面函数会覆盖前面的同名函数，而声明式则不会。这种差别主要是javascripts解释引擎的工作机制所导致，Javascirpts解释引擎在执行任何函数调用前，首先会在全局作用域中注册以定义式创建函数，然后再依次执行函数调用。因此后定义的函数重写了先面定义的同名函数。相反，对于声明式创建函数，Javascript解释引擎会像对待任何声明的变量一样，等到执行调用该变量的代码时才会对变量求值（该函数才被执行），function is complied, but not executed until you cal it. 

通过构造函数式而已清楚的看到函数对象的本质，在javascript解释器内部，会自动构造一个Function对象，将函数作为一个内部对象来存储和运行。从示例代码可以看到，一个函数对象和一个普通变量具有同样的规范。

var myFunction = new Function('a', 'b', 'return a+b');
console.log(myFunction(3, 4)); // 执行结果7

构造函数形式创建函数不常用，因为一个函数体通常会有多条语句，如果将它们以字符串形式作为参数传递，代码的可读性差。

2.3 function当作对象

ECMAScript的函数实际上是功能完整的对象²。在javascript中函数本身也是一个对象，它的类型是Function，因此它可以有自己的属性和方法，在2.2构造函数式创建函数实例也体验了这一点。

function upperCaseOf(arg)
{
    return arg.toUpperCase();
}

 

 2.3.1 function作为对象对属性（或者变量）进行赋值

var city=city ||{};//?
city.upperCase=upperCaseOf; //注：此处对city.upperCase属性进行赋值时，后来的upperCaseOf不能加括号，其实这里也可以理解为“对象借用其他对象的方法”。
city.upperCase('zheng zhou'); //return ZHENG ZHOU

例如，需要在页面载入时进行一些初始化工作，可以先定义一个init函数，在通过window.onload=init;将其绑定到页面载入完成事件，这里的init函数就是作为对象对window.onload属性进行赋值，即加入window的onload事件列表。

 2.3.2 将函数作为参数传值

函数可以作为对象进行赋值给一个变量或属性，再通过这个变量名进行函数调用，同样可以把函数对象作为参数传递给另一个函数。

var getBiggerValue = function getBiggerValue(a, b, compareValue)
         {
             if (compareValue(a, b) > 0) {
                 return a;
             }
             else {
                 return b;
             }
         }
var result = getBiggerValue(12, 3, function (a, b) { return a-b});

console.log(result);//输出结果是12

 

 2.3.3 使用function的属性

 在function中用this（或者函数名）引用当前对象，通过对属性的赋值来声明属性。

 

function f4()
         {
             this.id = 1;
             this.name = 'propertyFunction';
             f4.counter++; //计算函数调用次数
             this.getName = function () {
                 return this.name;
             }
         }
         f4.counter = 0;
         f4();
         console.log(new f4().name); //propertyFunction
         console.log(f4.counter); //2
         f4();
         console.log(f4.counter); //3

 

 

本文参阅以下文章整理得出，仅为个人学习记录笔记，如有侵权，请告知。

Javascript中的函数对象 http://jeff.familyyu.net/2012/07/06/functional-javascript/

Javascript创建类/对象的几种方式 http://www.cnblogs.com/lucas/archive/2009/03/17/1411656.html 

Javascript定义类 http://www.cnblogs.com/lidabo/archive/2011/12/17/2291238.html

你了解javascript中的function吗？ http://www.cnblogs.com/yangdong/archive/2012/02/05/function-in-javascript-0.html