javascript嵌套函数的效率问题

javascript嵌套函数的效率问题

  javascript自诞生以来就是一门受争议的编程语言，很多人也对javascript的语法表示不解，例如javascript嵌套函数。本文来自Nettuts+的一篇教程，详细的介绍了javascript中嵌套函数效率问题，从小处说起，一直说到匿名函数、继承，感觉不错。

匿名函数

    javascript开发中常用到匿名函数，例如事件处理函数、callback函数等，例如下面的事件处理函数：

1 2 3

document.addEventListener( "click" , function (evt) {       alert( "You clicked the page." );  });

 

    这里给document创建了一个事件监听，当每次页面点击之后会alert出来一条消息。跟嵌套函数一样，每次点击需要创建一次匿名函数，处理事件完成之后再销毁。

    jQuery中的each方法也是一个匿名函数，例如下面的代码，选择出来所有的a元素，并且添加each方法来处理a元素：

1 2 3

$( "a" ).each( function (index) {       this .style.color = "red" ;  });

 

    如果写成jQuery插件，可以下面的代码：

01 02 03 04 05 06 07 08 09 10 11 12

$.fn.myPlugin = function (options) {          return this .each( function () {           var $ this = $( this );              function changeColor() {               $ this .css({color : options.color});           }               changeColor();       });  };

    javascript代码定义了一个名字为myPlugin的jQuery插件，插件中有一个嵌套函数changeColor，根据上面说的，上面的代码效率不如独立出来changeColor高，所以我们可以把changeColor拿到外部来，即下面的代码：

01 02 03 04 05 06 07 08 09 10 11 12

function changeColor($obj, color) {       $obj.css({color : color});  }    $.fn.myPlugin = function (options) {          return this .each( function () {           var $ this = $( this );              changeColor($ this , options.color);       });  };

    经过修改过的jQuery插件在效率上提高了15%左右。所以说嵌套的函数越多，调用的次数越多，则可以优化的地方也越多。

使用prototype关键字

    在javascript中有prototype这个关键字，prototype的属性是实例化后的对象所共有的属性，所以上面的代码可以通过prototype改写成下面的方式：

01 02 03 04 05 06 07 08 09 10 11

function Person(firstName, lastName) {       this .firstName = firstName;       this .lastName = lastName;  }     Person.prototype.getFullName = function () {       return this .firstName + " " + this .lastName;  };     var jeremy = new Person( "Jeremy" , "McPeak" ),       jeffrey = new Person( "Jeffrey" , "Way" );

    这样getFullName的方法是定义在Person.prototype中的，为所有实例化的对象共有方法，所以jeremy和jeffrey的getFullName是相等的(http://jsfiddle.net/Pfkua/)。他们之间的关系可以通过下面的图片来解释：

jeremy和jeffrey共有getFullName

 

    通过测试，我们可以看出来，第二种方法要比第一种方法在效率上面快了18%~96%。

总结

    本文也不是说不要大家在javascript中写嵌套函数，只是要适当，要注意这个知识点，在频繁调用的函数内部是不推荐写javascript嵌套函数的。开发者写代码给用户用，为的就是高效代码提高用户体验。

英文全文：http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them