JavaScript的原型一般ENQU​​RIES异型和分配ID，由数组索引 [英] Javascript Prototype General Enquries and Assign Id by Array Index

问题描述

我想学习如何使用JavaScript的原型工作，我只进入现在。请原谅我，如果我问可笑愚蠢的问题。

I am trying to learn how to work with javascripts prototype, I am only getting into it now. Please Excuse me if I ask ridiculously stupid questions

我只是有几个pre-问题：

I just have a few pre-questions:

1. 是否值得借鉴？我的意思是它看起来像一个结构化/清洁
   方法给我吗？


2. 请/你应该使用这与jQuery呢？


3. 有没有什么大的问题或理由不使用它，为什么是不是常用的还是我只是慢？

实际问题：

我有以下的code：

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测试1是在budgetSections数组索引0。我怎么能分配id一节_。

the first BudgetSection "test1" is at index 0 in the budgetSections array. how can i assign the id to "section_".

然后还要我怎么才能设置BudgetLineItem的ID如下： lineItemRow_＆LT;＆SECTION_INDEX GT;＆LT; lineitem_index＆GT;

And then also how can i set the id of BudgetLineItem like so: lineItemRow_<section_index><lineitem_index>

也终于n中的for循环，这将是生成html的最佳方式？

Also finally n the for loop what would be the best way to generate html?

推荐答案

我个人从来不使用新关键字，如果我能避免它，做纯基于原型的编程的Object.create 。这里有一个简单的例子。我创建一个名为长方形，然后一个原型的对象创建 myRectangle 称为对象从继承矩形。

I personally never use the new keyword if I can avoid it and do pure prototype-based programming with Object.create. Here's a simple example. I create a prototype-object called rectangle and then create an object called myRectangle which inherits from 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 或移动），它首先检查对象本身。如果无法找到它，它移动到对象的原型，并检查那里。如果它不存在，它会检查该原型的原型，而不断上升的原型链，直到找到它。

To explain in more depth what happens here, Object.create makes a new object with a specified prototype. When we access a property on an object (like init or move), it first checks the object itself. If it can't find it there, it moves up to the object's prototype and checks there. If it's not there, it checks the prototype's prototype, and keeps going up the prototype chain until it finds it.

当我们调用一个对象上的函数（ myRectangle.init（）），这个里面的功能是指该对象的即使函数定义实际上是在原型的。这就是所谓的委托 - 一个对象可以委托其职责，其原型

When we call a function on an object (myRectangle.init()), this inside the function refers to that object, even if the function definition is actually on the prototype. This is called delegation - an object can delegate its responsibilities to its prototype.

一个多级般的方式做到这一点是：

A more class-like way to do this is:

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

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

The problem is when we need to do a deeper inheritance hierarchy:

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

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

function Child() {}

Child.prototype = new Parent();

我们必须初始化父当我们真正想要的是在儿童原型设置到对象对象根据 Parent.prototype 。另一种选择是：

We have to initialize a Parent object when all we really want is to set the Child prototype to an object based on Parent.prototype. Another option is:

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

但是，现在我们已经有了原型为基础，基于类的code这混乱的，令人费解的混乱。就个人而言，我很喜欢这个代替：

But now we've got this confusing, convoluted mess of prototype-based and class-based code. Personally, I like this instead:

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

没有新关键字需要。无假货级系统。 物体对象继承。可以更面向对象有什么隐情？

No new keyword needed. No fake class system. "Objects inherit from objects. What could be more object-oriented than that?"

那么，有什么收获？ 的Object.create 缓慢。如果您正在创建大量的对象，最好使用新。您仍然可以使用的Object.create 来建立原型链，但我们将不得不等待一个位的浏览器足够的优化它的很多实例化。

So what's the catch? Object.create is slow. If you're creating lots of objects, it's better to use new. You can still use Object.create to set up the prototype chain, but we'll have to wait a bit for browsers to optimize it enough for lots of instantiation.

这篇关于JavaScript的原型一般ENQU​​RIES异型和分配ID，由数组索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！