JavaScript 函数 Call 方法
JavaScript基础 2022-04-25 01:50:25小码哥的IT人生shichen
JavaScript 函数 Call
方法重用
使用 call() 方法，您可以编写能够在不同对象上使用的方法。
函数是对象方法
在 JavaScript 中，函数是对象的方法。
如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数（参见前一章）。
下面的例子创建了带有三个属性的对象（firstName、lastName、fullName）。
示例代码：
var person = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
person.fullName(); // 将返回 "Bill Gates"
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>此例创建一个具有三个属性（firstName，lastName，fullName）的对象。</p>
<p>fullName 属性是一个方法：</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
x = myObject.fullName();
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
Javascript 函数 此例创建一个具有三个属性（firstName，lastName，fullName）的对象。 fullName 属性是一个方法： Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
fullName 属性是一个方法。person 对象是该方法的拥有者。
fullName 属性属于 person 对象的方法。
JavaScript call() 方法
call() 方法是预定义的 JavaScript 方法。
它可以用来调用所有者对象作为参数的方法。
通过 call()，您能够使用属于另一个对象的方法。
本例调用 person 的 fullName 方法，并用于 person1：
示例代码：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
firstName:"Steve",
lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>此例调用 person 的 fullName 方法，在 person1 上使用它：</p>
<p id="demo"></p>
<script>
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
var person2 = {
firstName:"Steve",
lastName: "Jobs"
}
var x = person.fullName.call(person1);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
Javascript 函数 此例调用 person 的 fullName 方法，在 person1 上使用它： Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例调用 person 的 fullName 方法，并用于 person2：
示例代码：
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
firstName:"Steve",
lastName: "Jobs",
}
person.fullName.call(person2); // 将返回 "Steve Jobs"
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>此示例调用 person 的 fullName 方法，在 person2 上使用它：</p>
<p id="demo"></p>
<script>
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
var person2 = {
firstName:"Steve",
lastName: "Jobs"
}
x = person.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
Javascript 函数 此示例调用 person 的 fullName 方法，在 person2 上使用它： Steve Jobs
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
带参数的 call() 方法
call() 方法可接受参数：
示例代码：
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>此例调用 person 的 fullName 方法，在 person1 上使用它：</p>
<p id="demo"></p>
<script>
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
var person2 = {
firstName:"Steve",
lastName: "Jobs"
}
var x = person.fullName.call(person1, "Seatle", "USA");
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
Javascript 函数 此例调用 person 的 fullName 方法，在 person1 上使用它： Bill Gates,Seatle,USA
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
