Javascript设置对象选项
Javascript setting object options
当我使用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);
我刚从控制台收到一堆未定义的消息。有人能告诉我如何创建一个对象,然后像上面的例子一样更改它的属性吗?
感谢
您的构造函数不接受任何参数,但在创建新实例时会传递这些参数。
你想要
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
就可以得到这个属性。
试试这个:
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
您可以创建这样的默认参数(使用jQquery)
var Egg = function(props){
this.options= {
status: "cooked",
make: "Happy Egg"
}
$.extend(this.options, props);
};
对于简单的Egg
对象,您需要函数接受一个用于设置结果对象属性的参数:
var Egg = function(options) {
this.details = {
status: options.status || 'cooked',
make: options.make || 'Happy egg'
}
};
当然,这是一个极其简化的版本。理想情况下,您希望使用extend
函数,例如jQuery或下划线提供的函数。
我举了一个例子,构造了一个对象,然后通过将参数传递给构造函数来覆盖它的值,就像在滑块对象中一样。这个例子和你的不完全一样,但更多的是你问的关于的滑块例子
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示例
您必须在函数中放入一些代码,将参数值分配给新对象的属性。此外,如果您有一些默认值,您应该将它们放入原型中,这样可以节省内存。所以使用这个代码:
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"}
}
通过此代码,您可以拥有一些默认对象,这些对象可以由参数展开/覆盖。
相关文章:
- 如何在选项卡上定义属性'的主窗口对象
- 设置选项对象关键点:值对以实现带第二个y轴的动态打印
- 挖空选项对象绑定
- javascript中选项对象的默认值
- 声明JavaScript选项对象的正确方法
- JavaScript 中更有效的选项对象
- 接受选项对象作为参数的简洁方法,回退到省略属性的默认值
- 将选项对象的数组追加到多个选择
- JSDoc:如何记录父“类”的“选项”对象文字
- 访问选项对象(在 ngSelect 中使用),但仅返回文本框中的特定值
- j查询选项对象引用
- Jquery UI滑块选项对象
- 当从选项对象中选择选项时,jQuery执行函数
- AJAX请求带有Jquery,不刷新页面,同时使用选项对象和回调
- 附加选项到选项对象
- 棱角剑道网格与k-rebind不深入观察它的选项对象
- 如何在Firefox中传递多个选项给bootstrap carousel's可选选项对象
- 返回jquery日期选择器beforeShow的选项对象
- 如何将选项对象选择为默认值
- 通过JQuery选项对象传递值