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) { 

  

    returnthis.each(function() { 

        var$this= $(this); 

  

        functionchangeColor() { 

            $this.css({color : options.color}); 

        }  

  

        changeColor(); 

    }); 

};

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

01

02

03

04

05

06

07

08

09

10

11

12

functionchangeColor($obj, color) { 

    $obj.css({color : color}); 

} 

 

$.fn.myPlugin = function(options) { 

  

    returnthis.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

functionPerson(firstName, lastName) { 

    this.firstName = firstName; 

    this.lastName = lastName; 

} 

  

Person.prototype.getFullName = function() { 

    returnthis.firstName + " " + this.lastName; 

}; 

  

varjeremy = newPerson("Jeremy","McPeak"), 

    jeffrey = newPerson("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