javascript call() 方法详细讲解
call()
方法在使用一个指定的this
值和若干个指定的参数值的前提下调用某个函数或方法.
call()基本语法
fun.call(thisArg[, arg1[, arg2[, ...]]])
call()参数介绍:
参数名 | 参数说明 |
thisArg | 在fun 函数运行时指定的this 值。 需要注意的是,指定的this 值并不一定是该函数执行时真正的this 值,如果这个函数处于非严格模式下,则指定为null 和undefined 的this值会自动指向 全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this 会指向该原始值的自动包装对象。 |
arg1, arg2, ... | 指定的参数列表。 |
call()基本功能说明
当调用一个函数时,可以赋值一个不同的 this
对象。this
引用当前对象,即 call
方法的第一个参数。
通过 call 方法,
你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),
就是一个Array
对象借用了Object对象上的方法。
call()实例一:使用call方法调用父构造函数
在一个子构造函数中,你可以通过调用父构造函数的 call
方法来实现继承,
类似于Java
中的写法。下例中,使用 Food
和 Toy
构造函数创建的对象实例都会拥有在 Product
构造函数中添加的 name 属性和 price 属性,但 category
属性是在各自的构造函数中定义的。
function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError('Cannot create product ' +
this.name + ' with a negative price');
}
return this;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
Food.prototype = Object.create(Product.prototype);
Food.prototype.constructor = Food; // Reset the constructor from Product to Food
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
Toy.prototype = Object.create(Product.prototype);
Toy.prototype.constructor = Toy; // Reset the constructor from Product to Toy
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
call()实例二:
使用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()实例三:
使用call
方法调用匿名函数并且指定上下文的'this'
在下面的例子中,当调用 greet
方法的时候,该方法的 this
值会绑定到 i
对象。
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
注意:该方法的作用和apply()
方法类似,只有一个区别,就是call()
方法接受的是若干个参数的列表,而apply()
方法接受的是一个包含多个参数的数组。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python2.6低版本Python如何实现爬虫功能
- python开发web服务 bottle框架
- 这样设置 IDEA,让你爽到飞起!
- GO 切片实力踩坑
- BeautifulSoup解析html介绍
- 微信会被封?!包子 Leetcode 1512 solution Number of Good Pairs
- VUE是什么?
- 爬虫如何抓取网页的动态加载数据-ajax加载
- Python 为什么用 # 号作注释符?
- 基于矩阵分解原理的推荐系统
- Python实现信息自动配对爬虫排版程序
- EOF是不是字符
- Alibaba开源Java诊断工具Arthas简单介绍
- 气象编程 | Google Earth Engine for R——提供250+ 实例
- Anaconda安装和使用