functionchart java_Javascirpt详解之函数function

1.function是什么？

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

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

2.使用function

2.1 定义

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

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

functionf2(arg1,arg2,arg3)

{return 'f2';

}//调用f2

f2();//调用f2

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

f2('xiaom','China','boy');

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

2.2 创建函数实例

//定义式，定义一个function，该function的名字是f3，相当于一个名为f3的变量指向该function。

functionf3(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的函数实际上是功能完整的对象2。在javascript中函数本身也是一个对象，它的类型是Function，因此它可以有自己的属性和方法，在2.2构造函数式创建函数实例也体验了这一点。

functionupperCaseOf(arg)

{returnarg.toUpperCase();

}

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

var city=city ||{};//?

city.upperCase=upperCaseOf; //注：此处对city.upperCase属性进行赋值时，后来的upperCaseOf不能加括号，其实这里也可以理解为“对象借用其他对象的方法”。

city.upperCase('zheng zhou'); //return ZHENG ZHOU

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

2.3.2 将函数作为参数传值

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

var getBiggerValue = functiongetBiggerValue(a, b, compareValue)

{if (compareValue(a, b) > 0) {returna;

}else{returnb;

}

}var result = getBiggerValue(12, 3, function (a, b) { return a-b});

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

2.3.3 使用function的属性

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

functionf4()

{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

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