JavaScript总结2--函数

一、定义函数

在js中，函数也是对象，能赋值给变量，能当作参数，可以设置属性，和调用他拥有的方法。函数的toString（）方法，会返回他完整的函数内容。他有两个定义方法，函数表达式和函数声明。当一个函数作为构造函数时，首字母大写！函数声明在js运行前和变量声明一样被js提到所处作用域的最前面。函数可以定义在另一个函数的内部，也可以当作另一个的函数的return返回值。由于变量声明的hoisting特性，所以在函数中最好都在函数顶部声明有可能用到的所有变量。

函数声明: （[ ]括起来表示可有可无。）

function 函数名称 ( [ 参数 ] ){ 函数体 }

函数表达式：

function [函数名称] ([参数]) { 函数体 }

关于函数表达式，(function ([参数]) { 函数体 }([参数]))表示立即执行。eg：

(function (){
  alert("1");
}());

因为在js中函数也是对象，所以可以用构造函数来定义函数。

var f = new Function("x","y","z","return x + y - z;");
f(2,3,9);

Function可以输入任意数量的实参，最后一个字符串表示函数体。

二、函数的调用

第一种就是函数名加括号 FunctionName（），当他作为一个对象方法调用，并且返回自身，然后还可以再接着调用，这是函数的链式调用；

var x = {
  count:1,
  add:function(){
    this.count ++;
    return this;
  }
};

x.add().add().add();//x.count = 4;

 

第二种是用new关键字，作为构造函数条用，new FunctionName（）；

第三种是利用call（），apply（）间接调用。他们的第一个参数都是当前函数执行上下文，也就是this,,如果第一个参数是null或者undefined，那么默认this为window。call后面的参数作为函数的实参，而apply后面的实参都放入一个数组中。

function test(x,y,z){
    return x + y + z;
}

test.call(null,1,2,3);

test.apply(null,[1,2,3]);

 

他的调用方式影响他的上下文this。如果就是普通函数调用，this就是window；如果是方法调用，this就是调用这个方法的对象；如果是当作构造函数调用，他会创建一个新对象，那么this就是他创建的这个新对象，如果用call或者apply间接调用，this就是他们的第一个参数。

三、函数传参

JavaScript的函数在传参这点做得很高级，但是不够严谨，太过随意。当传入个数少于函数的形参个数时，剩下的形参都是undefined，为了避免出错，最好用 || 给默认值。

而当传入个数多余形参个数时，也没有关系。虽然没法直接获得未命名值的引用，但是参数对象解决了这个问题。在函数体内，arguments指向实参对象的引用，他是一个类数组对象，从0开始，依次是传入参数的顺序，多余的为undefined。在arguments中有个callee属性，他是指当前正在执行的函数，可以调用的，当然乱用会产生死循环，不断的自己执行自己。

function test(){
    console.log(arguments[4]);
    console.log(arguments.callee);
    return arguments[0] + arguments[1] + arguments[2];
}

test(1,2,3);

var t = test;//函数作为值来使用
t(1,2,3,4);

 

四、将函数作为命名空间

如果要写一段可复用的js代码，方便以后在其他项目中的使用，那么就应该把他放在一个函数中，因为并不能保证自己定义的变量是否和当前项目的全局变量重名。此时，这个函数名的作用就类似于命名空间，他把全局变量变成了函数的局部变量，并且可以向全局环境中隐藏一些变量。

五、函数作用域及作用域链（Scope Chain）

函数的作用域决定了参数和变量的生命周期，可见性，并且减少了命名冲突，提供了自动内存管理（GC,垃圾回收）。在一个js文件中，包括很多函数，每个函数都有自己的作用域，他们在一起就有了作用域链。内部的一个[[Scope]]属性包含了函数被创建时所处作用域中的对象集合，这个对象就是函数的作用域链。作用域链用来查找变量，需要注意的是，函数里声明变量一定要用var 否则他会变成全局变量的。例如：

var window_x = "window";
function test(){
    var parentsArg = arguments;
    var test_x = "test";              
    function inner(){
        console.log(test_x);
        console.log(window_x);
        return parentsArg[0] + parentsArg[1] + parentsArg[2];
    }         
    return inner();
} 

 

变量的查找

函数inner的作用域链可以看作 window--->test--->inner。例如查找window_x，首先查找inner的作用域是否有该变量，没有就接着作用域链上一级（test）查找，直到该标示符被找到，如果查找到window的全局作用域都没有该标示符，那么就要抛出异常了：xxx is not defined.(goolge chrome)。可以猜到，标示符所处的位置越深，他的查找会越慢，window的全局变量总是最后一个查找的。

作用域链（Scope Chain）的创建：inner为例

1.inner被创建，他的作用域链[[ scope ]]被填充test作用域中的对象集合；test被创建时，[[scope]]被填充了全局作用域的对象集合(window，document…….)。这些[[scope]]中的对象代表此函数的中可访问的数据。

