使用
apply()
方法,您可以编写一个可用于不同对象的方法。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>
<p id="demo"></p>
<script>
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.apply(person1);
</script>
</body>
</html>
call() 和 apply() 的区别
call()
方法单独接受参数。
apply()
方法将参数作为数组。如果您想使用数组而不是参数列表,apply() 方法非常方便。
带参数的 apply() 方法
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>
<p id="demo"></p>
<script>
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.apply(person1, ["Oslo", "Norway"]);
</script>
</body>
</html>
与
call()
方法相比:const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");<!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This example calls the fullName method of person, using it on person1: </p> <p id="demo"></p> <script> const person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } const person1 = { firstName:"John", lastName: "Doe" } const person2 = { firstName:"Mary", lastName: "Doe" } document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); </script> </body> </html>
在数组上模拟 Max 方法
Math.max(1,2,3);
由于 JavaScript 数组没有 max() 方法,您可以改为应用
Math.max()
方法。Math.max.apply(null, [1,2,3]); // Will also return 3
<!DOCTYPE html> <html> <body> <h2>JavaScript apply()</h2> <p>This example returns the highest number in an array of numbers:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = Math.max.apply(null, [1,2,3]); </script> </body> </html>
第一个参数 (null) 无关紧要。本示例中未使用它。
这些示例将给出相同的结果:
Math.max.apply(Math, [1,2,3]); // Will also return 3
<!DOCTYPE html> <html> <body> <h2>JavaScript apply()</h2> <p>This example returns the highest number in an array of numbers:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = Math.max.apply(Math, [1,2,3]); </script> </body> </html>
Math.max.apply(" ", [1,2,3]); // Will also return 3
Math.max.apply(0, [1,2,3]); // Will also return 3
在 JavaScript 严格模式下,如果
apply()
方法的第一个参数不是对象,它将成为被调用函数的所有者(对象)。在“非严格”模式下,它成为全局对象。