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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
javascript表单验证大全
Aug 12 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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
简单的php 验证图片生成函数
2009/05/21 PHP
PHP strtotime函数详解
2009/12/18 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP7内核之Reference详解
2019/03/14 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
承诺书范本
2015/01/21 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript