使用自调用匿名函数

Question

我正在尝试构建一个用于学习目的的购物车。我有以下代码

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");

但是这段代码抛出以下错误

Uncaught TypeError: Cannot set property 'createCart' of undefined

在互联网上花了几个小时并遵循了一些教程后，我对代码进行了以下更改，然后它开始工作了。

但我还是不明白我在这里做了什么

var cart = (function (cart) {

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


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

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

有人可以解释一下为什么代码在将 cart || {} 表达式传递给匿名函数后开始运行吗？一些详细的解释会很好。 :)

Answer 1

所以没有变量传递到范围。

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");

但是，如果将变量传递给上下文：

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");

所以 IIFE 看起来像这样：

(function () { })();

所以忽略 function 你在第二对括号中得到 ( )(); 你将参数传递给第一组中的 function 。这是因为 IIFE 创建了一个全新的干净作用域。这就是我们使用 IIFE 的原因，因为它可以隔离我们在其中使用的全局变量。

所以如果你有这个：

<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>

所以 IIFE 非常适合控制作用域中的内容。

cart || {} 是一个 JavaScript 空合并，所以它说，传入购物车，但如果它为空，则给它一个空对象

Answer 2

因为您正在声明购物车变量，所以它尚未实例化。当您传入一个空对象时（cart || {} 将对其求值，然后将方法添加到该对象，return 它和购物车将成为该对象。第二个函数的作用是与以下代码基本相同：

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


    return cart;
}());

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

Answer 3

我没有运行这段代码，但通过阅读它：

在您的第一个示例中，在您调用 cart.createCart 的第三行，对象 cart 尚不存在.该函数尚未返回其自身在内部引用的对象！

在第二个示例中，cart 对象仍然不存在，但您已经提供了一个新的空白对象的回退：

cart || {}

因此，在函数内部，cart 是一个新的空白对象，您可以向其应用 createCart 属性。

编辑：Erik Lundgren 刚刚发布的替代函数正是您所需要的。它的意思更清楚，因为购物车对象在函数内部明确实例化。用那个！ :)

我唯一要补充的是，在这种特殊情况下，您真的没有任何理由在立即调用的函数表达式中执行所有这些操作。那里没有任何东西需要范围界定。所以这样做：

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

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

Answer 4

使用此代码：

(cart || {})

您正在传递函数的作用域，如果它为空，则传递一个空对象 ({})。看起来你有一个 cart 对象，当你制作 var cart = (function .... 时你正在覆盖它。

也许您的对象必须用大写字母 Cart 来调用，它也可以工作：

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

使用自调用匿名函数

Using self invoking anonymous functions

javascript

object

anonymous-function