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生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery入门知识简介
Mar 04 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
微信小程序实现搜索功能
Mar 10 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 strnatcmp()函数的用法总结
2013/11/27 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
numpy自动生成数组详解
2017/12/15 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
珍珠鸟教学反思
2014/02/01 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
不错的求职信范文
2014/07/20 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python