JavaScript 中 apply 达皿、call 的詳解

摘自 https://github.com/lin-xin/blog/issues/7

apply 和 call 的區(qū)別

ECMAScript 規(guī)范給所有函數(shù)都定義了 call 與 apply 兩個方法蝇更,它們的應(yīng)用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區(qū)別而已扒腕。

apply( )

apply 方法傳入兩個參數(shù):一個是作為函數(shù)上下文的對象,另外一個是作為函數(shù)參數(shù)所組成的數(shù)組萤悴。

var obj = {
    name : 'linxin'
}

function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.apply(obj, ['A', 'B']);    // A linxin B

可以看到瘾腰,obj 是作為函數(shù)上下文的對象,函數(shù) func 中 this 指向了 obj 這個對象覆履。參數(shù) A 和 B 是放在數(shù)組中傳入 func 函數(shù)蹋盆,分別對應(yīng) func 參數(shù)的列表元素。

call( )

call 方法第一個參數(shù)也是作為函數(shù)上下文的對象硝全,但是后面?zhèn)魅氲氖且粋€參數(shù)列表栖雾,而不是單個數(shù)組。

var obj = {
    name: 'linxin'
}

function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.call(obj, 'C', 'D');       // C linxin D

對比 apply 我們可以看到區(qū)別伟众,C 和 D 是作為單獨(dú)的參數(shù)傳給 func 函數(shù)析藕,而不是放到數(shù)組中。

對于什么時候該用什么方法凳厢,其實(shí)不用糾結(jié)账胧。如果你的參數(shù)本來就存在一個數(shù)組中,那自然就用 apply先紫,如果參數(shù)比較散亂相互之間沒什么關(guān)聯(lián)找爱,就用 call。

apply 和 call 的用法

1.改變 this 指向

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

func.call(obj);       // linxin

我們知道泡孩,call 方法的第一個參數(shù)是作為函數(shù)上下文的對象车摄,這里把 obj 作為參數(shù)傳給了 func,此時函數(shù)里的 this 便指向了 obj 對象。此處 func 函數(shù)里其實(shí)相當(dāng)于

function func() {
    console.log(obj.name);
}

2.借用別的對象的方法

先看例子

var Person1  = function () {
    this.name = 'linxin';
}
var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);
}
var person = new Person2();
person.getname();       // linxin

從上面我們看到吮播,Person2 實(shí)例化出來的對象 person 通過 getname 方法拿到了 Person1 中的 name变屁。因?yàn)樵?Person2 中,Person1.call(this) 的作用就是使用 Person1 對象代替 this 對象意狠,那么 Person2 就有了 Person1 中的所有屬性和方法了粟关,相當(dāng)于 Person2 繼承了 Person1 的屬性和方法。

3.調(diào)用函數(shù)

apply环戈、call 方法都會使函數(shù)立即執(zhí)行闷板,因此它們也可以用來調(diào)用函數(shù)。

function func() {
    console.log('linxin');
}
func.call();            // linxin

call 和 bind 的區(qū)別

在 EcmaScript5 中擴(kuò)展了叫 bind 的方法院塞,在低版本的 IE 中不兼容遮晚。它和 call 很相似,接受的參數(shù)有兩部分拦止,第一個參數(shù)是是作為函數(shù)上下文的對象县遣,第二部分參數(shù)是個列表,可以接受多個參數(shù)汹族。
它們之間的區(qū)別有以下兩點(diǎn)萧求。

1.bind 發(fā)返回值是函數(shù)

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

var func1 = func.bind(obj);
func1();                        // linxin

bind 方法不會立即執(zhí)行,而是返回一個改變了上下文 this 后的函數(shù)顶瞒。而原函數(shù) func 中的 this 并沒有被改變夸政,依舊指向全局對象 window。

2.參數(shù)的使用

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');

func('A', 'B', 'C');            // A B C
func1('A', 'B', 'C');           // linxin A B
func1('B', 'C');                // linxin B C
func.call(null, 'linxin');      // linxin undefined undefined

call 是把第二個及以后的參數(shù)作為 func 方法的實(shí)參傳進(jìn)去榴徐,而 func1 方法的實(shí)參實(shí)則是在 bind 中參數(shù)的基礎(chǔ)上再往后排秒梳。

在低版本瀏覽器沒有 bind 方法,我們也可以自己實(shí)現(xiàn)一個箕速。

if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            var self = this,                        // 保存原函數(shù)
                context = [].shift.call(arguments), // 保存需要綁定的this上下文
                args = [].slice.call(arguments);    // 剩余的參數(shù)轉(zhuǎn)為數(shù)組
            return function () {                    // 返回一個新函數(shù)
                self.apply(context,[].concat.call(args, [].slice.call(arguments)));
            }
        }
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市朋譬,隨后出現(xiàn)的幾起案子盐茎,更是在濱河造成了極大的恐慌,老刑警劉巖徙赢,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件字柠,死亡現(xiàn)場離奇詭異,居然都是意外死亡狡赐,警方通過查閱死者的電腦和手機(jī)窑业,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來枕屉,“玉大人常柄,你說我怎么就攤上這事。” “怎么了西潘?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵卷玉,是天一觀的道長。 經(jīng)常有香客問我喷市,道長相种,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任品姓,我火速辦了婚禮寝并,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腹备。我一直安慰自己衬潦,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布馏谨。 她就那樣靜靜地躺著别渔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪惧互。 梳的紋絲不亂的頭發(fā)上哎媚,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音喊儡,去河邊找鬼拨与。 笑死,一個胖子當(dāng)著我的面吹牛艾猜,可吹牛的內(nèi)容都是我干的买喧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼匆赃,長吁一口氣:“原來是場噩夢啊……” “哼淤毛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起算柳,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤低淡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瞬项,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔗蹋,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年囱淋,在試婚紗的時候發(fā)現(xiàn)自己被綠了猪杭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡妥衣,死狀恐怖皂吮,靈堂內(nèi)的尸體忽然破棺而出戒傻,到底是詐尸還是另有隱情,我是刑警寧澤涮较,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布稠鼻,位于F島的核電站,受9級特大地震影響狂票,放射性物質(zhì)發(fā)生泄漏候齿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一闺属、第九天 我趴在偏房一處隱蔽的房頂上張望慌盯。 院中可真熱鬧,春花似錦掂器、人聲如沸亚皂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灭必。三九已至,卻和暖如春乃摹,著一層夾襖步出監(jiān)牢的瞬間禁漓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工孵睬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留播歼,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓掰读,卻偏偏與公主長得像秘狞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蹈集,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容