js bind apply call

轉(zhuǎn)載自?https://www.cnblogs.com/liu-di/p/10690335.html??

一 茄猫、bind

特點:

1.返回原函數(shù)的拷貝柠衍,我們稱這個拷貝的函數(shù)為綁定函數(shù)

2.將函數(shù)中的this固定為調(diào)用bind方法時的第一個參數(shù),所以稱之為綁定函數(shù)。注意是名詞而非動詞妻往。

3.以后無論由哪個對象調(diào)用綁定函數(shù),綁定函數(shù)中的this依然由當(dāng)時調(diào)用的bind方法的一個參數(shù)決定试和,不會改變讯泣。

4.如果綁定函數(shù)作為構(gòu)造函數(shù)來使用,那么已經(jīng)固定了的this將不會生效阅悍,此時構(gòu)造函數(shù)中的this依然為實例對象好渠。

5.調(diào)用bind方法時的第二個參數(shù)做為綁定函數(shù)的第一個參數(shù),稱之為預(yù)設(shè)參數(shù)节视,調(diào)用綁定函數(shù)時的第一個參數(shù)則排在預(yù)設(shè)參數(shù)后面

6.無論使用任何對象調(diào)用bind方法時如果不傳參數(shù)拳锚、第一個參數(shù)為undefined、第一個參數(shù)為null時寻行,綁定函數(shù)中的this指向window對象

作用:

1.拷貝一個目標函數(shù)

2.改變綁定函數(shù)運行時的this指針

1-1 證明是原函數(shù)的拷貝 (需要知道:函數(shù)也是對象霍掺,并且是引用類型,比較的是內(nèi)存地址)

```functionfn(){}varbindFn = fn.bind();//? fn(){ return this }? 供以后調(diào)用fn === bindFn//false

```

2-1 將函數(shù)中的this固定為調(diào)用bind方法時的第一個參數(shù)

```

functionfn(){returnthis}varbindFn = fn.bind({name:"綁定函數(shù)"})//? fn(){ return this }

```

3-1 以后無論由哪個對象調(diào)用綁定函數(shù)拌蜘,綁定函數(shù)中的this依然是{name:"綁定函數(shù)"}

```

functionfn(){console.log(this)? }varbindFn = fn.bind({name:"綁定函數(shù)"})bindFn()//等同于window對象調(diào)用 杆烁, this依然指向{name:"綁定函數(shù)"}varobj = {name:"obj"};obj.fn = bindFn;? ? obj.fn()//由普通對象調(diào)用 ,this依然指向{name:"綁定函數(shù)"}vararr = [bindFn];arr[0]()//由數(shù)組調(diào)用 拦坠, this依然指向{name:"綁定函數(shù)"}setTimeout(bindFn ,200);//作為回調(diào)函數(shù)? 连躏, this依然指向{name:"綁定函數(shù)"}clearTimeout(1);

```

4-1 如果綁定函數(shù)作為構(gòu)造函數(shù),已經(jīng)捆綁的this會被忽略掉贞滨,this依然指向?qū)嵗龑ο?/p>

```

functionPerson(name){this.name = name; }varbindPerson = Person.bind({name:"綁定函數(shù)"})newbindPerson("張三")// Person?{name: "張三"}

```

5-1 預(yù)設(shè)參數(shù)

```

functionfn(a,b,c,d){console.log(a,b,c,d)// 1 入热,2 ,3 晓铆,4}varbindFn = fn.bind({name:"綁定函數(shù)"} ,1,2);// 拷貝原函數(shù)時的第2個參數(shù)開始往后稱為預(yù)設(shè)參數(shù)bindFn(3,4);//調(diào)用綁定函數(shù)時的第一參數(shù)則排在預(yù)設(shè)參數(shù)的后面

```

6-1 當(dāng)沒有參數(shù)勺良、第一個參數(shù)為undefined、第一個參數(shù)為null時

```

varobj = {fnOne:function(){returnthis}.bind(),fnTwo:function(){returnthis}.bind(undefined),fnThree:function(){returnthis}.bind(null)}//注意:這三種情況是使this指向window對象骄噪,而不是不去改變this指向尚困,所以這里的this還是不會指向objobj.fnOne()// windowobj.fnTwo()//windowobj.fnThree()//window

```

