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 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
浅谈javascript中return语句
Jul 15 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
vue封装数字翻牌器
Apr 20 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
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
jQuery客户端分页实例代码
2013/11/18 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
如何使用angularJs
2017/05/08 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python re模块的高级用法详解
2018/06/06 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
某公司面试题
2012/03/05 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
化学教师教学反思
2014/01/17 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
项目经理岗位职责
2015/01/31 职场文书
污水处理保证书
2015/05/09 职场文书
win10下go mod配置方式
2021/04/25 Golang
python 解决微分方程的操作(数值解法)
2021/05/26 Python
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python