javascript - Using self invoking anonymous functions - Stack Overflow

admin管理员组

文章数量:1314488

I am trying to build a shopping cart for learning purpose. I have following codes

HTML

<div id="MyCart" class="product-cart">
    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

js

var cart = (function () {

    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}());

var shoopingCart = cart.createCart("MyCart");

But this code throws following error

Uncaught TypeError: Cannot set property 'createCart' of undefined

After spending few hours in internet and following some tutorials I did following changes to the code and then it started working.

But still I dont understand what i have done here

var cart = (function (cart) {

    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}(cart || {}));

var shoopingCart = cart.createCart("MyCart");

Can some one please explain me why the code started to work after passing cart || {} expression into the anonymous function? Some detailed explanation would be great. :)

I am trying to build a shopping cart for learning purpose. I have following codes

HTML

<div id="MyCart" class="product-cart">
    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

js

var cart = (function () {

    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}());

var shoopingCart = cart.createCart("MyCart");

But this code throws following error

Uncaught TypeError: Cannot set property 'createCart' of undefined

After spending few hours in internet and following some tutorials I did following changes to the code and then it started working.

But still I dont understand what i have done here

var cart = (function (cart) {

    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}(cart || {}));

var shoopingCart = cart.createCart("MyCart");

Can some one please explain me why the code started to work after passing cart || {} expression into the anonymous function? Some detailed explanation would be great. :)

• javascript
• object
• anonymous-function

Share Improve this question Follow asked Jul 10, 2015 at 8:24 It worked yesterday.It worked yesterday. 4,6271111 gold badges5050 silver badges8484 bronze badges 2

• 1 cart is undefined in cart.createCart. You should use that outside cart function. – Bhojendra Rauniyar Commented Jul 10, 2015 at 8:25
• 1 the function is expecting cart as a parameter, without passing cart || {} you are passing in nothing, so cart will be undefined. remember that IIFE have a pletely isolated scope – Callum Linington Commented Jul 10, 2015 at 8:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

So without the variable passed into the scope.

var cart = (function (cart) {

    // can't add a property or method onto undefined.
    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}()); // without any value here ^ cart will be undefined.

var shoopingCart = cart.createCart("MyCart");

However, if you pass the variable to the context:

var cart = (function (cart) {

    // cart now is an object which you can attach a property or method
    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}(cart || {})); // pass in cart, or if it is null a new object {}

var shoopingCart = cart.createCart("MyCart");

So an IIFE looks like this:

(function () { })();

so ignoring the function you get ( )(); in that second pair of parenthesis you pass the parameters to the function in the first set. This is because IIFE creates a whole new clean scope. This is why we use IIFE because it can isolate global variables that we use in them.

so if you have this:

<script>

var someGlobalVariable = "hey";

(function () {

   // using someGlobalVariable here will be fine

   var myIIFEScopedVariable = "ho"; 

})();

// trying to access myIIFEScopedVariable here will fail because again, it hasn't been defined here.

</script>

So IIFE's are great for controlling what you have in scopes.

The cart || {} is a JavaScript null coalesce, so it says, pass in cart but if it is null give it an empty object

Because you are in progress of declaring the cart variable it is not instantiated yet. When you instead pass in an empty object (which is what cart || {} will evaluate to it will then add the method to that object, return it and cart will then be that object. What the second function does is essentially the same as the following code:

var cart = (function () {
    var cart = {};
    cart.createCart = function (cartId) {
        console.log(cartId);
        cartId = document.getElementById(cartId);
    }   


    return cart;
}());

var shoopingCart = cart.createCart("MyCart");

I haven't run this code, but from reading through it:

In your first example, on line three, where you call cart.createCart, the object cart does not yet exist. The function has not yet returned the object that it itself refers to internally!

In the second example, the cart object still does not exist, but you have provided a fallback to a new blank object:

cart || {}

So, inside the function, cart is a new blank object, to which you apply the createCart property.

EDIT: Erik Lundgren's alternative function just posted is what you need. It's meaning is clearer, as the cart object is clearly instantiated inside the function. Use that! :)

The only thing that I would add is that you don't really have any reason to do all this inside an immediately invoked function expression, in this particular case. There is nothing in there that needs scoping. So this will do:

var cart = {};
cart.createCart = function (cartId) {
    console.log(cartId);
    cartId = document.getElementById(cartId);
}   

var shoopingCart = cart.createCart("MyCart");

With this code:

(cart || {})

You are passing the scope of the function and if it is empty, you pass an empty object ({}). It seems like you have a cart object, and when you make var cart = (function .... you are overriding it.

Maybe your object must be called Cart with uppercase and it works too:

  var cart = (function() {
       Cart.createCart()...
  });

本文标签： javascriptUsing self invoking anonymous functionsStack Overflow