Home > Web Front-end > JS Tutorial > javascript call() 方法详细讲解

javascript call() 方法详细讲解

WBOY
Release: 2016-06-01 09:54:26
Original
1395 people have browsed it

<strong>call()</strong> 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

<strong>call()基本语法</strong>

<code class="language-javascript">fun.call(thisArg[, arg1[, arg2[, ...]]])</code>
Copy after login

 

<strong>call()参数介绍:</strong>

参数名 参数说明
thisArg fun函数运行时指定的this需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nullundefinedthis值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ... 指定的参数列表。

 

<strong>call()基本功能说明</strong>

当调用一个函数时,可以赋值一个不同的 this 对象。this 引用当前对象,即 call 方法的第一个参数。

通过 call 方法,你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),就是一个Array对象借用了Object对象上的方法。

 

<strong>call()实例一:使用call方法调用父构造函数</strong>

在一个子构造函数中,你可以通过调用父构造函数的 call 方法来实现继承类似于Java中的写法。下例中,使用 Food 和 Toy 构造函数创建的对象实例都会拥有在 Product 构造函数中添加的 name 属性和 price 属性,但 category 属性是在各自的构造函数中定义的。

<code class="language-javascript">function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price </code>
Copy after login

 

call()实例二:使用call方法调用匿名函数

在下例中的for循环体内,我们创建了一个匿名函数,然后通过调用该函数的call方法,将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法,这个print方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为this值传入那个匿名函数(普通参数就可以),目的是为了演示call的用法。

<code class="language-javascript">var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i </code>
Copy after login

 

call()实例三:使用call方法调用匿名函数并且指定上下文的'this'

在下面的例子中,当调用 greet 方法的时候,该方法的 this 值会绑定到 对象。

<code class="language-javascript">function greet() {
  var reply = [this.person, 'Is An Awesome', this.role].join(' ');
  console.log(reply);
}

var i = {
  person: 'Douglas Crockford', role: 'Javascript Developer'
};

greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer</code>
Copy after login

 

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

Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template