JS之Function类型理解

JS之Function类型理解

简述

函数实际上也是对象，每个函数都是Function对象的实例，因此，函数名是一个指向函数对象的指针，所以，函数名不会与某个函数绑定。

定义函数的方式

• 使用函数声明语法创建
  function sum (n1,n2)
  {
  return n1 + n2;
  }

• 使用函数表达式定义函数
  var sum = funcction (n1,n2) { return n1 + n2};

• 使用Function构造函数来创建
  var sum = new Function(“n1”, “n2”,“return n1 + n2”);

注意
使用构造函数来创建函数，这种语法会解析两次代码，第一次是解析ECMAScript 代码，第二次会解析函数中的字符串，从而影响性能。
通过Function构造方法来创建函数可以很直观的理解“**函数是对象，函数名是指针 **”

那么，由此可知，使用不带括号的函数名是访问函数指针，带括号的是函数

重载

函数没有重载

可以从两个方面来理解：

• 重载是函数名相同，而函数参数列表不同。在Javascript中，函数名是一个指针，因为函数是对象，函数名是指针，所以，当有两个相同名字的函数时，其实质是对函数名那个变量进行了两次赋值，那么创建第二个函数后，就会覆盖第一个函数，因为函数名的值发生了变化，由第一个函数的引用变成了第二个。

function sum(n1)
{ 
return n1 + 10
}
function sum(n1) 
{
return n1 + 20
}
sum(10); 
//结果为30,因为在创建第二个函数后，sum的值变成函数function(n1){return n1+20}
//的引用了

• （个人理解）重载是要函数名相同，参数序列不同，但是在JS中，传入函数的参数可以是任意多个，比如说，sun(n1,n2)， 我在调用时可以sun(1,2,3,4,5),也可以sun()等等，这都不会报错，详细原因在下面的函数参数部分。
  ###函数声明与函数表达式
  函数表达式会在代码执行到该句时才会被解析。
  解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问)。

alert(sum(10,10));  //结果是20
function sum(n1,n2)
{
return n1 + n2;
}

究其原因：在代码执行之前，解析器通过函数声明提升将函数声明添加到执行环境。在对代码求值时，JS引擎在第一遍会声明函数并将他们放到源代码树的顶端。
但是，若是写成下面的形式，则会发生错误：

alert(sum(10,10)); 
var sum = function (n1,n2)
{
return n1 + n2;
}

原因是，函数位于一个初始化语句中，而不是一个函数声明，因此，sum不是一个对函数的引用。

函数作为值传递

由于函数名本身是一个变量，因此其可以作为一个值进行传递。即其可以作为参数传递，也可以作为返回值。

function callSomeone(someFunc,someArguement)
{
return someFunc(someArguement);
}

从这里可以看出，函数第一个参数是一个函数。

---

终于可以讲到函数内部的了

---

函数参数

理解参数

ECMAScript中的参数与其他语言中的参数有些不同。ECMAScript函数不介意传进来参数的多少，也不介意参数的类型。假设我们定义的一个函数有两个形参，那么我们传进去0个，一个，三个等等多少个参数都是可以的。因为，参数在内部是用一个数组表示的。 函数接收到的始终是这个数组，而不去关心数组中的参数的有无或者多少。在函数内部，我们可以通过arguments对象来访问参数数组。

其实，arguments对象只是与数组类似（其并不是Array的实例），因此，arguments对象可以使用与数组相同的方式来访问内部参数，即arguments[0]等。可以通过length属性得到其长度。

关于arguments,还有一点需要注意：
arguments中的值永远与对应的命名参数保持同步。

function doAdd(n1,n2)
{
arguments[1] = 10;
alert(arguments[0] + n2);
}

假设我们传进来两个参数10，11。那么对应的在arguments对象中，arguments[0],arguments[1] 的值分别为10，11. 如果我在函数中将arguments[1]的值改为20，此时，在该函数中n2的值也变成了20.
这种影响是单向的：修改n2的值不会导致arguments[1]的值发生改变。另外，若我们只传入一个参数，那么修改arguments[1]的值，不会使n2的值发生变化，这是因为，arguments数组的长度是由传进的参数的个数决定的，而不是函数的命名参数的个数。也就是说，arguments数组的长度在参数传进来时就已经固定，不会发生改变。对于没有传值的命名参数，将被自动赋予undefined

 window.onload = function()
        {
            add(1,2);
        }
        function add(n1,n2,n3)
        {
            arguments[2] = 12;
            arguments[3] = 22;
            alert(arguments.length);
            }

