Javascript 中的 call 和 apply使用介绍

简单的说就是改变函数执行的上下文，这是最基本的用法。两个方法基本区别在于传参不同。
call(obj,arg1,arg2,arg3);call第一个参数传对象，可以是null。参数以逗号分开进行传值，参数可以是任何类型。
apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象，参数可以是数组或者arguments 对象。
这两个方法通常被用来类的继承和回调函数：
作用一、类的继承：
先来看这个例子：


代码如下:

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("愚人码头",28,"男");
test.alertName();//愚人码头
test.alertAge();//28
test.alertSex();//男

这样 webDever类就继承Person类，Person.call(this,name,age) 的 意思就是使用 Person构造函数（也是函数）在this对象下执行，那么 webDever就有了Person的所有属性和方法，test对象就能够直接调用Person的方法以及属性了; 09年的理解解非常粗浅，呵呵。
作用二、回调函数：
call 和 apply在回调行数中也非常有用，很多时候我们在开发过程中需要对改变回调函数的执行上下文，最常用的比如ajax或者定时什么的，一般情况下，Ajax都是全局的，也就是window对象下的，来看这个例子：


代码如下:

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);
});

这里


代码如下:

album.get_owner(function (owner) {
alert('The album' + this.name + ' belongs to ' + owner);
});

中的 this.name就能直接取到album对象中的name属性了。

赞 (0)

相关推荐

  • 理解Javascript的caller,callee,call,apply区别

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引.  说明 arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.arguments是一个类似数组但不是数组的对象,说它类似

  • 浅谈javascript中call()、apply()、bind()的用法

    call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, args]) 作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组 还是举例说明比较直观: wind

  • Javascript - 全面理解 caller，callee，call，apply

    How to - Javascript Call, apply, caller - http://www.never-online.net // Javascript - 全面理解 caller,callee,call,apply Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny 1.caller JScript参考中说明为:返回一个对函数的引用,该函数调用

  • 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起,  Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如  alert(Math.max(5,8))   //8alert(Math.max(5,7,9,3,1,6))   //9 但是在很多情况下,我们需要找出数组中最大的元素.var arr=[5,7,9,1]alert(Math.max(arr))    //   这样却是不行的.一定要这样写 functi

  • javascript call和apply方法

    例子如下: 复制代码 代码如下: <script> /** *动物 */ function Animal(){ this.name='Amimal'; this.showName=function(){ alert(this.name); }; } /* *猫 */ function Cat(){ this.name='cat'; } var animal=new Animal;//创建动物对象 var cat=new Cat;//创建猫对象 animal.showName.call(cat,

  • js设置组合快捷键/tabindex功能的方法

    快捷键在日常的使用还是挺多的,例如熟悉的粘贴ctrl+v,复制 ctrl+c,使用快捷键能提高我们的做事效率,特别是当我们熟悉了一种操作后,再次使用它来进行操作就会变得很方便,很顺手,对于使用键盘的重度用户,键盘永远比鼠标来的快. 1)tabindex: 就是利用tab来轻松的控制页面中的链接和表单元素它的用法很简单:obj.tabindex  = tabindex; 这个tabindex 的值,按照w3c 的规定可以从0开始 一直到32767 2) js 设置组合快捷键 本质就是获得你要设置的

  • JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

  • JS类库Bindows1.3中的内存释放方式分析

    我在前段时间介绍过IE中JavaScript脚本Memory Leak的问题,后来在几位热心网友的讨论下,基本认可了内存泄露的事实和原理.在小规模的测试case下,本来都达到了基本避免IE中脚本的ML问题.可是近来发现只以"仔细"来防止IE中脚本ML似乎是非常困难的一件事情,难道开始的讨论有错误吗? 何谓"仔细"呢?就是说在有对象相互引用的时候,在对象丢弃时(不一定是页面refresh)断开彼此的引用链,特别是脚本中创建的对象和DHTML中的对象间的引用:清除HTM

  • JavaScript学习点滴 call、apply的区别

    1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global

  • ANGULARJS中用NG-BIND指令实现单向绑定的例子

    本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用. 不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多. angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展. 下面从最基础的内容走起: 复制代码 代码如下: <!DOCTYPE html> <html ng-app>

  • JavaScript中apply与call的用法意义及区别说明

    apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2-]]); 从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的.两个方法除了thisArg参数,都是为Funct

  • 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{firstName:"李",lastName:"李大嘴"}} 那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象

  • js bind 函数 使用闭包保存执行上下文

    复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu

  • JavaScript 学习笔记（九）call和apply方法

    call和apply方法 call方法可改变上下文this指针,类似的方法还有apply,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针. obj1.method1.call(obj2,argument1,argument2) 如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1-这些做为参数传入. 举一个具体的例子 复制代码 代码如下: function add(a, b) { alert(a + b);

  • js apply/call/caller/callee/bind使用方法与区别分析

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对

  • JavaScript中的apply和call函数详解

    第一次翻译技术文章,见笑了! 翻译原文: Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下 这篇文章 ,复习一下(refresher)JavaScript特性.你可能还想知道JavaScrip

  • 开启Javascript中apply、call、bind的用法之旅模式

    我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先给大家列出一段代码示例: function fruits() {} fru

  • javascript下arguments,caller,callee,call,apply示例及理解

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引. 说明 Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数

  • javascript中call,apply,bind的用法对比分析

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用","请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用不成.可是你非打这个电话不可,于是你可以去借一下朋友的手机,或者借用一下邻居的手机,或者公用电话,这样呢,你就可以在自己

  • javascript中apply和call方法的作用及区别说明

    一.call和apply的说明 1.call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 2.语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this,

随机推荐