由于所有性能问题与对象成员有关,所以如果可能的话请避免使用它们。更确切地说,你应当小心地,只在必要情况下使用对象成员。例如,没有理由在一个函数中多次读取同一个对象成员的值:
function hasEitherClass(element, className1, className2){
return element.className == className1 || element.className == className2;
}
在此代码中,element.className 被访问了两次。很明显,在这个函数过程中它的值是不会改变的,但仍然引起两次对象成员搜索过程。你可以将它的值存入一个局部变量,消除一次搜索过程。修改如下:
function hasEitherClass(element, className1, className2){
var currentClassName = element.className;
return currentClassName == className1 || currentClassName == className2;
}
此重写后的版本中成员搜索只进行了一次。既然两次对象搜索都在读属性值,所以有理由只读一次并将值存入局部变量中。局部变量的访问速度要快得多。
一般来说,如果在同一个函数中你要多次读取同一个对象属性,最好将它存入一个局部变量。以局部变量替代属性,避免多余的属性查找带来性能开销。在处理嵌套对象成员时这点特别重要,它们会对运行速度产生难以置信的影响。
JavaScript 的命名空间,如YUI所使用的技术,是经常访问嵌套属性的来源之一。例如:
function toggle(element){
if (YAHOO.util.Dom.hasClass(element, "selected")){
YAHOO.util.Dom.removeClass(element, "selected");
return false;
} else {
YAHOO.util.Dom.addClass(element, "selected");
return true;
}
}
此代码重复YAHOO.util.Dom 三次以获得三种不同的方法。每个方法都产生三次成员搜索过程,总共九次,导致此代码相当低效。一个更好的方法是将YAHOO.util.Dom 存储在局部变量中,然后访问局部变量:
function toggle(element){
var Dom = YAHOO.util.Dom;
if (Dom.hasClass(element, "selected")){
Dom.removeClass(element, "selected");
return false;
} else {
Dom.addClass(element, "selected");
return true;
}
}
总的成员搜索次数从九次减少到五次。在一个函数中,你绝不应该对一个对象成员进行超过一次搜索,除非该值可能改变。