Javascript 原型(prototype)一般查询和按数组索引分配 Id

Question

我正在尝试学习如何使用 javascripts 原型(prototype)，我现在才开始接触它。如果我问了一些可笑的愚蠢问题，请原谅我

我有几个前置问题:

1. 值得学习吗？我的意思是它看起来像一个结构化/干净的接近我？
2. 你是否/应该将其与 jQuery this 一起使用？
3. 有什么重大问题或不使用它的原因吗？为什么它不常用或者我只是速度慢？

实际问题:

我有以下代码:

var BudgetSection = function BudgetSection(name ) {
    this.id = "";
    this.name = name;
    this.monthlyTotal = 0.00;
    this.yearlyTotal = 0.00;
    this.subTotal = 0.00;
    this.lineItems = [];
};

BudgetSection.prototype.calculateSubTotal = function() {
    this.subTotal = ((12 * this.monthlyTotal) + this.yearlyTotal);
};

function BudgetLineItem(name) {
    this.id = "";
    this.name = name;
    this.monthlyAmount = 0.00;
    this.yearlyAmount = 0.00;
}

BudgetLineItem.prototype = {
    totalAmount : function() {
        var result = ((12 * this.monthlyAmount) + this.yearlyAmount);
    return result;
    }
};

var budgetSections = [];

section = new BudgetSection("test1");
section.lineItems.push(new BudgetLineItem('sub'));
section.lineItems.push(new BudgetLineItem('sub2'));
section.lineItems.push(new BudgetLineItem('sub3'));
budgetSections.push(section);

section = new BudgetSection("test2");
section.lineItems.push(new BudgetLineItem('sub'));
section.lineItems.push(new BudgetLineItem('sub2'));
section.lineItems.push(new BudgetLineItem('sub3'));
budgetSections.push(section);

section = new BudgetSection("test3");
section.lineItems.push(new BudgetLineItem('sub'));
section.lineItems.push(new BudgetLineItem('sub2'));
section.lineItems.push(new BudgetLineItem('sub3'));
budgetSections.push(section);

// first iterate through budgetSections
for ( var t = 0; t < budgetSections.length; t++) {
    var sec = budgetSections[t];
    console.log(sec);
// iterate through each section's lineItems 
    for (var q = 0; q< budgetSections[t].lineItems.length ; q++) {
        var li = budgetSections[t].lineItems[q];
    console.log(li);
    }
}

第一个 BudgetSection“test1”位于 budgetSections 数组中的索引 0 处。我如何将 id 分配给“section_”。

然后我怎样才能像这样设置 BudgetLineItem 的 ID:lineItemRow_<section_index><lineitem_index>

最后还有 for 循环生成 html 的最佳方法是什么？

Answer 1

如果可以避免的话，我个人从不使用 new 关键字，而是使用 Object.create 进行纯基于原型(prototype)的编程。这是一个简单的例子。我创建了一个名为 rectangle 的原型(prototype)对象，然后创建了一个名为 myRectangle 的对象，该对象继承自 rectangle。

var rectangle = {
  init: function( x, y, width, height ) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  },
  move: function( x, y ) {
    this.x += x;
    this.y += y;
  }
};

var myRectangle = Object.create( rectangle );
myRectangle.init( 0, 0, 2, 4 );
myRectangle.move( 3, 5 );

为了更深入地解释这里发生的事情，Object.create 创建了一个具有指定原型(prototype)的新对象。当我们访问对象的属性时(如 init 或 move)，它首先检查对象本身。如果在那里找不到它，它会向上移动到对象的原型(prototype)并在那里检查。如果不存在，它会检查原型(prototype)的原型(prototype)，并继续沿着原型(prototype)链向上移动，直到找到为止。

当我们在对象上调用函数时 (myRectangle.init())，函数内部的 this 引用该对象，即使函数定义实际上在原型(prototype)上。这称为委托(delegate) - 一个对象可以将其职责委托(delegate)给它的原型(prototype)。

一种更类似于类的方法是:

function Rectangle( x, y, width, height ) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

Rectangle.prototype.move = function( x, y ) {
  this.x +=x;
  this.y +=y;
};

var myRectangle = new Rectangle( 0, 0, 2, 4 );
myRectangle.move( 3, 5 );

问题是当我们需要做更深的继承层次时:

function Parent() {
  /* expensive and possibly side-effect inducing initialization */
}

Parent.prototype.parentMethod = function() {};

function Child() {}

Child.prototype = new Parent();

当我们真正想要的是将 Child 原型(prototype)设置为基于 Parent.prototype 的对象时，我们必须初始化一个 Parent 对象.另一种选择是:

Child.prototype = Object.create( Parent.prototype );

但现在我们遇到了这种令人困惑、错综复杂的基于原型(prototype)和基于类的代码。就个人而言，我喜欢这样:

var parent = {
  parentMethod: function() {}
};

// Using underscore for stylistic reasons
var child = _.extend( Object.create( parent ), {
  childMethod: function() {}
});

var instance = Object.create( child );
instance.parentMethod();
instance.childMethod();

不需要 new 关键字。没有虚假的类(class)制度。 “对象继承自对象。还有什么比这更面向对象的呢？”

那么有什么收获呢？ Object.create 很慢。如果您要创建大量对象，最好使用 new。您仍然可以使用 Object.create 来设置原型(prototype)链，但我们需要等待浏览器对其进行足够的优化以进行大量实例化。