JavaScript学习之路—函数（一）

 

函数：只定义一次，可被调用或执行任意次的代码块。

JavaScript函数是参数化的：函数的定义会包含一个被称为形参（parameter）的标识符列表。

注意事项：

1.  函数的名称将会成为函数内部的一个局部变量。
2. 变量的声明是会提前的，函数语句定义的函数也是会被提前的。所以我们可以在函数声明前使用函数。
3. 变量的赋值是不会被提前的，所以我们不能在“表达式定义”的函数之前使用该函数。
4. 大多数函数中有return语句，return语句终止函数，并返回其表达式（return语句中存在表达式）的值给调用者；如果return语句没有相关的表达式，则返回结果是undefined。
5.  如果一个函数中没有return语句，则该函数只执行函数体中的每条语句，并返回undefined给调用者。
6.  构成函数主体的JavaScript代码在函数定义时不执行，只有在调用的时候才执行。
7. this是一个关键字，不是变量，也不是属性，是“函数调用的上下文”。在JavaScript中不允许给this赋值。

*/

******************************************************************

/*

函数的命名规范：

1.   函数的名称通常使用动词，或者动词为前缀的词组。
2.   函数的名称的首字母小写。
3.   当一个函数名称包含多个单词时，除第一个单词之外的所有单词的首字母均大写。如：printProps

*/

******************************************************************

/*

函数的定义方式：

1. 函数语句定义

例：打印一个对象的所有属性和值

function printProp(obj)
{
for(var p in obj){
console.log(p+":"+obj.p+"/n");
}
}

 

2. 表达式定义，其实质是将定义的函数复制给一个变量。

例：

var Add=function(x,y){
   returnx+y;
  };

以下写法也是表达式方式定义函数，但是为了代码的紧凑性，一般不写函数名（这里是“sum”）

表达式定义的函数比较适用于只执行一次的函数。

例：

var Add=functionsum(x,y){
return x+y;
};

*/

******************************************************************

/*

函数的调用：为形参提供实参的值，此外在函数的每次调用还拥有另外一个值（即本次调用的上下文）是this关键字的值。

函数的调用方式：

1. 作为函数。此时一般不用this关键字

例：

function add(x,y){
return x+y;
}
var result=add(3,4)//函数作为函数调用
console.log(result)//打印结果是7

2. 作为方法。此时函数是对象的一个属性里的JavaScript函数。作为方法调用时候，函数的调用上下文是这个包含这个属性的对象,此时函数里面的this就是当前对象。

例：

var calculator={
a:1,
b:2,
add:function(){
this.result=this.a+this.b;//this代指当前对象
}
}
calculator.add();//函数作为calculator的方法调用；<=>calculator[add]
console.log(calculator.result)//打印结果是3；

=>任何一个函数只要作为方法调用都会传入一个“隐式”的“实参”，该“实参”是一个对象，即方法调用的母体。该实参我们在函数中用this表示。

=>当方法的调用结果返回值是一个对象，该对象还可以调用其自身的方法，这样就形成了方法的“链式调用”。因此当方法不需要返回值的时候我们直接返回this，这样就可以很容易的进行“链式调用”。

例：

var shape ={
setX:function(a){
this.x=a;
return this;
},
setY:function(b){
this.y=b;
return this;
},
setSize:function(c){
this.size=c;
return this;
},
setOutline:function(d){
this.outlineCorlor=d;
return this;
},
setFill:function(e){
this.fillColor=e;
return this;
},
draw:function(){
console.log("X:"+this.x+"/n"+"Y:"+this.y+"/n"+"outlineCorlor:"+this.outlineCorlor+"/n"+"fillColor:"+this.fillColor+"/n")
}
}
shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw();
 

3. 作为构造函数。如果函数或者方法在调用之前带有关键字new，他就构成了构造函数调用。

如果构造函数调用在圆括号内包含一组实参列表，则先计算这些实参表达式，然后将计算结果传入函数体内。

若果构造函数没有形参，则构造函数调用可以省略圆括号。

例：

var people=new Object();//<=>var o=new Object;

“构造函数调用“创建一个空对象，”构造函数“试图初始化这个对象，并将这个对象作为其调用的上下文。因此，构造函数可以使用this来引用这个”新对象“，即使构造函数看起来像是一个方法调用。例如在表达式newo.m()中，this（调用上下文）不是对象o，而是new出来的“新对象”。

构造函数通常不使用return关键字，不使用return关键字，构造函数调用返回结果是构造的这个新对象；使用了return语句但是没有指定返回值，构造函数调用返回结果是构造的这个“新对象”；构造函数使用了return语句，但是返回结果呢是一个原始值，构造函数调用的结果是忽略返回值，返回构造的这个“新对象”；使用了return语句且return语句的返回结果是一个对象，构造函数调用返回结果就是return语句返回的对象。

4. 通过他们的call()和apply()方法间接调用。

call()和apply()两个方法都允许显示制定调用所需的this值，也就是说：“任何函数可以做为任何对象的方法来调用，哪怕这个函数不是那个对象的方法”。

//两个方法都可以指定调用的实参，call()方法使用他自有的实参列表作为函数的实参，apply的方法则需要以数组的形式传入实参。

两个函数的第一个实参是调用函数的母对象，是调用的上下文，在函数体内使用this来获得对他的引用。

其中call()的第一个实参作为“调用上下文”，其余的实参都是传入带调用函数的参数值。aplly方法类似，只是传入调用函数的实参用中括号括起来。

例：以对象o的方法的形式调用函数f(),并且传入两个参数（1和2）给f函数

 

f.call(o,1,2);
f.apply(o,[1,2]);//两种写法等价

自执行函数：函数体在定义后立马执行；

结构：

(function(){}())    等价于  (function(){})();

解析：function(){}表示函数定义，其后的()表示调用，首位的圆括号表示是一个整体，后一种方式不提倡用

例如：

(function(a){alert(a)}(3))//执行结果是弹出提示框，提示信息是3.  <=>(function(a){alert(a)})(3);