Javascript中的call()方法介绍


Posted in Javascript onMarch 15, 2015

在Mozilla的官网中对于call()的介绍是:

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

Call() 语法
fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() 参数

thisArg

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

arg1, arg2, ...
指定的参数列表。

Javascript中的call()方法

先不关注上面那些复杂的解释,一步步地开始这个过程。

Call()方法的实例

于是写了另外一个Hello,World:

function print(p1, p2) {

    console.log( p1 + ' ' + p2);

}

print("Hello", "World");

print.call(undefined, "Hello", "World");

两种方式有同样的输出结果,然而,相比之下call方法还传进了一个undefined。

接着,我们再来看另外一个例子。

var obj=function(){};

function print(p1, p2) {

    console.log( p1 + ' ' + p2);

}
print.call(obj, "Hello", "World");

只是在这里,我们传进去的还是一个undefined,因为上一个例子中的undefined是因为需要传进一个参数。这里并没有真正体现call的用法,看看一个更好的例子。

function print(name) {

    console.log( this.p1 + ' ' + this.p2);

}
var h={p1:"hello", p2:"world", print:print};

h.print("fd");
var h2={p1:"hello", p2:"world"};

print.call(h2, "nothing");

call就用就是借用别人的方法、对象来调用,就像调用自己的一样。在h.print,当将函数作为方法调用时,this将指向相关的对象。只是在这个例子中我们没有看明白,到底是h2调了print,还是print调用了h2。于是引用了Mozilla的例子

function Product(name, price) {

    this.name = name;

    this.price = price;
    if (price < 0)

        throw RangeError('Cannot create product "' + name + '" with a negative price');

    return this;

}
function Food(name, price) {

    Product.call(this, name, price);

    this.category = 'food';

}

Food.prototype = new Product();
var cheese = new Food('feta', 5);

console.log(cheese);

在这里我们可以真正地看明白,到底是哪个对象调用了哪个方法。例子中,使用Food构造函数创建的对象实例都会拥有在Product构造函数中添加的 name 属性和 price 属性,但 category 属性是在各自的构造函数中定义的。
function print(name) {

    console.log( this.p1 + ' ' + this.p2);

}
var h2= function(no){

    this.p1 = "hello";

    this.p2 = "world";

    print.call(this, "nothing");

};

h2();

这里的h2作为一个接收者来调用函数print。正如在Food例子中,在一个子构造函数中,你可以通过调用父构造函数的 call 方法来实现继承。

至于Call方法优点,在《Effective JavaScript》中有介绍。

1.使用call方法自定义接收者来调用函数。
2.使用call方法可以调用在给定的对象中不存在的方法。
3.使用call方法可以定义高阶函数允许使用者给回调函数指定接收者。

Javascript 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
js数据类型检测总结
Aug 05 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
Javascript中的高阶函数介绍
Mar 15 #Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 #Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 #Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
风格模板初级不完全修改教程
2006/10/09 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php pdo操作数据库示例
2017/03/10 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
基于vue2实现左滑删除功能
2017/11/28 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
python转换摩斯密码示例
2014/02/16 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python opencv实现证件照换底功能
2019/08/19 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python识别验证码的实现示例
2020/09/30 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
几个Linux面试题笔试题
2016/08/01 面试题
聚美优品广告词改编
2014/03/14 职场文书
地球一小时宣传标语
2014/06/24 职场文书