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使用prototype定义对象类型
Feb 07 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
原生JS实现烟花效果
Mar 10 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
PHP操作XML作为数据库的类
2010/12/19 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python判断有效的数独算法示例
2019/02/23 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Farnell德国:电子元器件供应商
2018/07/10 全球购物
大学四年规划书范文
2013/12/27 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
机关出纳岗位职责
2014/04/03 职场文书
趣味运动会广播稿
2014/09/13 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
Django drf请求模块源码解析
2021/06/08 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Python实现抖音热搜定时爬取功能
2022/03/16 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android