Javascript call和apply区别及使用方法


Posted in Javascript onNovember 14, 2013

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

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

二、两者区别
两个方法基本区别在于传参不同
2.1、call方法:

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();
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
Toy.prototype = new Product();
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

2.2、apply方法:
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.apply(this, arguments);
this.category = 'food';
}
Food.prototype = new Product();
function Toy(name, price) {
Product.apply(this, arguments);
this.category = 'toy';
}
Toy.prototype = new Product();
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

三、作用实例

3.1、类的继承

function Person(name,age){
this.name = name;
this.age=age;
this.alertName = function(){
alert(this.name);
}
this.alertAge = function(){
alert(this.age);
}
}
function webDever(name,age,sex){
Person.call(this,name,age);
this.sex=sex;
this.alertSex = function(){
alert(this.sex);
}
}
var test= new webDever(“设计蜂巢”,24,”男”);
test.alertName();//设计蜂巢
test.alertAge();//24
test.alertSex();//男

3.2、回调函数
function Album(id, title, owner_id) {
this.id = id;
this.name = title;
this.owner_id = owner_id;
};
Album.prototype.get_owner = function (callback) {
var self = this;
$.get(‘/owners/' + this.owner_id, function (data) {
callback && callback.call(self, data.name);
});
};
var album = new Album(1, ‘设计蜂巢', 2);
album.get_owner(function (owner) {
alert(‘The album' + this.name + ‘ belongs to ‘ + owner);
});
Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Vue.js中的图片引用路径的方式
Jul 28 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
javascript 上下banner替换具体实现
Nov 14 #Javascript
javascript scrollTop正解使用方法
Nov 14 #Javascript
简单的Jquery遮罩层代码实例
Nov 14 #Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 #Javascript
MyEclipse取消验证Js的两种方法
Nov 14 #Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP中list方法用法示例
2016/12/01 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python使用建议与技巧分享(二)
2020/08/17 Python
python用Configobj模块读取配置文件
2020/09/26 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
环境工程求职简历的自我评价范文
2013/10/24 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
项目建议书范文
2014/05/12 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js