Javascript 中的 call 和 apply使用介紹
更新時(shí)間：2012年02月22日 15:40:38 作者：
JavaScript 中通過call或者apply用來代替另一個(gè)對象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象
簡單的說就是改變函數(shù)執(zhí)行的上下文，這是最基本的用法。兩個(gè)方法基本區(qū)別在于傳參不同。
call(obj,arg1,arg2,arg3);call第一個(gè)參數(shù)傳對象，可以是null。參數(shù)以逗號分開進(jìn)行傳值，參數(shù)可以是任何類型。
apply(obj,[arg1,arg2,arg3]);apply第一個(gè)參數(shù)傳對象，參數(shù)可以是數(shù)組或者arguments 對象。
這兩個(gè)方法通常被用來類的繼承和回調(diào)函數(shù)：
作用一、類的繼承：
先來看這個(gè)例子：
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構(gòu)造函數(shù)（也是函數(shù)）在this對象下執(zhí)行，那么 webDever就有了Person的所有屬性和方法，test對象就能夠直接調(diào)用Person的方法以及屬性了; 09年的理解解非常粗淺，呵呵。
作用二、回調(diào)函數(shù)：
call 和 apply在回調(diào)行數(shù)中也非常有用，很多時(shí)候我們在開發(fā)過程中需要對改變回調(diào)函數(shù)的執(zhí)行上下文，最常用的比如ajax或者定時(shí)什么的，一般情況下，Ajax都是全局的，也就是window對象下的，來看這個(gè)例子：
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屬性了。
call(obj,arg1,arg2,arg3);call第一個(gè)參數(shù)傳對象，可以是null。參數(shù)以逗號分開進(jìn)行傳值，參數(shù)可以是任何類型。
apply(obj,[arg1,arg2,arg3]);apply第一個(gè)參數(shù)傳對象，參數(shù)可以是數(shù)組或者arguments 對象。
這兩個(gè)方法通常被用來類的繼承和回調(diào)函數(shù)：
作用一、類的繼承：
先來看這個(gè)例子：
復(fù)制代碼 代碼如下:
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構(gòu)造函數(shù)（也是函數(shù)）在this對象下執(zhí)行，那么 webDever就有了Person的所有屬性和方法，test對象就能夠直接調(diào)用Person的方法以及屬性了; 09年的理解解非常粗淺，呵呵。
作用二、回調(diào)函數(shù)：
call 和 apply在回調(diào)行數(shù)中也非常有用，很多時(shí)候我們在開發(fā)過程中需要對改變回調(diào)函數(shù)的執(zhí)行上下文，最常用的比如ajax或者定時(shí)什么的，一般情況下，Ajax都是全局的，也就是window對象下的，來看這個(gè)例子：
復(fù)制代碼 代碼如下:
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);
});
這里
復(fù)制代碼 代碼如下:
album.get_owner(function (owner) {
alert('The album' + this.name + ' belongs to ' + owner);
});
中的 this.name就能直接取到album對象中的name屬性了。
您可能感興趣的文章:
- 小議Function.apply()之二------利用Apply的參數(shù)數(shù)組化來提高 JavaScript程序性能
- Javascript - 全面理解 caller，callee，call，apply
- JS類庫Bindows1.3中的內(nèi)存釋放方式分析
- 理解Javascript的caller,callee,call,apply區(qū)別
- javascript call和apply方法
- js apply/call/caller/callee/bind使用方法與區(qū)別分析
- javascript下arguments,caller,callee,call,apply示例及理解
- JavaScript 學(xué)習(xí)筆記（九）call和apply方法
- JavaScript中apply與call的用法意義及區(qū)別說明
- 使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
- JavaScript學(xué)習(xí)點(diǎn)滴 call、apply的區(qū)別
- js bind 函數(shù) 使用閉包保存執(zhí)行上下文
- JavaScript中的apply()方法和call()方法使用介紹
- js設(shè)置組合快捷鍵/tabindex功能的方法
- javascript中apply和call方法的作用及區(qū)別說明
- JavaScript中的apply和call函數(shù)詳解
- ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
- javascript中call,apply,bind的用法對比分析
- 淺談javascript中call()、apply()、bind()的用法
- 開啟Javascript中apply、call、bind的用法之旅模式
相關(guān)文章
js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組
這篇文章主要介紹了js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
用javascript獲取textarea中的光標(biāo)位置
Javascript一向以他的靈活隨意而著稱，這也使得它的功能可以非常的強(qiáng)大，而由于沒有比較好的調(diào)試工具，又使得它使用起來困難重重，尤其使對于一些初學(xué)者，更是感覺到無從下手。今天探討的問題是用javascript獲取textarea中光標(biāo)的位置。2008-05-05
在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
在前端模塊化的時(shí)候，不僅僅是js需要進(jìn)行模塊化管理，html有時(shí)候也需要模塊化管理。這里就介紹下如何通過requirejs，實(shí)現(xiàn)html代碼的模塊化開發(fā)2016-04-04
JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要給大家介紹了關(guān)于用js生成a標(biāo)簽下載文件并攜帶請求頭的兩種方法, 這種下載文件方式在前端項(xiàng)目中非常常見,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個(gè)代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序2007-04-04
JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義
本文主要介紹了JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
詳解javascript 正則表達(dá)式之分組與前瞻匹配
本文主要講解javascript 的正則表達(dá)式中的分組匹配與前瞻匹配的，需要對正則的有基本認(rèn)識，本人一直對兩種匹配模棱不清，還有不清楚的朋友跟隨腳本之家小編一起看看吧2018-05-05
一文帶你徹底搞懂JS大文件分片上傳的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了前端JavaScript是如何實(shí)現(xiàn)大文件分片上傳的，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以參考一下2023-05-05
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對其進(jìn)行系統(tǒng)分析，需要的朋友可以看下2016-12-12