摘要:的指向一直都是理解中比較困難的部分,這次把遇見的情況都展示出來另外新增的箭頭函數(shù)不屬于這個規(guī)律,特殊看待。
this的指向一直都是js理解中比較困難的部分,這次把遇見的情況都展示出來;另外ES6新增的箭頭函數(shù)不屬于這個規(guī)律,特殊看待。
this的指向 大致分為以下幾種情況
1.普通函數(shù) --- this指向函數(shù)的調(diào)用對象function f() { var user = "XX"; console.log(this.user); //undefined console.log(this); //window } f();
這里f 的調(diào)用等同于window.f(); 所以f函數(shù)內(nèi)部this指向的是window
2.對象方法中調(diào)用 ---- this 指向上級對象var obj = { user:"xxx", fn:function(){ console.log(this.user); //xxx } } obj.fn();
【注1】這里要注意一點,就是在對象中可能有多層嵌套的對象,但是this指向的都是他調(diào)用地方的上級對象
var obj = { user:"xxx", b: { user: "bbb", fn:function(){ console.log(this.user); // bbb } } } obj.b.fn();
如上,雖然是在obj里面this調(diào)用,但是因為是在obj.b這個對象中,所以this指向的是 obj.b
【注2】注意不能只看上級對象,更關(guān)鍵的是調(diào)用對象
var obj = { user:"xxx", b: { user: "bbb", fn:function(){ console.log(this.user); // undefined } } } var f = obj.b.fn; f()
如上,this其實是在f執(zhí)行的時候調(diào)用的,這時候,f的this的調(diào)用對象是window,那么就可以理解window.user為undefined
【小結(jié)】在對象方法中的this的指向主要是看他最終調(diào)用的位置,它是由誰調(diào)用的,如果調(diào)用對象有多層,this指向的是this的上級對象
3.構(gòu)造函數(shù) --- this指向new出來的對象function Fn(){ this.user = "xxx; } var a = new Fn(); console.log(a.user); //xxx
new 的過程其實也是初始化了一個新的對象,然后用新的對象調(diào)用原先的函數(shù) Fn.call(a) 這個情況跟下面這種情況類似了。
4.apply, call, bind 通過改變函數(shù)的調(diào)用對象而改變this的指向function foo() { console.log("id:", this.id); //42 } var id = 21; foo.call({ id: 42 }); //foo函數(shù)的調(diào)用對象變成了 {id: 42},所以this指向發(fā)生了變化5.箭頭函數(shù)this的指向 ---- this指向其定義時候的對象
??
圖1: 箭頭函數(shù),this指向定義時候的對象,foo在window作用域下,所以this指向window; ===> 箭頭函數(shù)的外層,foo函數(shù)的this就是window對象
?
圖2:箭頭函數(shù),this指向定義時對象,那么由于foo.call 此時定義時候this指向了{ id: 42}對象,所以這里id輸出的是42;====> 箭頭函數(shù)的外層,foo函數(shù)的this就是{ id: 42} 對象
【小結(jié)】箭頭函數(shù)的this在定義時所在的對象,其實質(zhì)是因為箭頭函數(shù)沒有自己的this,用的是外層的this
【結(jié)尾】普通函數(shù)的this是看的是它執(zhí)行時候的調(diào)用對象; 箭頭函數(shù)的this與它的執(zhí)行沒有關(guān)系,在定義的時候就決定了;
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108797.html
摘要:來看看箭頭函數(shù)的情況可以發(fā)現(xiàn)在定時器這個匿名函數(shù)作用域里,所指向的對象,就是定義時所指的對象。對于構(gòu)造函數(shù)來說,它就是的實例。如下?lián)?,總結(jié)箭頭函數(shù)的三個優(yōu)點語法簡潔,能夠?qū)懗銎恋膯涡泻瘮?shù)。 ES6新引入了箭頭函數(shù),它是一種表達簡潔的函數(shù),下面我們來看看它有哪三個顯著優(yōu)勢。假設(shè)定義了一個名為names的數(shù)組,如下: showImg(https://segmentfault.com/i...
摘要:指定為原始值數(shù)字,字符串,布爾值會指向該原始值的自動包裝對象這一點感謝評論區(qū)的讀者補充。 前言 (幾天之前寫了源碼分析之后,感覺太疲憊了,寫一些相對輕巧的內(nèi)容調(diào)劑一下,希望喜歡的同學(xué)可以點個贊和收藏~)進入正題,this對象在js中是很常見,但是在這里也經(jīng)常會出錯,本文將對常見的this對象的情況做一些總結(jié) 正文 this對象是在函數(shù)運行時,基于函數(shù)的執(zhí)行環(huán)境綁定的。 其實這句話的本...
摘要:當(dāng)碰到時呵呵再看一個呵呵再來呵呵呵呵呵呵呵呵什么意思呢如果返回值是一個對象,那么指向的是構(gòu)造函數(shù)的實例但是并沒有被返回,如果返回值不是一個對象那么還是指向構(gòu)造函數(shù)創(chuàng)建的實例。 為什么要學(xué)習(xí)this?如果你學(xué)過面向?qū)ο缶幊?,那你肯定知道干什么用的,如果你沒有學(xué)過,那么暫時可以不用看這篇文章,當(dāng)然如果你有興趣也可以看看,畢竟這是js中必須要掌握的東西。 1. this指向調(diào)用他的對象 首先...
摘要:在用創(chuàng)建對象時,指向發(fā)生改變是在第二步創(chuàng)建一個對象實例將構(gòu)造函數(shù)中的指向這個對象執(zhí)行構(gòu)造函數(shù)中的代碼返回這個新創(chuàng)建的對象箭頭函數(shù)中的箭頭函數(shù)內(nèi)部是不會綁定的,它會捕獲外層作用域中的,作為自己的值。參考你不知道的上卷 前言 this 是 JavaScript 中不可不談的一個知識點,它非常重要但又不容易理解。因為 JavaScript 中的 this 不同于其他語言。不同場景下的 thi...
閱讀 3757·2021-11-24 09:39
閱讀 2953·2021-11-16 11:49
閱讀 2076·2019-08-30 13:54
閱讀 1105·2019-08-30 13:03
閱讀 1091·2019-08-30 11:10
閱讀 718·2019-08-29 17:10
閱讀 1248·2019-08-29 15:04
閱讀 1212·2019-08-29 13:02