最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

JavaScript objects as function parameters - Stack Overflow

programmeradmin4浏览0评论

Using JavaScript, say I have a function X, and in that function an object called objectX is created. function X returns objectX. Later in the code function Z(somevar, anObject) receives objectX as one of it's parameters.

Now in function Z, is objectX and all its properties referred to as anObject inside function Z?

And what happens if function Z returns anObject? Will the rest of the code see the object as "objectX" or "anObject"?

function X() {
    ...
    objectX = {};
    ...
    return objectX;
}

X();

function Z(anything, anObject) {
    ...
    return anObject
}

Z(something, objectX);

Using JavaScript, say I have a function X, and in that function an object called objectX is created. function X returns objectX. Later in the code function Z(somevar, anObject) receives objectX as one of it's parameters.

Now in function Z, is objectX and all its properties referred to as anObject inside function Z?

And what happens if function Z returns anObject? Will the rest of the code see the object as "objectX" or "anObject"?

function X() {
    ...
    objectX = {};
    ...
    return objectX;
}

X();

function Z(anything, anObject) {
    ...
    return anObject
}

Z(something, objectX);
Share Improve this question edited Feb 8, 2011 at 16:04 Ben asked Feb 8, 2011 at 15:28 BenBen 3,02510 gold badges31 silver badges48 bronze badges 3
  • You really need to explain what you're talking about better. Use psudo code or something. The way you have it described, function X never gets called. – Incognito Commented Feb 8, 2011 at 15:34
  • That code doesn’t run. The X function is never called: Javascript is case-sensitive, so x()' is something different than X()`... – Martijn Commented Feb 8, 2011 at 16:01
  • @ Martijn - sorry that's a typeo. I fixed. – Ben Commented Feb 8, 2011 at 16:03
Add a ment  | 

5 Answers 5

Reset to default 5

anObject and objectX both are referencing to the same space in memory, so, name it as you want, it's always the same object.

Good luck!

This is mostly a question of scope.

function X() {
    // local objectX, only accessible through this name inside X()
    var objectX = {};
    objectX.foo = 'bar';
    return objectX;
}

function Z(somevar, anObject) {
    // anObject is passed in as a parameter
    // it's only accessible through this name inside Z()
    anObject.foo = somevar;
    return anObject;
}

// get the 'objectX' from X() and store it in global variable a
var a = X();

// pass the received 'objectX' into Z()
// note that the variable names objectX and anObject cannot be accessed
// because they are local variables of the functions X() / Z()
var b = Z('baz', a);

// a is now the same as b, they both reference the same var
// a.foo and b.foo both are set to 'baz'

I believe an example is the best way to teach. Here is some code (click here to see it in JS Bin):

// Defines the variable to keep track of how many objects X() defines.
var num = 1;

// Instantiate another variable to see if it is changed by Z().
var anObject;

// Creates an object with a ment and a random number.
function X() {
  // Create an object and give it a name.
  var objectX = {ment : "Creation #" + num};
  // Increase the value of num.
  num++;
  // Add another random number between 0 and 100 inclusively.
  objectX.randNum = Math.round(Math.random() * 100);
  // Return objectX.
  return objectX;
}

// Modifies the second parameter by adding the value of the first parameter.
function Z(somevar, anObject) {
  anObject.somevar = somevar;
  return anObject;
}

var objectX = X(), objectY = X();
objectX2 = Z('coolness', objectX);

// Notice that objectX is still the result of calling X() the first time.
alert("objectX.ment = " + objectX.ment);

// Notice that objectX is not equal to objectY.
alert("objectX === objectY evaluates to " + (objectX === objectY));

// Notice that objectX2 is the same thing as objectX.
alert("objectX === objectX2 evaulates to " + (objectX === objectX2));

// Notice that anObject is not defined.
alert("typeof anObject evaluates to " + (typeof anObject) + " after Z is called.");​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

alert("Now review the JavaScript code.");

If read through the ments, you will find the answers to your questions. First you will notice that in function Z, since I passed objectX as the second parameter, inside of the function, it could be referred to by anObject. Second you will notice that once outside of function Z, anObject no longer refers to objectX. The ments also reveal other things that are true in JavaScript.

Javascript has function scope. This means that every variable declared within a function, will only be accessible from within that function.

If you’d properly declared the objectX variable with var, as follows:

function X() {
    ...
    var objectX = {};
    ...
    return objectX;
}

then objectX would only be known as objectX inside the X function. Elsewhere, it would be known as whatever variable you’d assigned it to. Since in your code, you don’t assign the result of X() to anything, objectX would not be accessible from anywhere.

However, here’s one of Javascript’s more serious design flaws: if you don’t explicitly declare a variable (using the var statement, or as a function parameter), that variable will automatically bee a global variable. That means that it will be accessible anywhere.

Because of this, in your code above, you can access objectX everywhere by that name.

anObject, on the other hand, is properly declared (as a parameter), and that means its scope will be limited to the Z function.

In short, the way your code is written, objectX is accessible everywhere by way of the objectX variable, and inside the function Z, you can reference it both as objectX and as anObject.


Do note, however, that global variables are a Bad Thing™, since they can make it quite hard to figure out what variable gets assigned by who, when, and why — as you’ve noticed.
While Javascript makes it impossible to pletely avoid them, as a rule you should try to keep the scope of your variables as small as possible (scope = where in your program that variable can be accessed).

To that end, I would remend refactoring your code like igorw has.

Here is link to jsfiddle

Lets take the following example below:

Person = function(name){
 this.name = name;
}

function x(){
     var john = new Person('john');
     return john;
}

function z(tempVar, anObject){
    var newObj = anObject;
    newObj.name = tempVar;
    return newObj;
}

myPerson = x();
console.log(myPerson.name); //john
console.log(z('peter', myPerson).name);  //peter
console.log(myPerson.name); //peter

You can see, even though you created a new object in z but because they are referencing to the same object myPerson's name property is also changed after z() is called.

发布评论

评论列表(0)

  1. 暂无评论