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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
HTML上传控件取消选择
Mar 06 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
jQuery实现可以扩展的日历
2020/12/01 jQuery
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python笔试面试题小结
2019/09/07 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
应征英语教师求职信
2013/11/27 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
助残日活动总结
2014/08/27 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
幼师大班个人总结
2015/02/13 职场文书
培训师岗位职责
2015/02/14 职场文书
小学生暑假安全公约
2015/07/14 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记