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 相关文章推荐
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
Vue实现下拉加载更多
May 09 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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
tab栏切换原理
2017/03/22 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python最基本的输入输出详解
2015/04/25 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
python连接mysql有哪些方法
2020/06/24 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
先进党支部事迹材料
2014/01/13 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
个人业务学习心得体会
2016/01/25 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
redis中lua脚本使用教程
2021/11/01 Redis