<progress id="3f9vx"></progress>
    <noframes id="3f9vx"><track id="3f9vx"><b id="3f9vx"><menuitem id="3f9vx"></menuitem></b></track>

    <span id="3f9vx"><mark id="3f9vx"><mark id="3f9vx"></mark></mark></span>

    <track id="3f9vx"></track>
      <font id="3f9vx"><dfn id="3f9vx"></dfn></font>

        <noframes id="3f9vx"><ins id="3f9vx"><cite id="3f9vx"></cite></ins>
        <form id="3f9vx"><font id="3f9vx"></font></form>

          千鋒教育-做有情懷、有良心、有品質的職業教育機構

          手機站
          千鋒教育

          千鋒學習站 | 隨時隨地免費學

          千鋒教育

          掃一掃進入千鋒手機站

          領取全套視頻
          千鋒教育

          關注千鋒學習站小程序
          隨時隨地免費學習課程

          【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業 Java培訓機構哪些好
          當前位置:首頁  >  關于學院  >  技術干貨  > 你真的知道JavaScript中的“this”嗎?

          你真的知道JavaScript中的“this”嗎?

          來源:千鋒教育
          發布人:wjy
          時間: 2022-11-16 14:28:00 1668580080

            介紹

            在前端面試過程中,面試官經常會問一些關于this關鍵字的問題,即使是工作多年的人也可能知之甚少。因此,本文對this關鍵字進行了詳細分析,以便他人深入了解。

            什么是"this"?

            調用函數時,將創建一個執行環境,this 在運行時根據函數的執行環境綁定。它允許函數在內部引用上下文中的執行變量,使函數編程更加優雅和簡潔。

            看看下面的代碼,想想為什么不同的調用方法會打印出不同的結果。

          你真的知道JavaScript中的“this”嗎1

            其實很簡單,因為不同的調用方法的this指向不同的點。為什么這指向不同的函數調用方法?是什么決定了這一點?現在讓我們開始帶著問題深入了解這個問題!

            “this”的約束規則

            默認綁定

            默認綁定規則下,函數的運行環境為全局環境,this默認指向Window。

            默認綁定規則如下:

            1、this指向Window的全局函數

            在全局函數中直接打印 this 時,可以看到 this 指向 Window。

          你真的知道JavaScript中的“this”嗎2

            2、獨立函數調用this指向Window

            獨立的函數調用,即直接調用函數,如 foo()。

          你真的知道JavaScript中的“this”嗎3

            這里的foo默認鏈接到Window,相當于window.foo()。根據函數的隱式綁定規則,誰調用誰就指向誰。這里的 this 指向 Window。結果如下:

          你真的知道JavaScript中的“this”嗎4

            同樣,如果嵌套函數中直接調用的函數也是獨立的函數調用,那么this也指向Window:

          你真的知道JavaScript中的“this”嗎5

            在上面的代碼中,子函數son也嵌套在對象obj的方法foo中。當直接調用子方法時,子里面的this指向Window,所以子函數里面的this.a結果是全局變量a,也就是10。

            如果要在子函數中使用 obj 中的變量 a 怎么辦?只需將 this 對象分配給另一個變量,并在子方法中引用此變量:

          你真的知道JavaScript中的“this”嗎6

            3、對于自執行函數調用,this指向window

            自執行函數,顧名思義,就是定義函數后自動調用的函數,自執行函數的this指向如下代碼:

          你真的知道JavaScript中的“this”嗎7

            上面代碼中的foo函數內部嵌套了一個自執行函數son,而son內部的this指向Window。這里this指向的原理類似于獨立函數調用,即先聲明一個son方法,然后通過son()執行該函數。如果要獲取son中上層對象obj的變量,可以在調用時將this點作為參數傳遞給自執行函數son。

            4、閉包里面的this指向Window

            閉包可以理解為一個函數內部定義的函數,可以訪問其他函數的內部變量。當我們查看閉包中的 this 點時,我們可以看到 this 指向 Window。

          你真的知道JavaScript中的“this”嗎8

            上面代碼中,foo函數的第一個this.a的this指向obj對象,所以結果是20。return函數調用的this指向Window,結果是10。obj.foo ()() 可以理解為:

          你真的知道JavaScript中的“this”嗎9

            fn 是 obj.foo() 返回的函數。fn 函數是獨立調用的,this 指向 Window。

            隱式綁定

            當函數作為方法調用時,this指向函數的直接父對象,稱為隱式綁定。

            在隱式綁定規則中,認為 this 指向調用函數的人,并將指向函數的直接父對象。比如obj.foo()中foo函數里面的this指向obj,而obj1中的foo函數。obj2.foo() 指向 obj2。

          你真的知道JavaScript中的“this”嗎10

            上面的代碼也是對 foo 函數的調用。調用方法不同,結果不同。

            ‘exp1’中的foo直接被獨立函數調用,所以,this指向Window,結果為10;‘exp2’中的調用方法是obj。foo(),foo函數的this指向上級調用對象obj;結果是 20。'exp3' 中 foo 函數的直接上級對象是 obj2,所以結果是 30。

            隱式綁定丟失

            隱式綁定丟失意味著隱式綁定的函數丟失了它的綁定對象,所以默認綁定到Window。這種方法在我們的項目中很容易導致錯誤,但也很常見。

            1、隱式綁定的函數被分配為沒有 this 指向的變量。

            在下面的代碼中,obj下的foo值實際上是foo函數的地址信息,并不是真正的foo函數。當 obj.調用 foo() 時, this 的 this 隱式綁定到 obj。當 var fn=obj.foo 為 fn 分配一個函數時。相當于把foo函數的地址賦給fn。這時候fn沒有和obj關聯,所以這里fn()的運行環境就是全局環境,this指向Window,this的結果a 是 10。

          你真的知道JavaScript中的“this”嗎11

            2、隱式綁定的函數作為參數傳給函數,丟失了this點。

            當一個隱式綁定的函數直接作為參數傳遞給另一個函數時,這個綁定會丟失,從而指向全局Window。obj.foo作為參數傳給bar函數后,this.a的結果是10。這里bar(obj.foo)等價于var fn=obj.foo; bar(fn)。

          你真的知道JavaScript中的“this”嗎12

            3、內置對象setTimeout和setInterval函數的隱式綁定丟失

            內置函數 setTimeout 和 setInterval 的 this 默認指向 Window。

          你真的知道JavaScript中的“this”嗎13

            對了,當setTimeout或者setInterval的第一個參數是箭頭函數時,this會指向上層的函數執行環境。代碼如下:

          你真的知道JavaScript中的“this”嗎14

            顯式綁定

            當我們要將函數綁定到指定對象時,可以使用call、apply、bind等方法手動改變this的方向,即顯式綁定。

            在下面的代碼中,將 foo 顯式綁定到 p 對象的方法分別使用 call、apply 和 bind 來舉例說明。顯式綁定 call 和 apply 的方法會在顯式綁定后直接調用,而顯式綁定 this 到 bind 的方法需要手動調用。

          你真的知道JavaScript中的“this”嗎15

            關于硬裝訂

            顯式綁定可以幫我們把this改成指定對象,但是不能解決隱式綁定缺失的問題,比如:

          你真的知道JavaScript中的“this”嗎16

            在上面的代碼中,調用是綁定 this 指向 p 對象,但最終 this 指向的是 Window。此時,我們可以通過硬綁定來解決這個問題。

          你真的知道JavaScript中的“this”嗎17

            “new”綁定

            new綁定是我們常用的方法。事實上,我們可以創建一個構造,然后新建一個實例對象。這時候this指向了new出來的實例對象。

            當我們彼此認識時,我們主要做以下事情:

            a、創建一個新對象

            b、讓這一點指向新對象并執行構造體

            c、將新對象的 proto 屬性設置為指向構造的原型對象

            d、判斷構造的返回類型。如果是,則返回新對象。如果它是引用類型,它將返回此類型的對象。首先,創建了“Person”的構造,然后,通過“new”創建了一個“zhangsan”的實例對象。在“zhangsan”的“foo”函數中,“this”指向“zhangsan”的實例。

          你真的知道JavaScript中的“this”嗎18

            在嚴格模式下,“this”指向一個問題。

            1.獨立調用函數的內部“this”是“undefined”

          你真的知道JavaScript中的“this”嗎19

            2.“call()”和“apply()”中的this總是他們的第一個參數

          你真的知道JavaScript中的“this”嗎20

            總結

            這是一個比較復雜的知識點。當然,如果我們真的理解了this的原理,那么遇到this所指出的問題就很簡單了。如果我們明白了這一點,不僅可以為前端面試加分,也有利于我們的發展和學習。

            讓我們總結一下,其約束原則如下:

            默認綁定,this指向全局Window。

            不要忘記隱藏綁定的丟失。

            它顯示了綁定。他通過使用 call、apply 和 bind 改變了這個方向。

            new綁定,構造new的一個實例,this指向new的實例對象。

          聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

          10年以上業內強師集結,手把手帶你蛻變精英

          請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通

          免費領取

          今日已有369人領取成功

          劉同學 138****2860 剛剛成功領取
          王同學 131****2015 剛剛成功領取
          張同學 133****4652 剛剛成功領取
          李同學 135****8607 剛剛成功領取
          楊同學 132****5667 剛剛成功領取
          岳同學 134****6652 剛剛成功領取
          梁同學 157****2950 剛剛成功領取
          劉同學 189****1015 剛剛成功領取
          張同學 155****4678 剛剛成功領取
          鄒同學 139****2907 剛剛成功領取
          董同學 138****2867 剛剛成功領取
          周同學 136****3602 剛剛成功領取

          猜你喜歡LIKE

          最新文章NEW

          相關推薦HOT

          更多>>

          快速通道 更多>>

          開班信息
          北京校區
          • 北京校區
          • 大連校區
          • 廣州校區
          • 成都校區
          • 杭州校區
          • 長沙校區
          • 合肥校區
          • 南京校區
          • 上海校區
          • 深圳校區
          • 武漢校區
          • 鄭州校區
          • 西安校區
          • 青島校區
          • 重慶校區
          • 太原校區
          • 沈陽校區

          乱子伦XXXX欧美

          <progress id="3f9vx"></progress>
            <noframes id="3f9vx"><track id="3f9vx"><b id="3f9vx"><menuitem id="3f9vx"></menuitem></b></track>

            <span id="3f9vx"><mark id="3f9vx"><mark id="3f9vx"></mark></mark></span>

            <track id="3f9vx"></track>
              <font id="3f9vx"><dfn id="3f9vx"></dfn></font>

                <noframes id="3f9vx"><ins id="3f9vx"><cite id="3f9vx"></cite></ins>
                <form id="3f9vx"><font id="3f9vx"></font></form>