javascript函数

Javascript 函数

函数是js的基础模块单元，用于代码复用，信息隐藏和组合调用。javascript中的函数就是对象，对象就是“名/值”的集合并拥有一个连接到原型对象的隐形连接（Object.prototype对于函数是Function.prototype）。每个函数在创建时会附加两个隐藏属性：函数上下文和实现函数的行为代码。

调用一个函数会暂停当前函数的执行，传递控制权和参数给新函数。

除了声明时定义的形式参数每个函数还接受两个附加的参数：this和arguments。

javascript中共存在四种调用方式：方法调用模式，函数调用模式，构造器调用模式，apply调用模式。

1.方法调用模式

当一个函数被保存为对象的一个属性时，即为对象的方法。当一个方法被调用时，this被绑定到该对象。调用方式为.或[subscript]下标表达式。

如：

var person = {

   name:'simon',

   getname:function(){

       return this.name;

   }

};

person.getname();

this指代person在这个例子中。

2.函数调用模式

当一个函数并非一个对象的属性时，那么它就被当做一个函数来调用，以此模式调用函数时，this被绑定到全局对象。

person.setName = function(name){

   var that = this; //解决方法，内部函数可以通过that访问到this

   var setName = function(name){

       that.name = name;

   };

//以函数调用模式调用

   setName();

};

person.setName('chong');

3.构造器模式

如果一个函数前带上呢new来调用，那么将会创建一个连接到该函数的prototype成员新对象。同时this会绑定到那个新对象上。return使得返回this指针。

//创造构造器函数

var Person = function(name){

   this.name = name;

}

//给Person的所有实例提供一个getName的方法

Person.prototype.getName = function(){

   return this.name;

}

4.apply方式调用

apply方法让我们构建一个参数数组传递给调用函数。它允许我们选择this的值。它接受两个参数，第一个绑定给this的值，第二个是一个参数数组。

var array = [3,4];

var sum = add.apply(null,array);

通过prototype扩充语言特征

我们可以给Function.prototype增加方法来使得该方法对所有函数可用：

Function.prototype.method = function(name,func){

//确保没有该方法才添加

if(!this.prototype[name])

this.prototype[name] = func;

return this;

}

例子:

String缺少一个移除字符首尾空白的方法

String.method(‘trim’,function(){

return this.replace(/^\s+|\s+$/g,’ ’);

});

可以通过给基本类型增加方法来提高语言的表现力。

函数作用域

js存在函数作用域，在函数中定义的参数和变量在函数外是不可见的而在一个函数内部的任何位置定义的变量在该函数内部任何地方都可见。

闭包

var myObject = (function(){

   var value = 0;

   return {

       increment:function(inc){

           value += typeof inc === 'number'?inc:1;

       },

       getValue:function(){

           return this.value;

       }

   };

}());

把调用该函数后返回的结果赋给myObject，this指向myObjet,继续拥有访问value的权利。实现value的私有化。

//一个例子：给节点绑定事件处理函数显示每个节点的序号值

//事件处理器函数绑定了i本身的值而不是函数在构造时变量i的值

var add_the_handles = function(nodes){

   var i;

   for(i=0;i<nodes.length;i+=1){

       nodes[i].onclick = function(e){

           alert(i);

       }

   }

}

最后的结果是每个节点显示的都是nodes.length

修改

var add_the_handles = function(nodes){

   var helper = function(i){

       return function(e){

           alert(i);

       }

   }

   var i;

   for(i=0;i<nodes.length;i+=1){

       nodes[i].onclick = helper(i);

   }

}