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中万恶的function实例分析
May 25 Javascript
浅谈JavaScript字符集
May 22 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP中的替代语法简介
2014/08/22 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python实现日志按天分割
2019/07/22 Python
Django中FilePathField字段的用法
2020/05/21 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
七一表彰活动方案
2014/01/18 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
科学发展观活动总结
2014/08/28 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2015年公务员工作总结
2015/04/24 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers