JavaScript call方法

JavaScript call方法教程

JavaScript 中,call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个 函数

call 方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的 数组

JavaScript call详解

语法

function.call(thisArg, arg1, arg2, ...);

参数

参数 描述
thisArg 可选的。在 function 函数运行时使用的 this 值。请注意,this 可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局 对象,原始值会被包装。
arg1, arg2, … 指定的参数列表。

返回值

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。

说明

call() 允许为不同的对象分配和调用属于一个对象的函数/方法。

call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现 继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。

案例

call调用父类构造函数

使用 call 实现调用父类的构造函数

<!DOCTYPE html> <html> <head> <title>JavaScript call 方法</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); function Person(name, age){ this.name = name; this.age = age; console.log("Call Person, name =", this.name, "age =", this.age); } function Student(name, age, score){ Person.call(this, name, age); this.score = score; console.log("Call Student, name =", this.name, "age =", this.age, "score =", this.score); } var student = new Student("haicoder", 110, 99); </script> </head> </html>

程序运行后,控制台输出如下:

46_javascript call.png

我们首先定义了一个 Person 的构造函数,传入两个属性,接着,我们再次定义了一个 Student 构造函数,传入三个属性,我们在 Student 构造函数里,使用 call 调用了 Person 的构造函数。

最后,我们实例化了一个 Student 对象 student,此时,我们可以看到,首先输出了 Person 的构造函数的内容,接着,输出了 Student 对象的构造函数的内容。

即,我们通过 call 在 Student 的构造函数调用了 Person 的构造函数。

call调用普通函数

使用 call 实现调用普通函数

<!DOCTYPE html> <html> <head> <title>JavaScript call 方法</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); function greet(){ var reply = [this.animal, 'sleep for', this.sleepDuration].join(' '); console.log(reply); } var obj = { animal: 'cats', sleepDuration: '12 hours' }; greet.call(obj); </script> </head> </html>

程序运行后,控制台输出如下:

47_javascript call.png

我们首先定义了一个 greet 函数,在该函数里面,我们定义了一个由数组使用 join 连接起来的字符串 reply,同时,reply 中的数组的第一个元素和第三个元素都需要 this 对象。

接着,我们定义了一个 obj 对象,obj 对象里面有两个属性,并分别赋初值,最后,我们通过使用 greet 的 call 方法,传入了 obj 对象,实现了调用 greet 函数。

此时,greet 函数里面的 this 就是 obj 对象,因此,通过 call 我们可以在 greet 函数里面访问了 obj 对象里面的 animal 和 sleepDuration 属性。

call调用普通函数

使用 call 实现调用普通函数

<!DOCTYPE html> <html> <head> <title>JavaScript call 方法</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var name = "HaiCoder"; function sayHi(){ console.log("Hi, i am", this.name); } sayHi.call(); </script> </head> </html>

程序运行后,控制台输出如下:

48_javascript call.png

我们首先定义了一个 name 变量,并赋值,接着,我们定义了一个 sayHi 方法,该方法里面,我们同样需要访问 this 对象的 name 属性。

最后,我们通过 sayHi.call() 的方式实现了调用 sayHi 函数,此时的 call 函数,我们没有传入任何的参数,如果没有传递第一个参数,此时的 this 的值将会被绑定为全局对象。

因此,这里可以正确的访问到 name 属性的值。现在,我们将程序修改如下:

<!DOCTYPE html> <html> <head> <title>JavaScript call 方法</title> <script type="text/javascript"> 'use strict'; console.log("嗨客网(www.haicoder.net)"); var name = "HaiCoder"; function sayHi(){ console.log("Hi, i am", this.name); } sayHi.call(); </script> </head> </html>

程序运行后,控制台输出如下:

49_javascript call.png

我们使用 ‘use strict’ 将程序设置为了严格模式,此时,再次运行程序,程序报错,这是因为,在严格模式下,this 的值将会是 undefined。

JavaScript call方法总结

在 JavaScript 中,call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。