JS 中的原型问题答案

【问题标题】：Issue with Prototype in JSJS 中的原型问题
【发布时间】：2016-08-31 02:59:50
【问题描述】：

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

//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 Pizza(...) 而不是Pizza(...) 创建一个新的Pizza 对象。然后，您尝试在一个范围内使用像inputtedSize 这样的变量，这些变量在另一个范围内声明。你不能那样做。然后，您不会将参数传递给new Pizza()。我建议您首先在调试控制台中查看报告的错误，然后一次解决一个，直到没有更多错误为止。所有初学者都应该做的一件事是学习如何查看调试控制台中的内容。
也许您遇到了“缩进不足”的异常。
在实际的 html 中缩进很好，间距是关闭的，因为我不得不在这里笨拙地缩进代码才能正确显示
@AddisonNishijima 在 SO 上有数十万条带有适当缩进的帖子，代码显示得很好。请重新阅读代码格式化指南。无论如何，我建议回去重新阅读一些关于编写构造函数和原型方法以及实例化对象以及从方法中引用它们的属性的基本教程。

标签： javascript object constructor prototype

【解决方案1】：

var pizza = Pizza(); //undefined
var pizza = new Pizza() //your obj

我是新手，但试试这个。

【讨论】：

欢迎来到 Stack Overflow！ How to Answer 可以帮助您编写将被接受和赞成的答案。
就目前而言，这很好，但它决不能解决所有OP的问题。
这只是 OP 代码的许多错误之一。修复 OP 的代码并使其工作还远远不够。

【解决方案2】：

首先，您错误地实例化了您的对象。您必须在新对象实例前面加上自解释的 new 运算符。

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

您的代码应如下所示：

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

在你的情况下，你可以像这样使用上面的例子：

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

【讨论】：