javascript 返回对象的属性和值对

Question

每次我运行 toast 函数时，我都试图在我的烤面包机对象中添加一个新的值对，但它似乎不起作用，我也不知道为什么。这是代码：

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

你可以这样做：

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 2

你好像把工厂和构造函数混在一起了，如果你想创建一个烤面包机构造函数，改为：

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)

使用 new Toastser() 将 return 一个执行构造函数的新对象，return 本身，不需要 return 另一个对象。
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 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":"Lightly done!"}

javascript 返回对象的属性和值对

javascript returning a property and value pair of an object

javascript

closures

object

javascript 返回对象的 属性 和值对

javascript returning a property and value pair of an object

javascript

closures

object

javascript 返回对象的属性和值对