call()
方法使用一个指定的 this
值和单独给出的一个或多个参数来调用一个函数。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
function.call(thisArg, arg1, arg2, ...)
参数
-
thisArg
-
可选的。在
function
函数运行时使用的this
值。请注意,this
可能不是该方法看到的实际值:如果这个函数处于 非严格模式下,则指定为null
或undefined
时会自动替换为指向全局对象,原始值会被包装。 -
arg1, arg2, ...
- 指定的参数列表。
返回值
使用调用者提供的 this
值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined
。
描述
call()
允许为不同的对象分配和调用属于一个对象的函数/方法。
call()
提供新的 this 值给当前调用的函数/方法。你可以使用 call
来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。
示例
使用 call
方法调用父构造函数
在一个子构造函数中,你可以通过调用父构造函数的 call
方法来实现继承,类似于 Java
中的写法。下例中,使用 Food
和 Toy
构造函数创建的对象实例都会拥有在 Product
构造函数中添加的 name
属性和 price
属性,但 category
属性是在各自的构造函数中定义的。
function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } function Toy(name, price) { Product.call(this, name, price); this.category = 'toy'; } var cheese = new Food('feta', 5); var fun = new Toy('robot', 40);
使用 call
方法调用匿名函数
在下例中的 for
循环体内,我们创建了一个匿名函数,然后通过调用该函数的 call
方法,将每个数组元素作为指定的 this
值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个 print
方法,这个 print
方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为 this
值传入那个匿名函数(普通参数就可以),目的是为了演示 call
的用法。
var animals = [ { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' } ]; for (var i = 0; i < animals.length; i++) { (function(i) { this.print = function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); }
使用 call
方法调用函数并且指定上下文的 'this
'
在下面的例子中,当调用 greet
方法的时候,该方法的this
值会绑定到 obj
对象。
function greet() { var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); console.log(reply); } var obj = { animal: 'cats', sleepDuration: '12 and 16 hours' }; greet.call(obj); // cats typically sleep between 12 and 16 hours
使用 call
方法调用函数并且不指定第一个参数(argument
)
在下面的例子中,我们调用了 display
方法,但并没有传递它的第一个参数。如果没有传递第一个参数,this
的值将会被绑定为全局对象。
var sData = 'Wisen'; function display() { console.log('sData value is %s ', this.sData); } display.call(); // sData value is Wisen
注意:在严格模式下,this
的值将会是 undefined
。见下文。
'use strict'; var sData = 'Wisen'; function display() { console.log('sData value is %s ', this.sData); } display.call(); // Cannot read the property of 'sData' of undefined
规范
规范版本 | 状态 | 说明 |
---|---|---|
ECMAScript 1st Edition (ECMA-262) | Standard | 初始定义。在 JavaScript 1.3 中实现。 |
ECMAScript 5.1 (ECMA-262) Function.prototype.call |
Standard | |
ECMAScript 2015 (6th Edition, ECMA-262) Function.prototype.call |
Standard | |
ECMAScript Latest Draft (ECMA-262) Function.prototype.call |
Draft |
浏览器兼容性
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
call |
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 5.5 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Legend
- Full support
- Full support