在 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. 为什么第二个 sn-p 给出错误而不是答案？
2. 在第一种方法中使用“调用”的重要性是什么？不能简单的函数也返回相同的答案吗？
3. 如果在本例中使用相同的调用，apply 和 bind 有什么优势？

Answer 1

我会尽力解答你的每一个问题。

为什么第二个 sn-p 给出错误而不是答案？

因为，您使用的是 IIFE，但您没有返回任何内容。如果您没有在 javascript 中（在函数中）显式返回某些内容，则暗示返回未定义。因此，您的错误“不能......未定义”。所以你想返回那个函数，你在它里面。

在第一种方法中使用'call'有什么重要性？简单的函数不能也返回相同的答案吗？

调用（和应用）的重要性在于“绑定”上下文的能力。因此，在您的 sn-p 1 中 - 您是否看到对 this 的引用。好吧，当您使用call 调用该函数时，您将goods 的上下文“绑定”到this。所以，当你说this.price 时，你说的是goods.price。因为call 使您能够做到这一点。

如果在本例中使用相同的方法，调用 apply 和 bind 有什么优势？

其他人可能知道其中的复杂性，但我相信 call 在这种情况下很好。如果，除了设置“上下文”之外，您还传递了一些参数 - 就像一个数组，那么您将使用apply。 bind 的使用会返回一个新函数，因此那里有内存成本。这就像部分应用程序 - 你给出一个参数，上下文 - 它返回一个新函数 - 等待。我会说在你的使用中，通话是完美的。我想听听其他人的想法。

Answer 2

为什么第二个 sn-p 给出错误而不是答案？

您的第二个 sn-p 抛出错误，因为您忘记在 IIFE 中添加它：

return { calculatePriceNow : calculatePriceNow };

在第一种方法中使用'call'有什么重要性？简单的函数不能也返回相同的答案吗？

call 的重要性在于它意味着您使用的是面向对象 方法而不是函数式 方法。使用this 与使用参数都是完成任务的同样正确的方法。它们仅在相关的编程范式上有所不同。在 JavaScript 中，使用参数的函数式方法变得越来越流行。

apply 和 bind 如果在本例中使用相同的调用，有什么优势？

在这种情况下，使用apply 与call 一样好，尽管在调用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 单独提供的函数

致查询：

为什么第二个 sn-p 给出错误而不是答案？

如上所述，当我们这样调用时，scope 是函数的，而不是“参数”的

在第一种方法中使用'call'有什么重要性？不能 简单的函数也返回相同的答案？

简单的答案是我们给它explicit scope 使用call

call 与 apply 和 bind 相比有什么优势（如果在此使用相同） 例子？

call()、apply() 和 bind() 是 JavaScript 中所有 function 对象的一部分。如上所述，它的用法各不相同。 与call() 和apply() 相比的优势在于调用方法的灵活性（比如使用不同的参数）。