Javascript 简明教程
JavaScript - Function call() Method
Function call() Method
Function call() 方法允许我们调用一个函数,为 this 和单独提供的参数提供特定值。当调用一个普通函数时,this 在函数中的值是函数被访问的对象。我们可以操作 this 值,并可以使用 call() 方法为 it 分配一个任意对象。换句话说,我们可以调用现有的函数作为对象的函数,而无需将函数作为方法附加到对象。
The Function call() method allows us to invoke a function given a specific value for this and arguments provided individually. When a normal function is called, the value of this inside the function is the object that the function was accessed on. We can manipulate the this value and can assign an arbitrary object to this by using the call() method. In other word, we can call existing function as a method of an object without attaching the function to the object as a method.
在 JavaScript 中,每个函数都是一个函数对象。Function 对象提供函数的属性和方法。这些属性和方法在 Function.prototype 上定义,并由所有 Function 实例共享。Function 对象提供的一些重要方法是 call()、apply() 和 bind() 方法。
In JavaScript, every function is a Function object. The Function object provides properties and methods for functions. These properties and methods are defined on Function.prototype and shared by all Function instances. Some of the important methods provided by the Function object are call(), apply() and bind() methods.
让我们了解 Function call() 方法的语法。
Let us understand the syntax of the Function call() method.
Syntax
JavaScript 中 Function call() 方法的语法如下:
The syntax of Function call() method in JavaScript is as follows −
funcName.call(thisArg, arg1, arg2, ... argN);
在上方的语法中,“funcName”是要调用的函数的名称。
In the above syntax, the 'funcName' is the name of the function to be called.
Examples
让我们借助一些示例来理解 JavaScript 函数 call() 方法。
Let’s understand JavaScript Function call() method with the help of some examples.
Function call() method without specifying arguments
在下面的示例中,我们定义了 test() 函数。我们已使用函数名称和 call() 方法调用该函数。在这两种情况下,函数都打印相同输出。所以,当你未传递任何参数时,call() 方法会提供与正常函数调用相同输出。
In the example below, we have defined the test() function. We have invoked the function using the function name and call() method. In both cases, the function prints the same output. So, when you don’t pass any arguments, the call() method gives the same output as a normal function call.
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
function test() {
return "The function is invoked!";
}
document.getElementById("output1").innerHTML = test();
document.getElementById("output2").innerHTML = test.call();
</script>
</body>
</html>
The function is invoked!
The function is invoked!
Function call() method with 'this' argument only
如上所述,“this”参数用于指定函数的上下文。这里,我们定义包含 name 和 age 属性的 person1 和 person2 对象。
As we discussed above, 'this' argument is used to specify the context of the function. Here, we have defined the person1 and person2 objects containing the name and age properties.
我们传递对象作为 call() 方法的参数。在 printMessage() 函数中,我们访问该对象属性,它作为函数参数使用“this”关键字传递。
We passed the object as an argument of the call() method. In the printMessage() function, we access the object’s properties, which is passed as a function argument using the 'this' keyword.
在输出中,你可以观察到它根据对象传递 call() 方法的参数来打印对象属性的值。
In the output, you can observe that it prints the object properties' value according to the object passed as an argument of the call() method.
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
function printMessage() {
return "The age of the " + this.name + " is " + this.age;
}
const person1 = {
name: "John Doe",
age: 22,
}
const person2 = {
name: "Jane Doe",
age: 40,
}
document.getElementById("output1").innerHTML = printMessage.call(person1);
document.getElementById("output2").innerHTML = printMessage.call(person2);
</script>
</body>
</html>
The age of the John Doe is 22
The age of the Jane Doe is 40
Function call() method with multiple arguments
以下示例演示向 call() 方法传递多个参数。在以下代码中,printSum() 函数返回函数参数和对象属性的总和。
The example below demonstrates passing multiple arguments to the call() method. The printSum() function returns the sum of function parameters and object properties in the below code.
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output"> </p>
<script>
function printSum(p1, p2) {
return (this.num1 + this.num2 + p1 + p2);
}
const nums = {
num1: 5,
num2: 10,
}
const ans = printSum.call(nums, 40, 32);
document.getElementById("output").innerHTML = "Total sum is " + ans;
</script>
</body>
</html>
Total sum is 87
Using a method of different object
使用函数 call() 方法,对象可以使用在其他对象中定义的方法。在以下示例中,我们创建三个对象 - student、student1 和 student2。我们定义对象 student 的 getAge() 方法。此 getAge() 方法被其他两个对象(student1 和 student2)用来访问 age。我们向 call() 方法传递对象 student1 和 student2 作为参数。
Using Function call() method, an object can use a method that is defined in other object. In the below example, we create three objects – student, student1 and student2. We define a method getAge() of the object student. This getAge() method is used by the other two objects (student1 and student2) to access the age. The objects student1 and student2 are passed as arguments to the call() method.
<html>
<head>
<title> JavaScript - Function call() method </title>
</head>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
const student = {
getAge: function(){
return this.age;
}
}
const student1 = {
name: "John",
age: 22
}
const student2 = {
name: "Doe",
age: 18
}
document.getElementById("output1").innerHTML =student.getAge.call(student1);
document.getElementById("output2").innerHTML =student.getAge.call(student2);
</script>
</body>
</html>
函数 call() 和 apply() 方法是相同的,但有一些细微差别,因为 call() 方法接受参数列表,而 apply() 方法接受参数数组。我们将在此教程的下一章详细了解函数 apply() 方法。
The Function call() and apply() methods are the same but with minor difference as call() method accepts a list of arguments but the apply() method accepts an array of arguments. Let’s understand the Function apply() method in detail in the next chapter this tutorial.