javascript面向对象编程笔记（函数）

第三章 函数

3.1 什么是函数

一般来说，函数声明通常由以下几部分组成：

function子句

函数名称

函数所需参数

函数体

return子句。如果某个函数没有显示的返回值，默认它的返回值为undefined。

注意：一个函数只能有一个返回值，如果需要同时返回多个值，可以考虑将其放进一个数组里，以数组元素的形式返回。

function sum(a,b){
var c=a+b;
return c;
}
//忘了传递相关的参数值，javascript引擎就会自动将其设定为undefined
>>>sum(1)
NaN
//传递参数过多，多余的部分也只会被默默地忽略掉
>>>sum(1,2,3,4,5)
3

• 每个函数内部都有一个内建的arguments数组(第四章，实际是一个类似数组的对象)，它能返回函数所接收的所有参数。

    >>>function args(){return arguments;}
    >>>args();
    []
    >>>args(1,2,3,4,true,'ninja');
    [1,2,3,4,true,'ninja']
  

  通过arguments数组，可以进一步完善sum()函数功能，使之能对任意数量的参数执行求和运算。

    function sumOnSteroids(){
    var i,res=0;
    var number_of_params=arguments.length;
    for(i=0;i<number_of_params;i++){
    res+=arguments[i];
    }
    return res;
    }
  

3.2预定义函数

javascript引擎中有一组可供随时调用的内建函数。包括：

• parseInt()

    >>>parseInt('123')
    123
    >>>parseInt('abc123')
    NaN
    >>>parseInt('1abc23')
    1
    >>>parseInt('123abc')
    123
  

  该函数还有个可选的第二参数：radix，负责设定函数所期望的数字类型（十进制、十六进制、二进制等）。

    >>>parseInt('FF',10)
    NaN
    >>>parseInt('FF',16)
    255
    >>>parseInt('0377',10)
    377
    >>>parseInt('0377',8)
    255
  

  如调用时没指定第二参数，默认为十进制，但有两种情况例外：首参数字符串是0x开头（十六进制），以0开头（八进制）

    >>>parseInt('377')
    377
    >>>parseInt('0377')
    255
    >>>parseInt('0x377')
    887
  

• parseFloat()

    >>>parseFloat('123')
    123
    >>>parseFloat('1.23')
    1.23
    >>>parseFloat('1.23abc.00')
    1.23
    >>>parseFloat('a.bc1.23')
    NaN
    >>>parseFloat('123e-2')
    1.23
    >>>parseFloat('123e2')
    12300
  

• isNaN()

  确定某个输入值是否是一个可以参与算术运算的数字。因而该函数可以用来检测parseInt()和parseFloat()的调用成功与否。

    >>>isNaN(NaN)
    true
    >>>isNaN(123)
    false
    >>>isNaN(parseInt('abc123'))
    true
  

  该函数也会始终试图将其所接收的输入转换为数字

    >>>isNaN('1.23')
    false
    >>>isNaN('a1.23')
    true
  

  NaN自己不存在等值的概念，也就是NaN===NaN返回的是false。（事实上，可以将NaN理解为一个集合，同属于一个集合的值未必是等值的）

• isFinite()

  用来检查输入是否是一个既非infinity也非NaN的数字。

    >>>isFinite(Infinity)
    false
    >>>isFinite(-Infinity)
    false
    >>>isFinite(12)
    true
    >>>isFinite(1e308)
    true
    >>>isFinite(1e309)
    false
  

• URI的编码与反编码

  URL(Uniform Resource Locator，统一资源定位符)
  
  URI(Uniform Resource Identifier，统一资源标识符)

  encodeURI()，反转函数decodeURI()

  encodeURIComponent()，反转函数decodeURIComponent()

• eval()
  
  将其输入字符串当作javascript代码来执行

    >>>eval('var ii=2')
    >>>ii
    2
  

  eval is evil
  
  性能方面：是一种由函数执行的“动态”代码，显然要比直接执行脚本慢得多。
  
  安全性方面：不确定性大。

• alert()：不是javascript核心的一部分（即没有包括在ecma标准中）而是由宿主环境——浏览器所提供的，是一个用于显示文本的消息对话框。

  使用该函数会阻塞当前浏览器线程，在alert()执行窗口关闭之前，当前所有的代码都会暂停执行。

3.3 变量的作用域

