使用 JS 原型构建大型 JS 应用程序的性能优势

performance benefits of using js prototype for structuring large js application

本文关键字：JS 性能 大型 原型 构建 使用 应用程序      更新时间：2023-09-26

这样做有什么好处：

HB.somepackage = HB.somepackage || {};
HB.somepackage.SomeGoodClass = function(someSelector){
    this.someSelector = someSelector;
}
HB.somepackage.SomeGoodClass.prototype.doSomeStuff = function(){
    var $obj = $(this.someSelector);
    // work your magic with $obj;
};

与此相反：

HB.somepackage = HB.somepackage || {};
HB.somepackage.someSelector = "HardCodedValueHere"; 
HB.somepackage.someOtherSelector = "AnotherHardCodedValueHere";
HB.somepackage.SomeReallyBadClass = function(){};
HB.somepackage.SomeReallyBadClass.prototype.doSomeStuff = function(){};

这个问题有很多需要考虑。但为了涵盖基础知识，它归结为原型继承和查找。

您的第一个示例：

HB.somepackage = HB.somepackage || {};
HB.somepackage.SomeGoodClass = function(someSelector){
    this.someSelector = someSelector;
}
HB.somepackage.SomeGoodClass.prototype.doSomeStuff = function(){
    var $obj = $(this.someSelector);
    // work your magic with $obj;
};

这使得someSelector成为SomeGoodClass的属性，可以根据被调用方而变化。如果我要创建/调用绑定到不同上下文的函数，this.someSelector对应于该被调用方上下文：

var newObject = {someSelector : 'oldSelector'};
HB.somepackage.SomeGoodClass.apply(newObject, 'newSelector');
newObject.someSelector; // 'newSelector'
HB.somepackage.SomeGoodClass.someSelector; // undefined

代码笔：http://codepen.io/anon/pen/yeENXj

所以在这里，你可能认为在SomeGoodClass this.someSelector会引用SomeGoodClass.someSelector但它没有。

在第二个示例中：

HB.somepackage = HB.somepackage || {};
HB.somepackage.someSelector = "HardCodedValueHere"; 
HB.somepackage.someOtherSelector = "AnotherHardCodedValueHere";
HB.somepackage.SomeReallyBadClass = function(){};
HB.somepackage.SomeReallyBadClass.prototype.doSomeStuff = function(){};

someSelector或多或少被用作一种常量，需要在somepackage的其他函数中引用

根据应用程序的上下文和所需/首选的编码实践，可能需要一个而不是另一个。在第二个示例中，在SomeGoodClass函数上调用apply()或call()显然不会更改类的"内部"someSelector属性，但您也无法从函数/对象中查找该属性。

相关文章：