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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php实现用户在线时间统计详解
2011/10/08 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
移动节点的jquery代码
2014/01/13 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
javascript简易画板开发
2020/04/12 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python探索之SocketServer详解
2017/10/28 Python
python3爬取各类天气信息
2018/02/24 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Delphi CS笔试题
2014/01/04 面试题
电力公司个人求职信范文
2014/02/04 职场文书
项目工作说明书
2014/07/29 职场文书
违反交通法规检讨书
2014/09/10 职场文书
婚礼新人答谢词
2015/01/04 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
四年级作文之植物
2019/09/20 职场文书
Python 全局空间和局部空间
2022/04/06 Python