Question

我正在尝试学习如何使用javascripts原型，我现在只是进入它。如果我问一些荒谬的愚蠢问题，请原谅我

我只是有一些预先问题：

值得学习吗？我的意思是它看起来像一个结构化/干净接近我？
你/你应该在jQuery中使用它吗？
是否有任何重大问题或理由不使用它，为什么不常用或者我只是慢一点？

实际问题：

我有以下代码：

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>

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

Answer 1

您是否尝试过budgetSections[0].id = 'yourID';？

Answer 2

我个人从不使用new关键字，如果我可以避免它并使用Object.create进行纯粹的基于原型的编程。这是一个简单的例子。我创建一个名为rectangle的原型对象，然后创建一个名为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使用指定的原型创建一个新对象。当我们访问对象上的属性（如init或move）时，它首先检查对象本身。如果它在那里找不到它，它会移动到对象的原型并在那里进行检查。如果它不存在，它会检查原型的原型，并继续上升原型链直到它找到它。

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

更类似于此类的方法是：

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();

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

Child.prototype = Object.create( Parent.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个关键字。没有假类系统。 “对象继承自对象。什么可能更面向对象？”

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

Javascript Prototype General Enquries并按数组索引分配ID

2 个答案: