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 相关文章推荐
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
vue实现移动端div拖动效果
Mar 03 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
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python图像处理之反色实现方法
2015/05/30 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python 实现UTC时间加减的方法
2018/12/31 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
会计学自荐信
2014/06/03 职场文书
授权委托书
2014/07/31 职场文书
新教师个人工作总结
2015/02/06 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers