JavaScript中的call方法和apply方法使用对比


Posted in Javascript onAugust 12, 2015

方法定义
call方法:
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
 
常用实例
a、

function add(a,b) 
{ 
 alert(a+b); 
} 
function sub(a,b) 
{ 
 alert(a-b); 
} 
 
add.call(sub,3,1);

 这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
 
b、

function Animal(){ 
 this.name = "Animal"; 
 this.showName = function(){ 
  alert(this.name); 
 } 
} 
 
function Cat(){ 
 this.name = "Cat"; 
} 
 
var animal = new Animal(); 
var cat = new Cat(); 
 
//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。 
//输入结果为"Cat" 
animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]);

 call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat
 
c、实现继承

function Animal(name){  
 this.name = name;  
 this.showName = function(){  
  alert(this.name);  
 }  
}  
 
function Cat(name){ 
 Animal.call(this, name); 
}  
 
var cat = new Cat("Black Cat");  
cat.showName();

 Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.
 
d、多重继承

function Class10() 
{ 
 this.showSub = function(a,b) 
 { 
  alert(a-b); 
 } 
} 
 
function Class11() 
{ 
 this.showAdd = function(a,b) 
 { 
  alert(a+b); 
 } 
} 
 
function Class2() 
{ 
 Class10.call(this); 
 Class11.call(this); 
}

 很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments

JavaScript 中的call和apply方法主要用来改变函数对象的上下文,即函数中this所指向的内容。

调用方法如下:

fun.call(obj1, arg1, arg2, ...);
fun.apply(obj2, [arrs]);

具体示例:

var Obj1 = {
 name: 'Object1',
 say: function(p1, p2) {
  console.log(this.name + ' says ' + p1 + ' ' + p2);
 }
};

// logs 'Object1 says Good morning'
Obj1.say('Good', 'morning');

var Obj2 = {
 name: 'Object2'
};

// logs 'Object2 says Good afternoon'
Obj1.say.call(Obj2, 'Good', 'afternoon');

// logs 'Object2 says Good afternoon again'
Obj1.say.apply(Obj2, ['Good', 'afternoon again']);

通过示例可以看出,通过常规方式调用say的时候,方法中的this指向Obj1,而通过call和apply调用的时候,this却指向了Obj2。

通过示例可以看出,call和apply的作用是完全相同的,其调用方法的区别也只是参数列表不同罢了。

Javascript 相关文章推荐
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue计算属性及使用详解
Apr 02 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue element-ui实现动态面包屑导航
Dec 23 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 #Javascript
基于jQuery实现动态数字展示效果
Aug 12 #Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 #Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 #Javascript
javascript表单验证大全
Aug 12 #Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 #Javascript
You might like
thinkPHP模型初始化实例分析
2015/12/03 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
学习jQuey中的return false
2015/12/18 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python中bisect模块用法实例
2014/09/25 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
小学生运动会报道稿
2014/09/12 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
JavaScript 定时器详情
2021/11/11 Javascript