Javascript原型通用Enquries和通过数组索引分配Id

Javascript Prototype General Enquries and Assign Id by Array Index

本文关键字：数组 索引 分配 Id 原型 Enquries Javascript      更新时间：2024-06-26

我正在努力学习如何使用javascripts原型，我现在才开始学习。请原谅，如果我问荒谬愚蠢的问题

我只想问几个问题：

  1. 它值得学习吗？我的意思是，它看起来像一个结构化的/干净的接近我
  2. 您是否/应该将this与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的最佳方式是什么？

如果我能避免使用new关键字，并使用Object.create进行纯粹的基于原型的编程，我个人永远不会使用它。这里有一个简单的例子。我创建一个名为rectangle的原型对象，然后创建一个从rectangle继承的名为myRectangle的对象。

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

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

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关键字。没有假班级制度。"对象继承自对象。还有什么比这更面向对象的呢？"

那么问题是什么呢？CCD_ 16速度较慢。如果要创建大量对象，最好使用new。您仍然可以使用Object.create来设置原型链，但我们必须等待浏览器对其进行足够的优化，以便进行大量实例化。

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

相关文章：