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选择器之基本选择器、层次选择器
Feb 07 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
微信小程序实现简单文字跑马灯
May 26 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制作静态网站的模板框架(一)
2006/10/09 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
浅析php header 跳转
2013/06/17 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python lambda表达式用法实例分析
2018/12/25 Python
flask实现验证码并验证功能
2019/12/05 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
服务员岗位职责
2015/02/03 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP