JS中的Prototype问题 [英] Issue with Prototype in JS

问题描述

对于我的类，我需要创建一个构造函数，对象和原型。不幸的是，我不能得到原型工作，并想知道是否有人可以帮助我了解如何使一个原型正确计算我的披萨对象的价格。在我不得不添加一个对象和原型之前它工作正常，但是为了满足任务指导方针，我被要求回去制作一个原型，这让我很困惑。任何帮助将不胜感激。

For my class I needed to create a constructor, object, and prototype. Unfortunately I cannot get the prototype to work and was wondering if someone could help me understand how to make a prototype to correctly calculate the price of my pizza object. Before I had to add an object and prototype it was working fine, but to meet the assignment guidelines I was asked to go back and make a prototype, which is confusing me greatly. Any help would be appreciated.

//business logic
function Pizza(size, sauce, cheese, meat1, meat2, veggie1, veggie2) {
this.size = size;
this.sauce = sauce;
this.cheese = cheese;
this.meat1 = meat1;
this.meat2 = meat2;
this.veggie1 = veggie1;
this.veggie2 = veggie2;
}
Pizza.prototype.pizzaPrice = function() {
return pizzaPrice = inputtedSize + inputtedSauce + inputtedCheese + inputtedMeatOne + inputtedMeattwo + inputtedVeggieOne + inputtedVeggieTwo + 0;
}

//user interface logic
$(document).ready(function(){
$("form").submit(function(event) {
event.preventDefault();
$("form").fadeOut();
var inputtedSize = parseInt($("#size").val());
var inputtedSauce = parseInt($("#sauce").val());
var inputtedCheese = parseInt($("#cheese").val());
var inputtedMeatOne = parseInt($("#meat1").val());
var inputtedMeattwo = parseInt($("#meat2").val());
var inputtedVeggieOne = parseInt($("#veggie1").val());
var inputtedVeggieTwo = parseInt($("#veggie2").val());
var sizeChoice = $( "#size option:selected" ).text();
var sauceChoice = $( "#sauce option:selected" ).text();
var cheeseChoice = $( "#cheese option:selected" ).text();
var meatChoiceOne = $( "#meat1 option:selected" ).text();
var meatChoiceTwo = $( "#meat2 option:selected" ).text();
var veggieChoiceOne = $( "#veggie1 option:selected" ).text();
var veggieChoiceTwo = $( "#veggie2 option:selected" ).text();
var pizza = Pizza();
var newPizza = (inputtedSize + inputtedSauce + inputtedCheese + inputtedMeatOne + inputtedMeattwo + inputtedVeggieOne + inputtedVeggieTwo);
Pizza.pizzaPrice(newPizza);
$("#total").fadeIn();
$(".total").text(" " + "$" + newPizza);
$(".size").text(" " + sizeChoice);
$(".sauce").text(" " + sauceChoice);
$(".cheese").text(" " + cheeseChoice);
$(".meat1").text(" " + meatChoiceOne);
$(".meat2").text(" " + meatChoiceTwo);
$(".veggie1").text(" " + veggieChoiceOne);
$(".veggie2").text(" " + veggieChoiceTwo);
 });
});

推荐答案

首先， 。您必须在新对象实例前面加上自我说明的 new 运算符。

First of all, you're instantiating your object incorrectly. You must prefix new object instances with the self explanatory new operator.

其次，您可以使用 this 。在原型函数中，可以通过用 this 前缀变量来访问实例变量。在构造函数中执行 this.size = size 将产生传递给构造函数的值，只要你调用 this.size 。因此，你的函数应该引用这样的值，而不是你设置输入val的变量。

Secondly, you reference instance values with this. In an prototype function, you can access instance variables by prefixing the variable with this. Doing this.size = size in the constructor will yield the value you passed to the constructor anytime you call this.size. Therefore your functions should reference those values like so instead of the variable which you're setting the input val from.

代码看起来如下：

function Pizza(size, sauce, cheese, meat1, meat2, veggie1, veggie2) {
  this.size = size;
  this.sauce = sauce;
  this.cheese = cheese;
  this.meat1 = meat1;
  this.meat2 = meat2;
  this.veggie1 = veggie1;
  this.veggie2 = veggie2;
}
Pizza.prototype.price = function() {
  return this.size + 
    this.sauce + 
    this.cheese + 
    this.meat1 + 
    this.meat2 + 
    this.veggie1 + 
    this.veggie2 + 0;
}

var pizza = new Pizza(1, 1, 2, 1, 2, 3, 1);

console.log(pizza) // Pizza instance
console.log(pizza.price()) // returns computed instance values
console.log(pizza.sauce) // access instance value

使用上面的例子像这样：

In your case, you would use the above example like so:

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();
    $("form").fadeOut();
    var inputtedSize = parseInt($("#size").val());
    var inputtedSauce = parseInt($("#sauce").val());
    var inputtedCheese = parseInt($("#cheese").val());
    var inputtedMeatOne = parseInt($("#meat1").val());
    var inputtedMeattwo = parseInt($("#meat2").val());
    var inputtedVeggieOne = parseInt($("#veggie1").val());
    var inputtedVeggieTwo = parseInt($("#veggie2").val());
    var sizeChoice = $("#size option:selected").text();
    var sauceChoice = $("#sauce option:selected").text();
    var cheeseChoice = $("#cheese option:selected").text();
    var meatChoiceOne = $("#meat1 option:selected").text();
    var meatChoiceTwo = $("#meat2 option:selected").text();
    var veggieChoiceOne = $("#veggie1 option:selected").text();
    var veggieChoiceTwo = $("#veggie2 option:selected").text();

    var pizza = new Pizza(inputtedSize, inputtedSauce, inputtedCheese, inputtedMeatOne, inputtedMeattwo, inputtedVeggieOne, inputtedVeggieTwo);

    $("#total").fadeIn();
    $(".total").text(" " + "$" + pizza.price());
    $(".size").text(" " + pizza.size);
    $(".sauce").text(" " + pizza.sauce);
    $(".cheese").text(" " + pizza.cheese);
    $(".meat1").text(" " + pizza.meat1);
    $(".meat2").text(" " + pizza.meat2);
    $(".veggie1").text(" " + pizza.veggie1);
    $(".veggie2").text(" " + pizza.veggie1);
  });
});

这篇关于JS中的Prototype问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！