this屹徘,如何改變this的指向(bind走趋,call,apply)

函數(shù)的調(diào)用方式?jīng)Q定了 this的指向不同:

1. 普通函數(shù)調(diào)用噪伊,此時this?指向window

function fn(){

console.log(this);// window

? ? }

fn();//? window.fn(),此處默認(rèn)省略window

2. 構(gòu)造函數(shù)調(diào)用簿煌, 此時this 指向實例對象

function Person(age, name){

this.age = age;

this.name = name

console.log(this)// 此處 this 分別指向 Person 的實例對象 p1 p2

? ? }

varp1 =newPerson(18,'zs')

varp2 =newPerson(18,'ww')

3. 對象方法調(diào)用, 此時this指向該方法所屬的對象

var obj = {

fn:function(){

console.log(this);// obj

? ? ? }

? ? }

? ? obj.fn();

4.通過事件綁定的方法鉴吹, 此時 this指向綁定事件的對象

btn.onclick =function(){

console.log(this);// btn

? ? }

5. 定時器函數(shù)姨伟, 此時this指向window

setInterval(function(){

console.log(this);// window

},1000);

以上五個方面 就是對函數(shù)內(nèi)部 this指向的基本整理

關(guān)于this 的終極總結(jié) :函數(shù)內(nèi)部的 this 是由調(diào)用時確定其指向,匿名函數(shù)的this指向window豆励。

二.?接下來一起來看一下如何使用bind,call,apply改變this的指向夺荒,以及他們各自一些小的應(yīng)用

1.bind()會創(chuàng)建一個新的函數(shù)(稱為綁定函數(shù)),與被調(diào)用函數(shù)有相同的函數(shù)體良蒸,當(dāng)目標(biāo)函數(shù)被調(diào)用時this的值綁定到bind()的第一個參數(shù)上技扼,如下面demo 此時this指向對象o

?語法: fn.bind(thisArg[, arg1[, arg2[, ...]]])? ?

?參數(shù):thisArg?當(dāng)綁定函數(shù)被調(diào)用時,該參數(shù)會作為原函數(shù)運行時的 this 指向诚啃。當(dāng)使用new 操作符調(diào)用綁定函數(shù)時淮摔,該參數(shù)無效。?

? ? arg1,arg2..? 當(dāng)綁定函數(shù)被調(diào)用時始赎,這些參數(shù)將置于實參之前傳遞給被綁定的方法

返回值:返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝和橙。

var obj = {name:'obj'};

obj.fn =function(){

console.log(this)

? ? };

var o = {name:'o'};

var rel = obj.fn.bind(o);

rel();// 等價 obj.fn.bind(o)()

2.call()??方法調(diào)用一個函數(shù), 其具有一個指定的this 值和分別地提供的參數(shù)(參數(shù)的列表)。

?語法: fn.call(thisArg[, arg1[, arg2[, ...]]])? ?

?參數(shù):thisArg?該參數(shù)會作為函數(shù)運行時的this指向造垛。(如果指定了 null 或者 undefined 則內(nèi)部 this 指向 window)

arg1,arg2..? 指定的參數(shù)列表

var obj = {name:'obj'};

obj.fn =function(){

console.log(this)

? ? };

var o = {name:'o'};

obj.fn.call(o)//? 與bind的區(qū)別是魔招,call直接調(diào)用函數(shù)

3.apply()?方法調(diào)用一個函數(shù), 其具有一個指定的 this 值,以及作為一個數(shù)組(或類似數(shù)組的對象)提供的參數(shù)五辽。

?語法: fn.apply(thisArg[argArray])? ?

?參數(shù):thisArg argArray

apply() 與call()非常相似办斑,不同之處在于提供參數(shù)的方式,apply()使用參數(shù)數(shù)組,而不是參數(shù)列表

var obj = {name:'obj'};

obj.fn =function(a, b){

? ? ? ? a = b;

console.log(this)

? ? };

var o = {name:'o'};

obj.fn.apply(o, [1,3])

相信已經(jīng)對 bind乡翅,call鳞疲,apply 有一定的認(rèn)識了,接下來看幾個案例

案例一 :

?需求: 調(diào)用該對象 fun 方法時 改變其 this指向? 打印出 obj 的 name

var obj =? {

name:'zs',

fun:function(){

setInterval(function(){

console.log(this.name);

}.bind(this),1000);// 利用 bind 不調(diào)用函數(shù)特性此處this指向 obj

? ? ? ? ? ? }

? ? ? ? };

? ? ? ? obj.fun();

案例二:

var obj = {

0:10,

1:20,

2:30,

length:3

? ? ? ? };

Array.prototype.push.call(obj,40);

console.dir(obj);//0:10,1:20,2:30,3:40,length:4

案例三:

var arr = [4,5,6,8,11,44];

Math.max.apply(Math, arr);// 可以利用apply 第二個參數(shù)是數(shù)組蠕蚜。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尚洽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子靶累,更是在濱河造成了極大的恐慌腺毫,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挣柬,死亡現(xiàn)場離奇詭異潮酒,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)邪蛔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門急黎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人侧到,你說我怎么就攤上這事叁熔。” “怎么了床牧?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長遭贸。 經(jīng)常有香客問我戈咳,道長,這世上最難降的妖魔是什么壕吹? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任著蛙,我火速辦了婚禮,結(jié)果婚禮上耳贬,老公的妹妹穿的比我還像新娘踏堡。我一直安慰自己,他們只是感情好咒劲,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布顷蟆。 她就那樣靜靜地躺著,像睡著了一般腐魂。 火紅的嫁衣襯著肌膚如雪帐偎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天蛔屹,我揣著相機(jī)與錄音削樊,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛漫贞,可吹牛的內(nèi)容都是我干的甸箱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼迅脐,長吁一口氣:“原來是場噩夢啊……” “哼芍殖!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起仪际,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤围小,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后树碱,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肯适,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年成榜,在試婚紗的時候發(fā)現(xiàn)自己被綠了框舔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡赎婚,死狀恐怖刘绣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情挣输,我是刑警寧澤纬凤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站撩嚼,受9級特大地震影響停士,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜完丽,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一恋技、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逻族,春花似錦蜻底、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至抠璃,卻和暖如春长搀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鸡典。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工源请, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓谁尸,卻偏偏與公主長得像舅踪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子良蛮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

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