• <big id="asigw"></big><big id="asigw"></big><tt id="asigw"></tt>
  • <tt id="asigw"><ruby id="asigw"></ruby></tt>
  • <tt id="asigw"></tt>
  • <li id="asigw"><big id="asigw"><li id="asigw"></li></big></li><big id="asigw"><big id="asigw"></big></big><tt id="asigw"></tt>
  • <tt id="asigw"></tt>
  • <ruby id="asigw"></ruby>
  • <big id="asigw"></big>
  • <xmp id="asigw">
  • <ruby id="asigw"></ruby>
  • <li id="asigw"><big id="asigw"><tt id="asigw"></tt></big></li>
  • <big id="asigw"></big><tt id="asigw"><ruby id="asigw"></ruby></tt><big id="asigw"><li id="asigw"></li></big>
  • <tt id="asigw"><big id="asigw"></big></tt>
  • <tt id="asigw"><tt id="asigw"><xmp id="asigw">
  • <tt id="asigw"></tt>
  • <ruby id="asigw"><big id="asigw"></big></ruby>
  • <xmp id="asigw"><big id="asigw"><xmp id="asigw">
  • 千鋒教育-做有情懷、有良心、有品質的職業教育機構

    手機站
    千鋒教育

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

    千鋒教育

    掃一掃進入千鋒手機站

    領取全套視頻
    千鋒教育

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

    當前位置:首頁  >  技術干貨  > JavaScript內的this指向

    JavaScript內的this指向

    來源:千鋒教育
    發布人:qyf
    時間: 2023-02-23 17:16:00 1677143760

    JavaScript內的this指向

      ● 在 javascript 語言中, 有一個奇奇怪怪的 "關鍵字" 叫做 this

      ● 為什么說它是 奇奇怪怪 呢, 是因為你寫出 100 個 this, 可能有 100 個解釋, 完全不挨邊

      ● 但是, 在你的學習過程中, 搞清楚了 this 這個玩意, 那么會對你的開發生涯有很大幫助的

      ● 接下來咱們就開始一點一點的認識一下 this

      this 初認識

      ● 看到 this, 先給他翻譯過來 "這個"

      ● 到底啥意思呢 ?

      ○ 飯桌上, 你媽和你說, 你多吃點的這個

      ○ 商店里, 你媳婦和你說, 這個包 這個包 這個包 我都要

      ○ 宴會上, 你爸和人介紹說, 這個傻小子是我兒子

      ● 你看, 每一句話上都有 "這個", 但是每個 "這個" 都是一個意思嗎 ? 并不

      ● 就像我們 js 內的 this 一樣, 每一個 this 的意思都不一樣

      ● 但是我們會發現

      ○ 在說話的過程中, "這個" 是和我們說話的手勢有關系

      ● 在 js 內一個道理

      ○ this 的意思是和代碼的 "手勢" 有關系

      ● 例子 :

      ○ 當你媳婦手指著一個 LV 包的時候, 說的 "這個" 指代的就是 LV包`

      ○ 當你媽指著魚香肉絲的時候說 "這個" 指代的就是 魚香肉絲

      ○ 所以在 javascript 內的 this 是要看 "說這句話的代碼手指向哪里了"

      ● 看看下面一段代碼

      var box = document.querySelector('#box')

      box.onclick = function () {

      console.log(this)

      }

      ○ 當你點擊 box 這個元素的時候, 會觸發后面的函數

      ○ 然后函數一執行, 就會在控制臺打印一下 this

      ○ 這里的 this 就是 box 這個元素

      ● 這就是一個非常簡單的 this 指向的例子了

      ● 接下來我們就開始詳細學習一下 this

      給你個概念

      ● this , 是一個指針形變量, 它動態的指向當前函數的運行環境

      ● "什么鬼東西, 我聽不懂啊"

      ● 給一個私人的解釋 : "根據 this 所在的函數是如何被調用的來決定 this 是什么"

      ● 舉個栗子來看一下

      function fn() {

      console.log(this)

      }

      fn()

      // this 就是 window

      ● 因為 this 是在 fn 函數內, 所以 fn 函數的調用方式就決定了這個 this 是什么

      function a() {

      function b() {

      console.log(this)

      }

      b()

      }

      a()

      // this 就是 window

      ○ 因為 this 是在 b 函數內, 所以 b 函數的調用方式決定了 this 是什么, 和 a 函數沒關系

      ● 就是這個意思

      ● 最后, 根據這些年的經驗總結給出一個私人的概念, 要牢記

      ○ 函數的 this

      ○ 和函數定義在哪沒關系

      ○ 和函數怎么定義沒關系

      ○ 只看這個函數的調用方式

      ○ 箭頭函數除外

      對象調用

      ● 對象調用, 就是利用一個對象作為宿主來調用函數

      ● 最簡單的方式就是把函數寫在一個對象內, 利用對象來調用

      // 對象內寫一個函數

      const obj = {

      fn: function () { console.log(this) }

      }

      // 調用這個函數

      obj.fn()

      ○ 這時候, 我們調用了和這個對象內的 fn 函數

      ○ 調用方式就是利用對象調用的函數, 所以在這個函數內的 this 就是 obj 這個對象

      ○ 換句話說, 只要在這個函數內, 只要出現 this 就是這個對象

      全局調用

      ● 顧名思義, 全局調用就是直接調用一個全局函數

      function fn() {

      console.log(this)

      }

      fn()

      ○ 此時這個函數內的 this 就是 window

      ○ 可能有的小伙伴覺得瘋了

      ○ 但是我們仔細思考一下, 你會發現

      ○ 其實 fn 因為是在全局上的, 那么其實調用的完整寫法可以寫成 window.fn()

      ○ 此時就回到了之前對象調用那條路上, 這樣就通順了

      奇怪的調用

      ● 這個時候, 有的小伙伴可能會想到一個問題, 如果這個函數不放在全局呢 ?

      const obj = {

      fn: function () {

      function fun() {

      console.log(this)

      }

      fun()

      }

      }

      obj.fn()

      ● 此時的 this 應該是什么呢 ?

      ● 按照之前的思路思考

      ○ obj.fn() 確實調用了函數, 但是 this 不是在 obj.fn 函數內, 是在 fun 函數內

      ○ fun() 確實也調用了函數, 但是我沒有辦法寫成 window.fun()

      ○ 那么 this 到底是不是 window 呢, 還是應該是 obj 內

      ● 答案確實是 window, 這又是為什么呢 ?

      捋一下思路

      ● 說道這里, 我們會發現

      ● this 真的是好奇怪哦 o(* ̄︶ ̄*)o 搞不定了

      ● 要是按照這個方式, 我來回來去的得記多少種, 誰會記得下來呢

      ● 接下來(劃重點)

      我用我代碼三十年的經驗給你總結出來了一些內容, 希望你能牢記

      this 的個人經驗

      ● 首先, this 在各種不同的情況下會不一樣

      ● 那么從現在開始我把我總結的內容毫無保留的傳授給你

      經驗一 :

      ● 在 js 的非嚴格模式下適用

      ● 在非箭頭函數中適用

      ● 不管函數定義在哪, 不管函數怎么定義, 只看函數的調用方式

      ○ 只要我想知道 this 是誰

      ○ 就看這個 this 是寫在哪個函數里面

      ○ 這個函數是怎么被調用的

      觀察 this 在哪個函數內

      function fn() {

      console.log(this)

      }

      // this 在函數 fn 內, 就看 fn 函數是怎么被調用的就能知道 this 是誰

      const obj = {

      fn: function () {

      console.log(this)

      }

      }

      // this 在 obj.fn 函數內, 就看這個函數怎么被調用的就能知道 this 是誰

      const obj = {

      fn: function () {

      function fun() {

      console.log(this)

      }

      }

      }

      // 這個 this 是在 fun 函數內

      // 如果你想知道這個 this 是誰

      // 和 obj.fn 函數沒有關系, 只要知道 fun 函數是怎么被調用的就可以了

      ● 一定要注意 : 你想知道的 this 在哪個函數內, 就去觀察哪個函數的調用方式就好了

      一些常見的函數調用方式

      1. 普通調用

      ● 調用方式 : 函數名()

      ● this 是 window

      ● 只要你書寫 "函數名()" 調用了一個函數, 那么這個函數內的 this 就是 window

      function fn() {

      console.log(this)

      }

      fn()

      // 這里就是 fn() 調用了一個函數, 那么 fn 內的 this 就是 window

      const obj = {

      fn: function () {

      function fun() {

      console.log(this)

      }

      fun()

      }

      }

      obj.fn()

      // 這里的 this 因為是在 fun 函數內

      // fun() 就調用了這個 fun 函數

      // 所以不用管 fun 函數寫在了哪里

      // 這個 fun 函數內的 this 就是 window

      2. 對象調用

      ● 調用方式:

      ○ 對象.函數名()

      ○ 對象['函數名']()

      ● this 就是這個對象, 對象叫啥, 函數內的 this 就叫啥

      const obj = {

      fn: function () {

      console.log(this)

      }

      }

      obj.fn()

      // 因為 obj.fn() 調用了這個函數, 所以 obj.fn 函數內的 this 就是 obj

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      xhl.fn()

      // 因為 obj.fn() 調用了這個函數, 所以 xhl.fn 函數內的 this 就是 xhl

      function fn() {

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      xhl.fn()

      }

      fn()

      // 因為我們要觀察的 this 是在 xhl.fn 這個函數內

      // 所以只需要關注這個函數是如何被調用的即可

      // 因為是 xhl.fn 調用了和這個函數, 所以函數內的 this 就是 xhl

      3. 定時器調用

      ● 調用方式

      ○ setTimeout(function () {}, 1000)

      ○ setInterval(function () {}, 1000)

      ● this 就是 window

      ● 一個函數不管是怎么定義的, 只要被當做定時器處理函數使用, this 就是 widnow

      setTimeout(function () {

      console.log(this)

      }, 1000)

      // 這里的 this 就是 window

      setInterval(function () {

      console.log(this)

      }, 1000)

      // 這里的 this 就是 window

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      setTimeout(xhl.fn, 1000)

      // 這里的 xhl.fn 函數不是直接書寫 xhl.fn() 調用的

      // 而是給到了 setTimeout 定時器處理函數

      // 所以這里的 this 就是 window

      4. 事件處理函數

      ● 調用方式

      ○ 事件源.on事件類型 = 事件處理函數

      ○ 事件源.addEventListener(事件類型, 事件處理函數)

      ● this 就是 事件源

      ● 只要是作為事件處理函數使用, 那么該函數內的 this 就是 事件源

      奧,對了,事件就是:在事件中,當前操作的那個元素就是事件源

      box.onclick = function () {

      console.log(this)

      }

      // 這里的 this 就是 box

      box.addEventListener('click', function () {

      console.log(this)

      })

      // 這里的 this 就是 box

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      box.addEventListener('click', xhl.fn)

      // 這里的 xhl.fn 函數不是直接書寫 xhl.fn() 調用的

      // 而是給到了 事件, 被當做了事件處理函數使用

      // 所以這里的 this 就是 事件源box

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      box.onclick = xhl.fn

      // 這里的 xhl.fn 函數不是直接書寫 xhl.fn() 調用的

      // 而是給到了 事件, 被當做了事件處理函數使用

      // 所以這里的 this 就是 事件源box

      5. 構造函數調用

      ● 調用方式

      ○ new 函數名()

      ● this 就是該構造函數的當前實例

      ● 只要和 new 關鍵字調用了, this 就是實例對象

      function fn() {

      console.log(this)

      }

      const f = new fn()

      // 這里的因為 fn 函數和 new 關鍵字在一起了

      // 所以這里的 this 就是 fn 函數的實例對象

      // 也就是 f

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      const x = new xhl.fn()

      // 這里的 xhl.fn 也是因為和 new 關鍵字在一起了

      // 所以這里的 this 就是 xhl.fn 函數的實例對象

      // 也就是 x

      記清楚原則 :

      不管函數在哪定義

      不管函數怎么定義

      只看函數的調用方式

      經驗二 :

      ● 在嚴格模式下適用

      ● 其實只有一個

      ○ 全局函數沒有 this, 是 undefined

      ○ 其他的照搬經驗一就可以了

      1. 非嚴格模式

      // 非嚴格模式

      function fn() {

      console.log(this)

      }

      fn()

      // 因為是在非嚴格模式下, 這里的 this 就是 window

      2. 嚴格模式

      // 嚴格模式

      'use strict'

      function fn() {

      console.log(this)

      }

      fn()

      // 因為是在嚴格模式下, 這里的 this 就是 undefined

      記清楚原則 :

      嚴格模式下

      全局函數沒有 this

      是個 undefiend

      經驗三 :

      ● 專門來說一下箭頭函數

      ● 其實也只有一條

      ○ 推翻之前的所有內容

      ○ 箭頭函數內沒有自己的 this

      ○ 箭頭函數內的 this 就是外部作用域的 this

      ● 換句話說, 當你需要判斷箭頭函數內的 this 的時候

      ○ 和函數怎么調用沒有關系了

      ○ 要看函數定義在什么位置

      // 非箭頭函數

      const xhl = {

      fn: function () {

      console.log(this)

      }

      }

      xhl.fn()

      // 因為是 非箭頭函數, 所以這里的 this 就是 xhl

      // ==========================================================

      // 箭頭函數

      const xhl = {

      fn: () => {

      console.log(this)

      }

      }

      xhl.fn()

      // 因為是 箭頭函數, 之前的經驗不適用了

      // 這個函數外部其實就是全局了, 所以這里的 this 就是 window

      // 非箭頭函數

      box.onclick = function () {

      console.log(this)

      }

      // 因為是 非箭頭函數, 這里的 this 就是 box

      // ==========================================================

      // 箭頭函數

      box.onclick = () => {

      console.log(this)

      }

      // 因為是 箭頭函數

      // 這個函數外部就是全局了, 所以這里的 this 就是 window

      // 非箭頭函數

      const obj = {

      fn: function () {

      function fun() {

      console.log(this)

      }

      fun()

      }

      }

      obj.fn()

      // 因為是 非箭頭函數, 所以 fun 函數內的 this 就是 window

      // ==========================================================

      // 箭頭函數

      const obj = {

      fn: function () {

      const fun = () => {

      console.log(this)

      }

      fun()

      }

      }

      obj.fn()

      // 因為是 箭頭函數

      // 那么這個 fun 外面其實就是 obj.fn 函數

      // 所以只要知道了 obj.fn 函數內的 this 是誰, 那么 fun 函數內的 this 就出來了

      // 又因為 obj.fn 函數內的 this 是 obj

      // 所以 fun 函數內的 this 就是 obj

      記清楚原則 :

      只要是箭頭函數

      不管函數怎么調用

      就看這個函數定義在了哪里

      最后

      ● 好了

      ● 按照以上三個經驗, 記清楚原則

      ● 那么在看到 this 就不慌了

    tags:
    聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
    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 剛剛成功領取
    相關推薦HOT
    欧美精品一区二区天天
  • <big id="asigw"></big><big id="asigw"></big><tt id="asigw"></tt>
  • <tt id="asigw"><ruby id="asigw"></ruby></tt>
  • <tt id="asigw"></tt>
  • <li id="asigw"><big id="asigw"><li id="asigw"></li></big></li><big id="asigw"><big id="asigw"></big></big><tt id="asigw"></tt>
  • <tt id="asigw"></tt>
  • <ruby id="asigw"></ruby>
  • <big id="asigw"></big>
  • <xmp id="asigw">
  • <ruby id="asigw"></ruby>
  • <li id="asigw"><big id="asigw"><tt id="asigw"></tt></big></li>
  • <big id="asigw"></big><tt id="asigw"><ruby id="asigw"></ruby></tt><big id="asigw"><li id="asigw"></li></big>
  • <tt id="asigw"><big id="asigw"></big></tt>
  • <tt id="asigw"><tt id="asigw"><xmp id="asigw">
  • <tt id="asigw"></tt>
  • <ruby id="asigw"><big id="asigw"></big></ruby>
  • <xmp id="asigw"><big id="asigw"><xmp id="asigw">