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获取flash加载的百分比的实现代码
May 25 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
详解python tkinter模块安装过程
2020/01/06 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
大学自荐信
2013/12/12 职场文书
日语求职信范文
2013/12/17 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
加班费申请报告
2015/05/15 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript