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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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生成随机数或者字符串的代码
2008/09/05 PHP
php实现的SESSION类
2014/12/02 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
学习jquery之一
2007/04/27 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python 文件管理实例详解
2015/11/10 Python
python hook监听事件详解
2018/10/25 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python如何合并多个字典或映射
2020/07/24 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
如何执行一个shell程序
2012/11/23 面试题
乐观自信演讲稿范文
2014/05/21 职场文书
品质标语大全
2014/06/21 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers