【javascript 函数基础知识】

时间:2024-01-01 09:24:11

函数实际上是对象,每个函数都是 Function 类型的实例,而且都会与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。

【概念标签】

函数申明提升  函数表达式  匿名函数  作为值的函数  arguments 对象  callee 的属性  递归函数  函数的 call() 方法  函数的 bind() 方法  闭包  函数重载

【定义函数的方法】

1.定义函数的三种方法:函数申明和函数表达式。

函数申明的语法如下:

function functionName(arg0,arg1,agr2){
//函数体
}

函数申明有一个重要特征是函数申明提升,即在代码执行之前会先读取函数申明。这意味着可以把函数的申明语句放在调用它的语句后面,例:

sayHi();
function sayHi(){
alert('hi');
}

函数表达式语法如下:

var myFunction = function(arg0,arg1,arg2){
//函数体
};

函数申明 {} 末尾不需要添加分号,而使用函数表达式的时候 {} 末尾需要添加分号,就像申明其他变量一样。

这种情形看起来像是常规的变量赋值语句,即创建一个函数并将它赋值给变量myFunction 。这种情况下创建的函数叫匿名函数,因为function关键字后面没有跟标识符。函数表达式和其他表达式一样,在使用前必须先赋值,以下的代码会导致错误:

sayHi();   //错误:函数还不存在
var sayHi = function(){
alert('hi');
}

使用 Function 构造函数(不推荐使用),语法如下:

function sum = new Function ('num1','num2','return num1 + num2');

【作为值的函数】

函数名本身就是一个变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。例如,假设有一个对象数组,我们想要根据某个对象属性对数组进行排序。而传递给数组 sort() 方法的比较函数要接收两个参数,即要比较的值。可是我们需要一种方式来指明按照哪个属性来排序。下面我们来实现这个案例。要解决这个问题,可以定义一个函数,它接收一个属性名,然后根据这个属性来创建一个比较函数,代码如下:

function createComparisonFunction(propertyName){
return function(obj1,obj2){
var value1 = obj1[propertyName];
var value2 = obj2[propertyName]; if(value1 < value2){
return -1;
}
if(value1 > value2){
return 1;
}
else{
return 0;
}
}
}

这里要注意一行代码,var value1 = obj1[propertyName];   这条语句使用方括号表示法来取得给定属性的值,语句的执行结果与 obj1.propertyName 是一样的。需要注意的是,在使用方括号语法时,应该将要访问的属性以字符串的形式放在方括号中。例如:

person['name'];
person.name;

接下来我们创建一个对象数组,并以指定的方式对这个对象数组进行排序,代码如下:

var data = [{name : 'Zachary',age : 19},{name : 'Nicolas',age : 29}];
data.sort(createComparisonFunction('name'));
console.log(data[0].name); // Nicolas
data.sort(createComparisonFunction('age'));
console.log(data[0].name); // Zachary

这里我们涉及到一个 sort() 方法,该方法用于对数组的元素进行排序。例如以下的代码实现了对数组元素按照从小到大的顺序排列:

function sortNumber(a, b)
{
var obj = a - b;
return obj;
} var arr = new Array(6)
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1"; document.write(arr + "<br />");
document.write(arr.sort(sortNumber));

代码的输出结果为:

10,5,40,25,1000,1
1,5,10,25,40,1000

【函数的内部属性】

在函数内部,有两个特殊的对象, arguments 和 this 。

首先介绍 arguments 对象。arguments 是一个类数组的对象,并不是 Array 的实例,它包含着传入函数中的所有参数,可以通过方括号语法访问它的每一个元素。使用 arguments 的 length 属性可以确定传进来多少个参数,例如以下代码:

function showArguments(){
console.log(arguments.length,arguments[0],arguments[1],arguments[1]);
}
showArguments('arg1','arg2','arg3');

代码的输出结果为:3 "arg1" "arg2" "arg2"

arguments 对象有一个名叫 callee 的属性,这个属性是一个指针,指向拥有 arguments 对象的函数。以下代码实现了经典的递归阶乘函数:

function factorial(num){
if(num <= 1){
return 1;
}
else{
return num * factorial(num - 1);
}
}

在这里我们用到了一个递归算法,需要熟悉递归函数的概念,递归函数是在一个函数通过名字调用自身的情况下构成的。但是这个函数的执行与函数名 funcFactorial 紧紧耦合在了一起,为了消除这种紧密的耦合现象,我们可以使用 arguments.callee ,代码如下:

function factorial(num){
if(num < 1){
return 1;
}
else{
return num * arguments.callee(num - 1);
}
}

这样的话无论引用函数时使用什么名字,都可以保证正常完成递归调用。例如以下代码:

function factorial(num){
if(num < 1){
return 1;
}
else{
return num * arguments.callee(num - 1); //使用了 arguments.callee
}
} var newFactorial = factorial;
factorial = function(){
return 0;
}
var result1 = factorial(5); //
var result2 = newFactorial(5); //
console.log(result1,result2);

如果我们不使用 arguments.callee ,例如以下的代码,便不能够正确的调用 newFactorial 函数:

function factorial(num){
if(num < 1){
return 1;
}
else{
return num * factorial(num - 1); //没有使用 arguments.callee
}
} var newFactorial = factorial;
factorial = function(){
return 0;
}
var result1 = factorial(5); //
var result2 = newFactorial(5); //
console.log(result1,result2);

这是什么原因呢?我自己思考了一下,得到的结论如下:我们使用了这样一个语句 var newFactorial = factorial ,使用不带圆括号的函数名是访问函数指针,而不是调用函数。所以 newFactorial 访问到的是 factorial 的函数指针,相当于我们把递归函数变成了如下的样子:

function newFactorial(num){
if(num < 1){
return 1;
}
else{
return num * factorial(num - 1);
}
}

这个时候 else 语句还在执行 factorial ,显然是调用不到自身函数的,所以如果我们把代码改为如下的样子:

function factorial(num){
if(num < 1){
return 1;
}
else{
return num * newFactorial(num - 1); // 改动的地方
}
} var newFactorial = factorial;
factorial = function(){
return 0;
}
var result1 = factorial(5); //
var result2 = newFactorial(5); //
console.log(result1,result2);

这样我们便可以输出我们想要的结果了。

接下来介绍 this 对象。this 引用的是函数据以执行的环境对象,来看下面的例子:

window.color = 'red';
var o = {color : 'blue'};
function sayColor(){
console.log(this.color);
}
sayColor(); // red
o.sayColor = sayColor;
o.sayColor(); // blue

上面的这个函数 sayColor() 是在全局作用域中定义的,它引用了 this 对象。由于在调用函数之前 this 的值并不确定,因此 this 可能会在代码执行过程中引用不同的对象。当在全局作用域中调用  sayColor() 的时候, this 引用的就是全局对象 window ,所以对 this.color 的求值就转换成了对 window.color 的求值。当我们把这个函数赋值给对象 o 并调用 o. sayColor() 时, this.color 求值就会转换为 o.color 求值。

【函数的 call() 方法】

call() 方法强大的地方在于它可以扩充函数的作用域,检查如下的代码:

window.color = 'red';
var o = {color : 'blue'};
function sayColor(){
console.log(this.color);
}
sayColor(); // red
sayColor.call(this); // red
sayColor. call(window); // red
sayColor.call(o); //blue

观察代码的最后一行,当运行 sayColor.call(o) 的时候,函数体内的 this 对象指向了 o ,这样便可以不用之前的 o.sayColor = sayColor;o.sayColor();  这个语句了。

【函数的 bind() 方法】

这个方法会创建一个对象实例,其 this 的值会被绑定到传给 bind() 函数的值。检查如下代码:

window.color = 'red';
var o = {color : 'blue'};
function sayColor(){
console.log(this.color);
}
var newSayColor = sayColor.bind(o);
newSayColor(); //blue

【闭包】

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另外一个函数。

【没有重载】

函数重载:同一范围中声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数、类型或者顺序)必须不同,也就是说用同一个运算符完成不同的运算功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。

将函数名想象为指针,有助于理解为什么 ECMAScript 中没有函数重载的概念。请看如下代码:

function addNumber(str){
return str + '100';
}
function addNumber(num){
return num + 200;
}
window.onload = function(){
var addContent = addNumber('100');
console.log(addContent);
}

设想一下,倘若函数重载生效的话,以上代码输出的内容应该为 : 100100 ,而正确的输出结果为 : 100200 。再考察如下的代码:

function addNumber(str1,str2){
return str1 + str2 + '102';
}
function addNumber(num){
return num + 200;
}
window.onload = function(){
var addNum = addNumber('100','101');
console.log(addNum);
}

输出结果为 : 100200

函数是编程重要的一部分,需要加强练习,多多学习。贴一句鼓励自己的话在这里:不会不可怕,不学才可怕。