2.inner被执行时，他要建立一个内部对象，称为“运行期上下文”，这个对象定义了函数执行时的环境。函数每次执行都会创建一个新的“运行期上下文”，当函数执行完毕时这个对象会自动销毁。一个运行期上下文有自己的作用域链[[scope]]，scope中包括运行函数的scopeChain中包含的对象（复制过去的）。

3.上一步完成后，一个被称做“激活对象”的新对象就为运行期上下文创建好了。他包含所有可访问的局部变量，命名参数，参数集合等等。然后这个激活对象被推到作用域链的最前端，生命周期和作用域链一样。

此时，inner的作用域链包含了3个对象，inner的激活对象，outer的激活对象，window对象。

六、闭包 closure

闭包在《JavaScript权威指南》中的解释：函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中称为“闭包”。通俗点说，一个函数就是一个闭包。

1.闭包的作用

在js中，函数内可以随意访问全局变量，函数外想访问函数内的变量就不可以了（可以用这个特性来模仿类的私有变量）。但是闭包的特性解决了这个问题，他可以在外面访问函数内的局部变量。

function outer(){
  var outer_x = 0;

function inner(i){
    i = typeof i == "number" ? i : 0;
    outer_x += i;
    console.log("我要把outer_x + " + i + " = " + outer_x);
  }


  return inner;

}

var test = outer();
test(1);//我要把outer_x + 1 = 1
test(2);//我要把outer_x + 2 = 3
test(3);//我要把outer_x + 3 = 6
test(4);//我要把outer_x + 4 = 10

function outer1(i){
  var outer_x = 0;
  i = typeof i == "number" ? i : 0;
  outer_x += i;
  console.log("我要把outer_x + " + i + " = " + outer_x);
}
var test1 = outer1;
test1(1);//我要把outer_x + 1 = 1
test1(2);//我要把outer_x + 2 = 2
test1(3);//我要把outer_x + 3 = 3
test1(4);//我要把outer_x + 4 = 4

 

在这里例子中，outer返回一个匿名的函数，这个匿名函数可以访问outer的局部变量，并且加一个指定的数字。这样可以通过外部的i来影响outer的局部变量。outer1也实现对局部变量outer_x加一个指定数字。对比一下他们的运行结果，可以发现，在有闭包的函数中，他的变量并没有被垃圾回收机制（GC）回收。那么闭包还可以用来让一些局部变量一直保存在内存中。需要小心内存泄漏。

为什么不会被GC回收？

outer函数返回了inner函数的引用给了test。inner的作用域链包括了inner，outer的激活对象，还有window对象，test在外部引用了inner，这个引用不放手，inner的作用域链就不会被GC回收，又因为inner作用域链包含了outer激活对象，那么处于outer作用域链的局部变量自然也不会被GC回收。

2.同一个作用域中的多个闭包

若同一个作用域链中有多个闭包，他们会共享同一个局部变量。并且关联到闭包的作用域链都是活动的。例如我想在一个函数中创建10个闭包。

function test(){
    var arr = [];
    for(var i = 0; i < 10; i++){
        arr[i] = function(){
        return i;
        }
    }
    return arr;
}

var arr = test();
var i = 0;
while(i<10){
  console.log( i + ":" + arr[i++]());
}    

 

可以发现返回的arr数组中，每个都是10。为什么？因为当我执行var arr = test（）时，i = 10，所有闭包都会共享这个i。嵌套的函数他不会将作用域内的局部变量复制一份的。arr[i] 的i没有受到影响，是因为这个i属于test的局部变量，并且没有在嵌套函数中。怎么样才能使用闭包达到需要的效果呢？

有2种方法，第一是把变量i变成全局变量，由于这个方法会污染全局变量，并不好。

var i = 0
function test(){
    var arr = [];
    for(; i < 10; i++){
        arr[i] = function(){
        return i;
        }
    }
    return arr;
}    

 

第二种方法是让闭包函数立即执行，并且返回当前的值给外部函数的局部变量。

 

function test(){
    var arr = [];
    for(var i = 0; i < 10; i++){
        arr[i] = (function(){
        return i;
        })();
    }
    return arr;
}

var arr = test();
var i = 0;
while(i<10){
  console.log( i + ":" + arr[i++]);
}

 

3.闭包的上下文this

下面的这个例子很清楚，一个函数内嵌套的函数无论在普通函数中，还是在方法中，他的上下文都是window。

var name = "The Window";   
var myObject = {  
　　name : "My Object",  
　　getThis : function(){
    console.log("方法：" + this.name);//方法：My Object
　　　　return function(){  
　　　　　　console.log("方法中的闭包：" + this.name);  //方法中的闭包：The Window
　　　};   
　　}   
}; 

myObject.getThis()();

function outer(){
  var name = "outerName";
  function inner(){
    //return this.name  //The Window
    return name; //outerName
  }
  return inner;
}
console.log("普通函数的闭包：" + outer()());