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 事件队列调整方法
Sep 18 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
vue路由跳转传参数的方法
May 06 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JS的replace方法介绍
2012/10/20 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Python pass 语句使用示例
2014/03/11 Python
django中模板的html自动转意方法
2018/05/27 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python 实现A*算法的示例代码
2018/08/13 Python
linux安装python修改默认python版本方法
2019/03/31 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
HTTP状态码详解
2021/03/18 杂记
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
售后专员岗位职责
2013/12/08 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
员工生日会策划方案
2014/06/14 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
农业生产宣传标语
2014/10/08 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
婚内分居协议书范文
2014/11/26 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android