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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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程序的php代码
2008/04/07 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
webpack开发跨域问题解决办法
2017/08/03 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
演讲稿开场白
2014/01/13 职场文书
信息管理应届生求职信
2014/03/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
导师工作推荐信范文
2014/05/17 职场文书
社团个人总结范文
2015/03/05 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server