在JavaScript中使用調用與通過簡單函數返回

Question

這是根據對象數據計算總量的兩種方法：

片段1

 var shoppingCart = (function(){ function calculatePriceNow() { return this.price * this.amount; }; return { calculatePrice : calculatePriceNow } })(); var goods = { name : 'hammer', price: 199, amount : 2 }; var result = shoppingCart.calculatePrice.call(goods); console.log(result); 

片段2

 var shoppingCart = (function(){ function calculatePriceNow(obj) { return obj.price * obj.amount; }; })(); var goods = { name : 'hammer', price: 199, amount : 2 }; var result = shoppingCart.calculatePriceNow(goods); console.log(result); 

結果1：

398

結果2：

我的查詢

1. 為什么第二個片段給出錯誤而不是答案？
2. 在第一種方法中使用“呼叫”的重要性是什么？ 不能簡單的函數也返回相同的答案嗎？
3. 如果在本示例中使用的話，call over apply和bind有什么優勢？

Answer 1

我將盡力解決您的每個問題。

為什么第二個片段給出錯誤而不是答案？

因為，您正在使用IIFE，但您什么也沒有返回。 如果您未在JavaScript中（在函數中）顯式返回某些內容，則意味着將返回undefined。 因此，您的錯誤“無法...未定義”。 因此，您需要返回該函數內部的內容。

在第一種方法中使用“呼叫”的重要性是什么？ 不能簡單的函數也返回相同的答案嗎？

調用（和應用）的重要之處在於“綁定”上下文的能力。 因此，在代碼段1中，您是否看到this的引用。 那么，當你調用函數call -你是“結合”的背景下goods到this 。 因此，當您說this.price ，您是在說goods.price 。 因為call使您能夠做到這一點。

如果在本示例中使用的話，call over apply和bind有什么優勢？

其他人可能知道錯綜復雜，但我相信在這種情況下call是可以的。 如果，除了設置“上下文”（例如數組）之外，您還傳遞了一些參數，那么您將使用apply 。 使用bind返回一個新函數，因此存在內存消耗。 就像部分應用程序一樣-給參數，上下文-然后返回一個新函數-等待。 我想在您的用法中，通話是完美的。 我想聽聽別人的想法。

Answer 2

為什么第二個片段給出錯誤而不是答案？

您的第二個片段引發錯誤，因為您忘記將其添加到IIFE中：

return { calculatePriceNow : calculatePriceNow };

在第一種方法中使用“呼叫”的重要性是什么？ 不能簡單的函數也返回相同的答案嗎？

call的重要性在於，這意味着您使用的是面向對象的方法而不是功能方法。 使用this參數與使用參數都是完成任務的兩種正確方法。 它們僅因其關聯的編程范例而不同。 在JavaScript中，使用功能性方法和參數變得越來越流行。

如果在本示例中使用的話，call over apply和bind有什么優勢？

在這種情況下，使用apply會和call一樣好，盡管在您調用bind ， bind將需要額外的一組括號：

var result = shoppingCart.calculatePrice.bind(goods)();

Answer 3

這是嘗試清除一些東西的嘗試。

<script>
    var shoppingCart = (function () {

        function calculatePriceNow() {
            return this.price * this.amount;
        };
        return {
            calculatePrice: calculatePriceNow
        }
    })();

    var goods = {
        name: 'hammer',
        price: 199,
        amount: 2
    };

    // will not work; Why? Because the function `calculatePrice` depends on their scope (`this`)
    var result = shoppingCart.calculatePrice(goods); 
    console.log(result);

    // will work; Why? We are calling the function giving it's scope explicitly using `call`
    var result = shoppingCart.calculatePrice.call(goods);
    console.log(result);

    // will work; Why? We are calling the function giving it's scope explicitly using `apply`
    var result = shoppingCart.calculatePrice.apply(goods);
    console.log(result);

    // How did it work with `call` and `apply`?
    // They are executing `calculatePrice` in the scope of the argument `goods` which we passed to the function
    // Doing so, the usage of `this` inside the function `calculatePrice` refer to the object `goods`

    // Difference between `call` and `apply`?
    // From MDN: 
    // The `apply()` method calls a function with with a given `this` value and `arguments` provided as array 
    // On the other hand, `call()` method calls a function with a given `this` value and `arguments` provided individually

</script>

注意事項 ：

不管用; 為什么？ 因為功能calculatePrice取決於其范圍（ this ）

var result = shoppingCart.calculatePrice(goods); 
console.log(result);

將工作; 為什么？ 我們正在調用該函數，以使用call顯式指定其范圍

var result = shoppingCart.calculatePrice.call(goods);
console.log(result);

將工作; 為什么？ 我們正在調用該函數，以使用call顯式指定其范圍

var result = shoppingCart.calculatePrice.apply(goods);
console.log(result);

它如何與call apply ？

他們正在傳遞給函數的自變量goods的范圍內執行calculatePrice 。 這樣做時， this函數在calculatePrice函數內部的使用是指對象goods 。

call和apply之間的區別？

apply()方法調用具有給定this值的函數，並以數組形式提供arguments另一方面， call()方法調用具有給定this值的函數，其arguments提供給數組

要查詢 ：

為什么第二個片段給出錯誤而不是答案？

如上所述，當我們這樣調用時， scope是函數的scope ，而不是“參數”的范圍

在第一種方法中使用“呼叫”的重要性是什么？ 不能簡單的函數也返回相同的答案嗎？

一個簡單的答案就是我們使用call給它explicit scope

如果在本示例中使用的話， call over apply和bind有什么優勢？

call() ， apply()和bind()是JavaScript中所有function對象的一部分。 如上所述，它的用法有所不同。 與call()和apply()相比，優點是可以靈活地調用方法（例如，使用不同的參數）。