javascript 返回对象的属性和值对

Question

每次我运行 toast 函数时，我都会尝试在我的 toaster 对象中添加一个新的值对，但它似乎不起作用，我不知道为什么。 代码如下：

var Toaster = function(){  
function cook(type,temp){ 
    var food = type;
    var amtCooked; 
    if(temp >7){
        amtCooked = "Well Done!"
    }
    else if(temp > 4){
        amtCooked = "Medium";
    }
    else{
        amtCooked = "Lightly done!";
    }
    this[food] = food + amtCooked;
}
return{
toast: function(typeOfBread,setting){
           cook(typeOfBread,setting)
       }
    };
}

我希望能够调用类似的函数

var v = Toaster();
v.toast("bread",4)

而v 应该有{bread:"medium"}

但this[food] 部分似乎不起作用。

Answer 1

您似乎混合了工厂和构造函数， 如果要创建 Toaster 构造函数，请更改为：

var Toaster = function(){  
  function cook(type,temp){ 
    var food = type;
    var amtCooked; 
    if(temp >7){
    amtCooked = "Well Done!"
    }else if(temp > 4){
    amtCooked = "Medium";
    }else{
    amtCooked = "Lightly done!";
    }
    this[food] =food + amtCooked;
  }
  this.toast =function(typeOfBread,setting){
    cook.call(this, typeOfBread,setting);
  };
}

//Usage
var v = new Toaster();
v.toast("bread",4)

1. 使用 new Toastser() 将返回一个新的对象并执行构造函数，并返回自己，无需返回另一个对象。
2. cook 是一个私有函数，简单地调用cook 会使上下文不明确，使用cook.call(this) 给它context，所以this[food] 的this 将引用到创建的toast 对象。

或者如果你想要一个ToasterFactory，那么代码会是这样的：

var Toaster = function(){  
  function cook(type,temp){ 
      var food = type;
      var amtCooked; 
      if(temp >7){
          amtCooked = "Well Done!"
      }
      else if(temp > 4){
          amtCooked = "Medium";
      }
      else{
          amtCooked = "Lightly done!";
      }
      this[food] = food + amtCooked;
  }
  return {
    toast: function(typeOfBread,setting){
      cook.call(this, typeOfBread,setting);
    }
  };
}
//Usage
var v = Toaster();
v.toast("bread",4)

为它创建了一个jsFiddle。根据您想要调用 Toaster 的方式，Factory 可能就是您想要的。

Answer 2

你可以这样做：

var Toaster = function() {
    this.cooked = {};
}

Toaster.prototype.cook = function(type, temp) { 
    var food = type;
    var amtCooked; 
    if (temp > 7) {
        amtCooked = "Well Done!"
    } else if (temp > 4) {
        amtCooked = "Medium";
    } else {
        amtCooked = "Lightly done!";
    }
    this.cooked[food] = amtCooked;
}

Toaster.prototype.toast = function(typeOfBread, setting) {
    this.cook(typeOfBread, setting);
};

Toaster.prototype.history = function() {
    var record = '';
    Object.keys(this.cooked).forEach(function(typeOfBread) {
        record += typeOfBread + ': ' + this.cooked[typeOfBread] + '\n';
    }.bind(this));
    alert(record);
};

var t = new Toaster();

t.toast('Rye', 3);
t.toast('White', 3);
t.toast('Wheat', 10);

t.history();

然后发出警报：

Rye: Lightly done!
White: Lightly done!
Wheat: Well Done!

JSFiddle：http://jsfiddle.net/ypbybL9g/

Answer 3

这是您正在寻找的东西吗？

var Toaster = function(){  
  function cook(type,temp){ 
      var food = type;
      var amtCooked; 
      if(temp >7){
        amtCooked = "Well Done!"
      }else if(temp > 4){
        amtCooked = "Medium";
      }else{
        amtCooked = "Lightly done!";
      }
      return {food : amtCooked};
  }
  return{
    toast: function(typeOfBread,setting){
      return cook(typeOfBread,setting)
    }
  };
}
var x = Toaster().toast("a", "b")
$(function(){
  console.log(JSON.stringify(x));
});

生成的输出 = {"food":"轻松搞定！"}