在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()相比，优点是可以灵活地调用方法（例如，使用不同的参数）。