1

当我使用 javaScript 插件时，我经常遇到这种调整插件行为的方法。

$('.mySlider').slider({status: "burnt"});

如果我尝试用这样的对象复制这种方法

var Egg = function(){

    this.details = {
        status: "cooked",
        make: "Happy Egg"
    }

};



var egg = new Egg({status: "burnt"});
console.log(egg.details.status);

我只是从控制台收到一堆未定义的消息。谁能告诉我如何创建一个对象，然后像上面的例子一样改变它的属性？

谢谢

4

6 回答 6

6

您的构造函数没有接受任何参数，但您在创建新实例时将它们传入。

你会想要

var Egg = function(props){

    this.details = props;

};

也许

var Egg = function(props){
    props = props || {}; // handle no arguments

    this.status = props.status;
    this.make = props.make || "Happy Egg";
};

然后你会做只是egg.status为了得到财产。

于 2012-07-31T17:16:23.680 回答
1

试试这个：

var Egg = function(details) {
   this.details = {};
   for (var key in details) {
      this.details[key] = details[key];
   }

   return this;
};

var egg = new Egg({ status: 'burnt' }); // burnt

console.log(egg.details.status);

问题是您将参数（details）传递给构造函数，但没有正确使用它们。在我的示例中，我将默认设置details为空对象{}，然后覆盖其上传递的任何属性。

您可以通过使用原型更进一步。假设您想公开一个可以让您更改细节的函数。

var Egg = function(details) {
   this.details = {};
   for (var key in details) {
      this.details[key] = details[key];
   }

   return this;
};

Egg.prototype.updateDetail = function(name, value) {
    this.details[name] = value;
};

var egg = new Egg({ status: 'burnt' });

console.log(egg.details.status); // burnt

egg.updateDetail('status', 'scrambled');

console.log(egg.details.status); // scrambled
于 2012-07-31T17:20:38.773 回答
0

您可以像这样创建默认参数（使用 jQquery）

var Egg = function(props){
    this.options= {
        status: "cooked",
        make: "Happy Egg"
    }
    $.extend(this.options, props);
};
于 2012-07-31T17:18:11.480 回答
0

您必须将一些代码放入函数中，将参数值分配给新对象的属性。此外，如果您有一些默认值，您应该将它们放入原型中，这样可以节省内存。所以使用这个代码：

function Egg(obj){
  if(typeof obj==="object"){
    this.details={}; //This overwrites the prototype property with one
                     //that's specific to this instance.
    for(i in arguments.callee.prototype.details){
      //This copies object from proto to object
      this.details[i]=arguments.callee.prototype.details[i];
    }
    for(i in object){
      this.details[i]=object[i];
    }
  }
};
Egg.prototype={
    details: {status: "cooked", make: "Happy Egg"}
}

此代码允许您拥有一些可以通过参数扩展/覆盖的默认对象。

于 2012-07-31T17:18:32.813 回答
0

对于您的简单Egg对象，您需要您的函数接受一个参数，该参数用于设置结果对象的属性：

var Egg = function(options) {
  this.details = {
    status: options.status || 'cooked',
    make: options.make || 'Happy egg'
  }
};

当然，这是一个极其简化的版本。理想情况下，您会想要使用一个extend函数，例如 jQuery 或下划线提供的函数。

于 2012-07-31T17:18:54.223 回答
0

我举了一个例子，我构造一个对象，然后通过将参数传递给构造函数来覆盖它的值，就像在滑块对象中一样。该示例与您的示例不完全相同，但更多的是您询问的滑块示例

var Egg = function(){
this.status = 'Some';
    this.detail = 'another';
   //the magic line which makes it possible
    for (var n in arguments[0]) { this[n] = arguments[0][n];}

};

var egg = new Egg({status: 'burnt', make: 'hj'});
alert(egg.status );

通过添加这一行

for (var n in arguments[0]) { this[n] = arguments[0][n];}

对于您的构造函数，您已为用户提供了更改任何默认参数的灵活性。他们可以按任何顺序指定参数，也可以省略不需要的参数。

这是JSFiddle示例

于 2012-07-31T17:29:44.280 回答