结果会显示arguments的长度为2

传递参数

在ECMAScript中，函数的参数均是按值传递的。访问变量有按值和按引用两种方式，而参数只能按值传递。其实很好理解，参数传递就是把函数外面的值复制给函数内部的参数。

函数内部属性

函数内部有两个特殊的对象：arguments 和 this.

• arguments前面已经说过，但是该对象还有一个属性：callee. 该属性是一个指针，指向拥有这个arguments对象的函数。

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

这个简单的递归函数有个问题：函数的执行与函数名factor紧紧地耦合在一起了，那么为了消除这种紧密耦合，可以使用arguments.callee。

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

再看一个例子：

var trueFactor = factor;
factor = function ()
{
return 0;
}
alert(trueFactor(5));// 120
alert(factor()); //0

在解除了函数体内的代码与函数名的耦合关系后，trueFactor仍可以正常计算阶乘。

• this : this 引用的是函数据以执行的环境对象。

window.color = "red";
var o = {color:"blue"};
function sayColor()
{
alert(this.color);
}
sayColor();  //"red" , 此时调用函数，函数中this指全局作用域window
o.sayColor = sayColor;
o.sayColor();
 //"blue"  此时，sayColor()由对象o调用，this则就指向了o,因此结果为"blue"

• ECMAScript中也规范化了另一个函数对象的属性：caller 。 这个属性中保存着调用当前函数的函数的引用。如果函数是在全局作用域中被调用的，则它的值为null

function outer()
{
inner();
}
function inner()
{
alert(inner.caller);
}
outer();

那么，结果会显示outer()函数的源代码。
原因是：outer()函数内部会调用inner()函数，而inner()函数内部则显示调用inner()函数的函数的引用，因此结果为outer()函数的源代码。

函数属性和方法

上面了解了函数内部属性，接下来了解一下函数属性。
由于函数是对象，因此函数也有属性和方法。
每个函数都有两个属性：length 和 prototype。 其中length表示函数希望接收的命名参数的个数。

function sum(n1,n2){return n1 +n2}
function say(content){return content}
alert(sum.length); //2
alert(say.length); //1

关于prototype,对于ECMASript中的引用类型而言，prototype是保存它们所有实例方法的真正所在。类似于toString()和valueOf()等方法实际上都是保存在prototype中的，只不过是通过他们各自对象的实例调用而已。

每个函数都有两个非继承而来的方法：apply() 和 call(). 这两个方法的用途均是 在特定的作用域中调用函数 * , 实际上等同于 ** 设置函数体内this的值.*
apply()接受两个参数: 第一个参数是在其中运行函数的作用域， 第二个是参数数组。 这个参数数组可以是Array实例，也可以是arguments对象。

function sum(n1,n2){return n1 + n2}
function callSum1(n1,n2){return sum.apply(this,arguments)}
function callSum2(n1,n2){return sum.apply(this,[n1,n2])}
alert(callSum1(10,10));//20
alert(callSum2(10,10));//20

call()方法与apply()方法的作用相同，不同的是它们接收参数的方式不同。apply()是传入一个参数数组，而call()则是要把所有的参数列举出来。

function sum(n1,n2){return n1 + n2}
function callSum1(n1,n2){return sum.call(this,n1,n2)}

call() 和apply()的强大之处在于：扩充函数赖以执行的作用域

window.color = "red";
var o = {color:"blue"};
function sayColor()
{
alert(this.color);
}
sayColor();  //red
sayColor.call(this);//red
sayColor.call(window);/red
sayColor.call(o);//blue

使用apply( )和call( )来扩充作用域的最大好处在于对象不需要与方法有任何的耦合关系。

• ECMAScript 5 还定义了另外一种方法：bind()。这个方法会创建一个函数实例。其this会绑定到传递给bind()函数的值。

window.color = "red";
var o = {color:"blue"}
function sayColor()
{
alert(this.color);
}
var objColor = sayColor.bind(o);
objColor();   //blue

sayColor()函数调用bind()函数并传入了o创建了函数 objColor(),此时，objColor()
函数内的this 指向o。