使用 JS .call() 方法的原因？

Question

我对 JS 中有 call() 方法的原因很感兴趣。它似乎重复了调用this 的常用方法。

例如，我有一个带有 call() 的代码。

var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

f.call(obj, "ate", "food");

输出是“狗吃了食物”。但同样的结果，我可以将函数分配给对象。

var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

obj.a = f;
obj.a("ate", "food");

结果是一样的。但是这种方式更容易理解，使用起来更方便。为什么需要 call()？

Answer 1

call 用于控制将在调用的函数中使用的范围。您可能希望 this 关键字不是您分配函数的范围，在这些情况下，您可以使用 call 或 apply 以您自己的范围调用函数。

F.ex，它还允许您在范围之外调用实用程序方法，例如使用“私有”函数时：

var obj = (function() {
    var privateFn = function() {
        alert(this.id);
    }
    return {
        id: 123,
        publicFn: function() {
            privateFn.call(this);
        }
    };
}());

obj.publicFn();

在上面的例子中，privateFn 没有暴露在 obj 中，但它仍然可以像公共范围的一部分一样被构造（以同样的方式使用 this）。

Answer 2

您可能会在示例中使用第二种方式，但有时您想在另一个对象上使用一个对象的函数。一个例子是在类似数组的对象上使用Array 方法，比如NodeLists

var el = document.getElementById("foo");
[].forEach.call(el.children, function(child, index) {
    //Iterate over an element's children, performing an action on each one
});

Answer 3

这与first class function 的概念有关。基本上，像 Javascript 这样的语言允许您将函数视为自己的东西。函数可以存储在变量中或传递给其他函数。

call() 提供了一种执行不附加到任何其他对象的独立功能的方法。

Answer 4

2017 年更新

Function.prototype 的所有函数都有.call 方法。之所以使用.call()，是为了指定变量“this”所指的对象。

MDN 指定：

call() 方法调用具有给定 this 值的函数，并且 单独提供的参数。

考虑以下几点：

function x() {
    return this;
}

x()

在严格模式下x() 返回undefined 在非严格模式下它在浏览器上下文中返回全局对象Window。

以.call() 为例，我们告诉它“this”指的是什么：

function x() {
    return this;
}

var obj = {
    myName      : 'Robert',
    myLocation  : 'Earth'
}

x.call(obj);

结果：{myName: "Robert", myLocation: "Earth"}。在上面的例子中，我们将 obj 对象指定为函数 x() 内的 this 的值

它可以用来模拟OOP中的继承。

例子：

var Robert = {
    name: "Robert Rocha",
    age: 12,
    height: "5,1",
    sex: "male",
    describe: function() {
        return "This is me " + this.name + " " + this.age + " " + this.height + " " + this.sex;
    }
};

假设上面是一个主对象（原型），你想在另一个对象中继承函数describe：

var Richard = {
    name: "Richard Sash",
    age: 25,
    height: "6,4",
    sex: "male",
}

Richard 对象没有描述功能，您只想简单地继承，可以说是该功能。你会这样做：

console.log( Robert.describe.call( Richard ) );

输出：This is me Richard Sash 25 6,4 male

Answer 5

读完后，我明白为什么了。

新 JavaScript 程序员的一个常见错误是从对象中提取方法，然后调用该函数并期望它使用原始对象作为其this（例如，通过在基于回调的代码中使用该方法)。

但是，如果不特别小心，原始对象通常会丢失。从函数中创建一个绑定函数，使用原始对象，巧妙地解决了这个问题：

this.x = 9;    // 'this' refers to global 'window' object here in a browser
const module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);
boundGetX();
//  returns 81

来源是here