理解js中this指向

先“死記硬背”以下幾條規(guī)律:
1擎场、在函數(shù)體中,非顯式或隱式的簡單調(diào)用函數(shù)時泥耀,在嚴格模式下,函數(shù)內(nèi)的this會被綁定到undefined上蛔添,非嚴格模式下痰催,綁定到全局對象 window上
2、一般使用new 調(diào)用構(gòu)造函數(shù)時迎瞧,構(gòu)造函數(shù)內(nèi)的this會指向新創(chuàng)建的對象上(返回的那個對象)
3夸溶、一般通過上下文對象調(diào)用函數(shù)時,函數(shù)體內(nèi)的this會綁定到該對象上(調(diào)用函數(shù)的那個對象)
4凶硅、在箭頭函數(shù)中缝裁,this的指向是由外層作用域來決定的

一、全局環(huán)境中的this

const foo = {
    name: 'shaoyou',
    say: function () {
        console.log(this.name) //undefined
    } 
}
const f1 = foo.say
f1()

say方法借助f1隱式調(diào)用足绅,函數(shù)體內(nèi)的this指向全局

二捷绑、上線文對象調(diào)用中的this

const personal = {
    name: 'a',
    bro: {
        name: 'b',
        do: function () {
            console.log(this.name)  //b
        }
    }
}
personal.bro.do()

當代碼中有嵌套關(guān)系時,this會指向最后調(diào)用它的對象

三氢妈、通過bind粹污、apply、call改變this指向

三個函數(shù)都可以改變this指向允懂,不同的是:apply(第二個參數(shù)是數(shù)組)厕怜、call會運行函數(shù),bind返回一個新函數(shù)蕾总,但是不會運行

四粥航、構(gòu)造函數(shù)和this

function Bar () {
    this.user = 'shaoyou'
    return {}
}
const bar = new Bar()
console.log(bar.user)  //undefined
function Foo () {
    this.user = 'shaoyou'
    return 1
}
const result = new Foo()
console.log(result.user)  //shaoyou

如果構(gòu)造函數(shù)中返回一個值,如果這個值是一個對象生百,那么this就指向返回的這個新對象递雀;如果返回的是一個基本類型,那么this仍指向?qū)嵗龑ο?/p>

五蚀浆、箭頭函數(shù)中的this
function foo () {
    return () => {
        console.log(this.a)
    }
}

const obj1 = {
    a: '1'
}
const obj2 = {
    a: '2'
}
const bar = foo.call(obj1)
console.log(bar.call(obj2)) //1

foo.call改變了foo內(nèi)部的this指向缀程,將foo中this綁定到了obj1上,所以箭頭函數(shù)中(bar)的this也綁定到了obj1上市俊;使用bar.call并不能改變this的指向

六杨凑、手動實現(xiàn)bind

Function.prototype.bind = Function.prototype.bind || function (context) {
    let me = this;  //此時me指向調(diào)用bind的那個函數(shù),即下面的foo
    let args = Array.prototype.slice.call(arguments, 1)
    return function bound () {
        var innerArgs = Array.prototype.slice.call(arguments)
        var finalArgs = args.concat(innerArgs)
        return me.apply(context, finalArgs)
    }
}
function foo (a) {
    this.a = a
}
let obj1 = {}
var bar = foo.bind(obj1)

摘自:《前端開發(fā)核心知識進階》一書

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摆昧,一起剝皮案震驚了整個濱河市撩满,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖伺帘,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件昭躺,死亡現(xiàn)場離奇詭異,居然都是意外死亡伪嫁,警方通過查閱死者的電腦和手機领炫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來张咳,“玉大人帝洪,你說我怎么就攤上這事【祝” “怎么了碟狞?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長婚陪。 經(jīng)常有香客問我族沃,道長,這世上最難降的妖魔是什么泌参? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任脆淹,我火速辦了婚禮,結(jié)果婚禮上沽一,老公的妹妹穿的比我還像新娘盖溺。我一直安慰自己,他們只是感情好铣缠,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布烘嘱。 她就那樣靜靜地躺著,像睡著了一般蝗蛙。 火紅的嫁衣襯著肌膚如雪蝇庭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天捡硅,我揣著相機與錄音哮内,去河邊找鬼。 笑死壮韭,一個胖子當著我的面吹牛北发,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播喷屋,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼琳拨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了屯曹?” 一聲冷哼從身側(cè)響起从绘,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤寄疏,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后僵井,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡驳棱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年批什,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片社搅。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡驻债,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出形葬,到底是詐尸還是另有隱情合呐,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布笙以,位于F島的核電站淌实,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏猖腕。R本人自食惡果不足惜拆祈,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望倘感。 院中可真熱鬧放坏,春花似錦、人聲如沸老玛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蜡豹。三九已至麸粮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間余素,已是汗流浹背豹休。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留桨吊,地道東北人威根。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像视乐,于是被迫代替她去往敵國和親洛搀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348