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操作篇(三) - 过程处理
Jun 23 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
python处理csv中的空值方法
2018/06/22 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
新闻编辑自荐信
2013/11/03 职场文书
同居协议书范本
2014/04/23 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014年学生工作总结
2014/11/20 职场文书
校长师德表现自我评价
2015/03/05 职场文书
英文辞职信范文
2015/05/13 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server