1. 在javascript中，我们不能为变量定义特定的块作用域，但可以定义其所属的函数域。也就是说，如果变量是在某个函数中定义的，那么它在函数以外的地方是不可见的。

   如果该变量是定义在if或者for这样的代码块中的，它在代码块之外是可见的。

   此外，在javascript中，全局变量是指声明在所有函数之外的变量。局部变量则指在某个函数中定义的变量。其中函数内的代码可以像访问自己局部变量那样访问全局变量，反之则不行。

2. 下例中，请注意两点：函数f()可以访问变量global；在函数f()以外，变量local是不存在的。

   	var global＝1；
   	function f(){
   		var local=2;
   		global++;
   		return global;
   	}
   	>>>f();
   	2
   	>>>f();
   	3
   	>>>local
   	local is not defined
   

   ps：如果我们声明一个变量时没有使用var语句，该变量就会被默认为全局变量

   	function f(){local=2;}
   	>>>f()
   	>>>local
   	2
   

   首先，在函数f()中定义了一个变量local。在该函数被调用前，local是不存在的。该变量在函数首次被调用时被创建，并赋予全局作用域，这使我们可以在函数外部访问它。

3. 最佳实践

   • 尽量将全局变量的数量降到最低。（可能多人在同一脚本不同函数中使用相同全局变量，导致不可预测的结果和难以察觉的bug）

   • 总是使用var语句来声明变量。

关于本地和全局作用域的另一重要问题

var a＝123；
function f(){
	alert(a);
	var a=1;
	alert(a);
}
f();

错误答案：alert()第一次显示123（全局变量a的值），第二次1（局部变量a）

正确答案：“undefined”（函数域始终优先于全局域，所以局部变量a覆盖掉所有与它同名的全局变量，尽管在alert()第一次被调用时a还没有被正式定义（即该值为undefined），但该变量本身已经存在于本地空间了）

3.4 函数也是数据

函数是一种数据类型。也就是说，下面两种函数定义在本质上是相同的。

function f(){return 1;}
var f=function(){return 1;}

其中，第二种定义方式通常被叫做函数标识记法（function literal notation）。

对函数变量调用typeof，操作符返回字符串将会是“function”.

两个重要特性：

它们所包含的是代码；

它们是可执行的（或者说是可调用的）

下例与函数定义方式无关，演示的是如何像变量那样使用函数。

>>>var sum=function(a,b){return a+b;}
>>>var add=sum;
>>>delete sum
true
>>>typeof sum
"undefined"
>>>typeof add
"function"
>>>add(1,2);
3

命名规则：与一般变量相同，函数名不能以数字开头，可以由任意的字母、数字和下划线组合而成。

3.4.1 匿名函数

两种优雅的用法：

• 我们可以将匿名函数作为参数传递给其他函数，这样，接收方函数就能利用我们传递的函数来完成某些事情（回调函数）
• 我们可以定义某个匿名函数来执行某些一次性任务（自调函数）

3.4.2 回调函数

例1:

function invoke_and_add(a,b){
	return a()+b();
}
function one(){return 1;}
function two(){return 2;}
>>>invoke_and_add(one,two);
3

事实上，可直接用匿名函数来代替one()和two()，作为目标函数的参数

invoke_and_add(function(){return 1;},function(){return 2;})

当我们将函数a传递给函数b，并由b来执行a时，a就成了一个回调函数(callback functions)。如果这是a还是一个无名函数，我们就称它为匿名回调函数。

回调函数的优势：

• 它可以让我们在不做命名的情况下传递函数(这意味着可以节省全局变量)；
• 我们可以将一个函数调用操作委托给另一个函数（这意味着可以节省一些代码编写工作）；
• 有助于提升性能。

3.4.3 回调示例

定义两个函数：

//通过循环对接受参数乘以2
function multiplyByTwo(a,b,c){
	var i,ar=[];
	for(i=0;i<3;i++){
	ar[i]=arguments[i]*2;
	}
	return ar;
}
//只接受一个值，加一返回
function addOne(a){
	return a+1;
}

实现这三个元素在两个函数间传递

>>>var myarr=[];
>>>myarr=mulytiplyByTwo(10,20,30);
>>>for(var i=0;i<3;i++){myarr[i]=addOne(myarr[i]);}
>>>myarr
[21,41,61]

改善：对mulytiplyByTwo()函数做改动，使其接受一个回调函数，并在每次迭代操作中调用它。

