Javascript 简明教程
JavaScript - Function call() Method
Function call() Method
Function call() 方法允许我们调用一个函数,为 this 和单独提供的参数提供特定值。当调用一个普通函数时,this 在函数中的值是函数被访问的对象。我们可以操作 this 值,并可以使用 call() 方法为 it 分配一个任意对象。换句话说,我们可以调用现有的函数作为对象的函数,而无需将函数作为方法附加到对象。
在 JavaScript 中,每个函数都是一个函数对象。Function 对象提供函数的属性和方法。这些属性和方法在 Function.prototype 上定义,并由所有 Function 实例共享。Function 对象提供的一些重要方法是 call()、apply() 和 bind() 方法。
让我们了解 Function call() 方法的语法。
Syntax
JavaScript 中 Function call() 方法的语法如下:
funcName.call(thisArg, arg1, arg2, ... argN);
在上方的语法中,“funcName”是要调用的函数的名称。
Examples
让我们借助一些示例来理解 JavaScript 函数 call() 方法。
Function call() method without specifying arguments
在下面的示例中,我们定义了 test() 函数。我们已使用函数名称和 call() 方法调用该函数。在这两种情况下,函数都打印相同输出。所以,当你未传递任何参数时,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 对象。
我们传递对象作为 call() 方法的参数。在 printMessage() 函数中,我们访问该对象属性,它作为函数参数使用“this”关键字传递。
在输出中,你可以观察到它根据对象传递 call() 方法的参数来打印对象属性的值。
<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() 函数返回函数参数和对象属性的总和。
<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 作为参数。
<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() 方法。