二、call

特點:

1.返回值取決于目標函數(shù)的返回值

2.用call的第一個參數(shù)對象來代替調(diào)用目標函數(shù)的對象链蕊,以此來改變目標函數(shù)體內(nèi)的this指向

3.調(diào)用call方法時的第二個參數(shù)做為目標函數(shù)的第一個參數(shù)事甜,將第二個作為第三個以此類推

作用:

1.用于繼承谬泌,例如子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)

2.改變綁定函數(shù)運行時的this指針。

1-1 返回值取決于目標函數(shù)的返回值

```

functionfn(){return{name:"call"} }fn.call()// {name: "call"}

```

2-1 改變目標函數(shù)體內(nèi)的this指向 , 相當(dāng)于使用第一個參數(shù)對象調(diào)用

```

functionfn(){returnthis}fn.call( {name:"call"} )// {name: "call"}?

```

3-1 參數(shù)位置

```

functionfn(a, b, c){returnarguments}fn.call( {name:"call"} ,1,2,3)//Arguments?[1, 2, 3]

```

1-2 用于繼承

```

functionparent(name, age){this.name = name;this.age= age;}functionchild(name, age){? parent.call(this, name, age);this.class ='三年級二班';}varxiaoming =newchild("小明",18)

```

三逻谦、apply

特點:

1.與call方法一樣唯一不同的地方就是apply的第二個參數(shù)是一個數(shù)組掌实,數(shù)組的第一個元素對應(yīng)目標函數(shù)的第一個參數(shù),以此類推

作用:

1.與call方法一樣

1-1 參數(shù)

functionfn(a, b, c){returna+b+c }fn.apply({name:"apply"} ,[1,2,3])//6

總結(jié)

相同點

1. 3個方法都是改變綁定函數(shù)運行時的上下文

不同點

1.bind方法的返回值是原函數(shù)的拷貝邦马,供以后調(diào)用 贱鼻。參數(shù)既可以在拷貝時預(yù)設(shè)又可在調(diào)用時添加

2.call與apply一樣,返回值取決于目標函數(shù)的返回值 滋将, 則是立即調(diào)用

3.call與apply唯一的區(qū)別是call從第二個參數(shù)開始是若干個參數(shù)邻悬,而apply第二個參數(shù)是一個數(shù)組

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市随闽,隨后出現(xiàn)的幾起案子父丰,更是在濱河造成了極大的恐慌,老刑警劉巖橱脸,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件础米,死亡現(xiàn)場離奇詭異,居然都是意外死亡添诉,警方通過查閱死者的電腦和手機屁桑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來栏赴,“玉大人蘑斧,你說我怎么就攤上這事⌒刖欤” “怎么了竖瘾?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長花颗。 經(jīng)常有香客問我捕传,道長,這世上最難降的妖魔是什么扩劝? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任庸论,我火速辦了婚禮,結(jié)果婚禮上棒呛,老公的妹妹穿的比我還像新娘聂示。我一直安慰自己,他們只是感情好簇秒,可當(dāng)我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布鱼喉。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪扛禽。 梳的紋絲不亂的頭發(fā)上锋边,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天,我揣著相機與錄音编曼,去河邊找鬼宠默。 笑死,一個胖子當(dāng)著我的面吹牛灵巧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播抹沪,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼刻肄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了融欧?” 一聲冷哼從身側(cè)響起敏弃,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎噪馏,沒想到半個月后麦到,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡欠肾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年瓶颠,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刺桃。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡粹淋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瑟慈,到底是詐尸還是另有隱情桃移,我是刑警寧澤,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布葛碧,位于F島的核電站借杰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏进泼。R本人自食惡果不足惜蔗衡,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缘琅。 院中可真熱鬧粘都,春花似錦、人聲如沸刷袍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至堆生,卻和暖如春专缠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淑仆。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工涝婉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蔗怠。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓墩弯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親寞射。 傳聞我的和親對象是個殘疾皇子渔工,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,554評論 2 349

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