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 相关文章推荐
复制js对象方法(详解)
Jul 08 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
js中substring和substr的定义和用法
May 05 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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
晶体管来复再生式二管收音机
2021/03/02 无线电
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
本科毕业生应聘自荐信范文
2014/06/26 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
活动总结模板大全
2015/05/11 职场文书
KTV员工管理制度
2015/08/06 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android