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 入门教程 [翻译] 推荐
Aug 17 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python ini文件常用操作方法解析
2020/04/26 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2014年安全员工作总结
2014/11/13 职场文书
夏洛特的网观后感
2015/06/15 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
Nginx 匹配方式
2022/05/15 Servers