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 Cookie 直接浏览网站分网址
Dec 08 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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+DBM的同学录程序(5)
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
javascript 写类方式之八
2009/07/05 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
Django Highcharts制作图表
2016/08/27 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
将python安装信息加入注册表的示例
2019/11/20 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python 线程的五个状态
2020/09/22 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
活动总结怎么写啊
2014/05/07 职场文书
节能环保口号
2014/06/12 职场文书
质量标语大全
2014/06/12 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
银行资信证明
2015/06/17 职场文书
法定代表人身份证明书
2015/06/18 职场文书
初中数学课堂教学反思
2016/02/17 职场文书