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复制对象使用说明
Jun 28 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python实现微信防撤回神器
2019/04/29 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python多分支if语句的使用
2020/09/03 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
英语道歉信范文
2014/01/09 职场文书
爱情保证书范文
2014/02/01 职场文书
保证书格式
2015/01/16 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
公司档案管理制度
2015/08/05 职场文书