Question

这是根据对象数据计算总金额的两种方法：

Snippet 1

＆＃13;

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

＆＃13;

Snippet 2

＆＃13;

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

＆＃13;

结果1：

398

结果2：

我的查询

为什么第二个代码段会出错而不是回答？
使用＆＃39; call＆＃39;在第一种方法？不能简单的功能还能回答相同的答案吗？
如果在此示例中使用相同的内容，则通过应用和绑定调用的优势是什么？

Answer 1

我会尝试解决你的每一个问题。

为什么第二个代码段会出错而不是回答？

因为你正在使用IIFE，但你什么也没有回报。如果你没有在javascript（在一个函数中）显式地返回一些内容，则暗示返回undefined。因此你的错误“不能......未定义”。所以你想要返回那个你内在的函数。

在第一种方法中使用'call'的重要性是什么？不能简单的功能还能回答相同的答案吗？

调用（和apply）的重要性是“绑定”上下文的能力。因此，在您的代码段1中 - 您是否看到对this的引用。好吧，当您使用call调用该函数时 - 您将goods的上下文“绑定”到this。所以，当你说this.price时，你说goods.price。因为call可以让您这样做。

如果在此示例中使用了相同的应用和绑定，有什么优势？

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

Answer 2

为什么第二个代码段会出错而不是回答？

您的第二个代码段是因为您忘记在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一起使用？

他们在我们传递给函数的参数calculatePrice的范围内执行goods。这样做，函数this中calculatePrice的使用是指对象goods。

call和apply之间的区别？

apply()方法调用具有给定this值的函数，并将arguments作为数组提供另一方面，call()方法调用具有给定this值且单独提供arguments的函数

查询：

为什么第二个代码段会出错而不是回答？

如上所述，当我们调用时，scope是函数的函数，而不是'参数'

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

我们将使用explicit scope

为call提供简单的答案

call优于apply和bind的优势，如果在此使用相同的话示例

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

在JavaScript中使用调用与使用简单函数

3 个答案: