operators - Question about javascript function declaration - Stack Overflow

admin管理员组

文章数量:1384278

What does it mean when a javascript function is declared in the following way:

JSON.stringify = JSON.stringify || function (obj)
{
  //stuff
};

How is the above different from just declaring it like below?

function stringify(obj)
{
  //stuff
}

What does it mean when a javascript function is declared in the following way:

JSON.stringify = JSON.stringify || function (obj)
{
  //stuff
};

How is the above different from just declaring it like below?

function stringify(obj)
{
  //stuff
}

• javascript
• operators

Share Improve this question Follow edited Nov 13, 2024 at 0:21 dumbass 27.3k44 gold badges3838 silver badges7474 bronze badges asked Jun 29, 2011 at 15:52 Abe MiesslerAbe Miessler 85.2k104104 gold badges321321 silver badges495495 bronze badges 7

• The first code block is not a function declaration, only the second block is... – Šime Vidas Commented Jun 29, 2011 at 15:56
• What is the first code block? – Abe Miessler Commented Jun 29, 2011 at 16:01
• @Abe This gray bock in your question above. You have two code blocks in your question. The first code block does not contain a function declaration. – Šime Vidas Commented Jun 29, 2011 at 16:02
• I understand what you are saying. My questions is, "if code block 1 is not a function declaration, then what is it?" – Abe Miessler Commented Jun 29, 2011 at 16:04
• 1 @Abe Miessler, it's a property definition. var a = function() { ... } defines a variable named a which has the anonymous function as a value. Same with JSON.stringify = function() { ... }. – rid Commented Jun 29, 2011 at 16:06

 |  Show 2 more ments

8 Answers 8

Sorted by: Reset to default 7

• function stringify will declare the function in the global scope (if you're not already inside another scope, such as another function or a hash) or the scope you're currently in.

  Example:

  function a() { ... } /* global scope */
  function a() { function b() { ... } /* scope of the a() function */ }
  

• JSON.stringify = function will define the function on the JSON object.

  Example:

  JSON = {}
  JSON.stringify = function() { ... } /* you can now call stringify() on the JSON object */
  

• JSON.stringify || function will only define it if it was not previously defined.

  Example:

  JSON = {}
  JSON.stringify = function() { ... }
  JSON.stringify = JSON.stringify || function() { ... } /* will not be replaced */
  

The first declaration doesn't override the function if it already exists, the second declaration does !

The above code is checking if JSON.stringify function is already defined and if it is then just use it if not use the new definition.

|| is a logical operator it always return the first thing that's true. If JSON.stringify is undefined (or some other falsy value) the JSON.stringify contains the function that is written after the ||.

In other words it checks if JSON.stringify already exists and if not it assigns the second function to it.

To answer your question in your first example your function is callable over JSON.stringify() in the second example over stringify()

The first code-block is equivalent to this:

if ( !JSON.stringify ) {
    JSON.stringify = function(obj) {
        // stuff
    };
}

Explanation: If the JSON.stringify property coerces to false, set this property and assign the function object to it.

The background is this: Some browsers implement the JSON.stringify function, others don't (older versions of IE for instance). What you want is to implement this function manually in those browsers. Therefore, you test whether or not JSON.stringify returns a function object. It it does, you're fine; if not, you set this property manually.

---

Another example:

function handler(e) {
    e = e || window.event;

    // handle event
}

Modern browsers pass the event object into event handlers; but older versions of IE don't do that. Therefore, you need to test whether or not the passed-in argument is an object (is it defined?), and if not (IE detected!), use the window.event value (that's where IE stores the corresponding event).

This line of code does that:

e = e || window.event;

It is equivalent to this:

if ( e ) {
    e = e; // no-op
} else {
    e = window.event;
}

If function stringify is has been already defined, it will not be defined more than one time.

The first way will declare the function if it already exists.

JSON.stringify = JSON.stringify || function (obj){
}

This means that JSON.stringify exists, it will use that, otherwise it will make a new function.

It utilizes short-circuit evaluation. JSON.stringify isn't supported by all browsers, and so it's replaced it with a backup function in the event that JSON.stringify is not defined.

Additionally, the syntax may be a little bit confusing. It's checking for JSON.stringify first, and if it doesn't exist then creating function(obj) { ... } (that is, the part in { ... } has nothing to do with the preceding JSON.stringify).

本文标签： operatorsQuestion about javascript function declarationStack Overflow