passing custom javascript object property as parameter in function to update
Question
Is it possible to pass a javascript object's property to a function to update the value of the property? Right now I have an object like...
element = {
border: {
width:0
}
}
I'm trying to pass in an instance of this object to a function to update the width property but it's not working. Something like...
var instance = new element();
UpdateWidth(instance.border.width, 50);
I'm guessing inside the function it's just getting the value of instance.border.width and not the property itself. Is this possible to do? Thanks.
3 answers
solution1
0 2012-01-25 21:38:50
I would attach the function to the object like so:
function element() {
this.border: {
width:0
},
this.updateBorderWidth: function (newWidth) {
this.border.width = newWidth;
}
}
then do this:
var instance = new element();
instance.updateBorderWidth(50);
I am not sure however why this is necessary if you can acces the instance properties directly unless you want something else to happen when the width is updated. On a further note, if you wish to create classes and inheritance in Javascript I would look at this:
solution2
0 2012-01-25 21:39:05
You can't pass primitive values (eg, number literals, 0 ) by reference. Objects, on the other hand, can be -- such as the one stored in the border property:
UpdateWidth(instance.border, 50);
Granted, this will require UpdateWidth to be something like this:
function UpdateWidth(subject, width) {
subject.width = width;
}
But, if the function is about that simple, you can just set the width property directly without needing reference passing:
instance.border.width = 50;
However, you can't create a new instance directly from an existing object:
var element = { };
var instance = new element(); // TypeError: object is not a function
You can use Object.create in modern browsers (or with a polyfill):
var instance = Object.create(element);
Otherwise, you need to declare it as a constructor:
function Element() {
this.border = {
width: 0
};
}
var instance = new Element();
solution3
0 2012-01-25 22:02:21
What you want is not possible. Direct access is the easiest through assignment operator.
In your case: obj.obj.prop = value;
Below are some examples, I use a function to create the Object to more explicitly show what is going on versus using JSON notation. See Jonathan's answer for more on the inability to instantiate an object from an existing one in the manner you are trying to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script language="javascript"type="text/javascript">
function init() {
function e() {
var obj = new Object();
obj.border = new Object();
obj.border.width = 0;
return obj;
}
var x = e();
var y = e();
y.border.width = 12;
document.write(y.border.width);
document.write("<br/>");
document.write(x.border.width);
function UpdateWidth( obj, a ) {
obj.border.width = a;
}
UpdateWidth( y, 50 );
document.write("<br/>");
document.write(y.border.width);
}
window.onload = init;
</script>
</head>
<body>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.