function mulytiplyByTwo(a,b,c,callback){
	var i,ar=[];
	for(i=0;i<3;i++){
		ar[i]=callback(arguments[i]*2);
	}
	return ar;
}

>>>myarr=mulytiplyByTwo(1,2,3,addOne);
[3,5,7]

也可以用匿名函数代替addOne()，节省额外的全局变量。

>>>myarr=mulytiplyByTwo(1,2,3,function(a){return a+1});
[3,5,7]

使用匿名函数也更易于随时根据需求调整代码。例如：

>>>myarr=mulytiplyByTwo(1,2,3,function(a){return a+2});
[4,6,8]

3.4.4 自调函数

这种函数可以在定义后自行调用。只需将匿名函数的定义放进一对括号中，然后外面再紧跟一对括号即可。其中，第二对括号起到的是“立即调用”的作用，同时它也是我们向匿名函数传递参数的地方。

(
	function(name){
		alert('Hello'+name+'!');
	}
)('dude')

好处是不会产生任何全局变量。缺点是无法重复执行（除非放在某个循环或其他函数中）。

匿名函数最适合于执行一些一次性的或初始化的任务。

3.4.5 内部（私有）函数

function a(param){
	function b(theinput){
		return theinput*2;
	};
	return 'The result is'+b(param);
};

也可以改用函数标识记法：

var a=function(){
	var b=function(theinput){
		return theinput*2;
	};
	return 'The result is'+b(param);
};

调用全局函数a()时，本地函数b()也会在内部被调用，b()在a()以外不可见，b()也被称之为私有函数。

>>>a(2);
"The result is 4"
>>>b(2);
b is not defined

使用私有函数的好处主要有以下几点：

• 有助于确保全局名字空间的纯净性（意味命名冲突的机会很小）
• 私有性（可以选择只将一些必要函数暴露给“外部世界”，并保留属于自己的函数，不为应用程序其他部分所用）

3.4.6 返回函数的函数

function a(){
	alert('A!');
	return function(){
		alert('B!');
	};
}

在这个例子中，函数a()会在执行它的工作（说“A!”）之后返回另一个函数b()。而b()又会去执行另外一些事情(说"B!")。我们只需将该返回值赋值给某个变量，然后就可以像使用一般函数那样调用它了。

>>>var newFunc=a();
>>>newFunc();

上面第一行执行的是alert('A!')，第二行执行的是alert('B!');

如果想让返回的函数立即执行，也可以不用将它赋值给变量，直接在该调用函数后面再加一对括号即可，效果是一样的。

>>>a()();

3.4.7能重写自己的函数

• 从外部重定义函数（将函数返回值赋值给函数本身）
  
  上例中，也可以通过a()的返回值来重写a()函数自己：

    >>>a=a();//当前该句执行alert('A!')，但若再次调用a()，它就会执行alert('B!')了。
  

  这对于要执行某些一次性初始化工作的函数来说会非常有用。这样一来，该函数可以在第一次被调用后重写自己，从而避免了每次调用时重复一些不必要的操作。

• 函数从内部重写自己

    function a(){
    	alert('A!');
    	a=function(){
    		alert('B!');
    	};
    }
  

  这样一来，当我们第一次调用该函数时：

  • alert('A!')将会被执行(可以视之为一次性的准备操作)；
  • 全局变量a将会被重定义，并被赋予新的函数。
    
    而如果该函数再被调用的话，将执行的就将是alert('B!')了。

• 组合型应用示例：

    var a=function(){
    	function someSetup(){
    		var setup='done';
    	}
    	function actualWork(){
    		alert('Worky-worky');
    	}
    	someSetup();
    	return actualWork;
    }();
  

  在这个例子中：

  • 使用了私有函数——someSetup()和actualWork()。
  • 也使用了自调函数——函数a()得定义后面有一对括号，因此它会执行自行调用。
  • 函数第一次被调用时，会调用someSetup()，并返回函数变量actualWork的引用。返回值中是不带括号的，因此该结果仅仅是一个函数引用，并不会产生函数调用。
  • 由于这里的执行语句是以var a=...开头的，因而该自调函数所返回的值会重新赋值给a。

• 浏览器特性探测技术

  这项技术对于某些浏览器相关的操作会相当有用。因为在不同浏览器中，实现相同任务的方法可能不同，浏览器的特性不可能因为函数调用而发生任何改变。因此最好选择就是让函数根据其当前所在的浏览器来重定义自己。这就是所谓的“浏览器特性探测”技术。（后面章节展示示例）。