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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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加密解密的代码
2006/10/09 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
政府信息公开实施方案
2014/05/09 职场文书
检讨书范文
2015/01/27 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB