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实现页面自适应
Jan 19 Javascript
Javascript实现的分页函数
Feb 07 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
jQuery创建折叠式菜单
2019/06/15 jQuery
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
四年级下册教学反思
2014/02/01 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
员工辞职信范文
2015/03/02 职场文书
企业团队精神心得体会
2016/01/19 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers