如何理解JavaScript中的this關鍵字

来源:https://www.cnblogs.com/ZavierTang/archive/2018/09/19/9673524.html
-Advertisement-
Play Games

前言：王福朋老師的 "JavaScript原型和閉包系列" 文章看了不下三遍了，最為一個初學者，每次看的時候都會有一種 “大徹大悟” 的感覺，而看完之後卻總是一臉懵逼。 原型與閉包 可以說是 JavaScirpt 中理解起來最難的部分了，當然，我也只是瞭解到了一些皮毛，對於 JavaScript O ...


前言：王福朋老師的 JavaScript原型和閉包系列 文章看了不下三遍了，最為一個初學者，每次看的時候都會有一種 “大徹大悟” 的感覺，而看完之後卻總是一臉懵逼。原型與閉包 可以說是 JavaScirpt 中理解起來最難的部分了，當然，我也只是瞭解到了一些皮毛，對於 JavaScript OOP 更是缺乏經驗。這裡我想總結一下 Javascript 中的 this 關鍵字，王福朋老師的在文章里也花了大量的篇幅來講解 this 關鍵字的使用，可以說 this 關鍵字也是個值得註意的。

我也不知道博客園編譯出來的Markdown文檔會這麼醜，作為一個完美主義者，有點無法忍受，附上原文鏈接

我們都知道，每一個 ”代碼段“ 都會執行在某一個 上下文環境 當中，而在每一個代碼執行之前，都會做一項 “準備工作”，也就是生成相應的 上下文環境，所以每一個 上下文環境 都可能會不一樣。

上下文環境 是什麼？我們可以去看王福朋老師的文章（鏈接在文末），講解的很清楚了，這裡不贅述了。

”代碼段“ 可以分為三種：

  • 全局代碼
  • 函數體
  • eval 代碼

與之對應的 上下文環境 就有：

  • 全局上下文
  • 函數上下文

（elav 就不討論了，不推薦使用）

當然，這和 this 又有什麼關係呢？this 的值就是在為代碼段做 “準備工作” 時賦值的，可以說 this 就是 上下文環境 的一部分，而每一個不同的 上下文環境 可能會有不一樣的 this值。

每次在尋找一個問題的解決方案或總結一個問題的時候，我總會去嘗試將這個問題進行合適的分類，而從不同的方面去思考問題。

所以，這裡我大膽的將 this 關鍵字的使用分為兩種情況：

  1. 全局上下文的 this

  2. 函數上下文的 this

（你也可以選擇其他的方式分類。當然，這也不重要了）

全局上下文中的 this

在全局執行上下文中（在任何函數體外部），this 都指向全局對象：

// 在瀏覽器中, 全局對象是 window
console.log(this === window) // true

let a = 'Zavier Tang'
console.log(a) // 'Zavier Tang'
console.log(window.a) // 'Zavier Tang'
console.log(this.a) // 'Zavier Tang'

this.b = 18
console.log(a) // 18
console.log(window.a) // 18
console.log(this.a) // 18

// 在 node 環境中，this 指向global
console.log(this === global) // true

函數上下文中的 this

在函數內部，this 的值取決與函數被調用的方式。

this 的值在函數定義的時候是確定不了的，只有函數調用的時候才能確定 this 的指向。實際上 this 的最終指向的是那個調用它的對象。（也不一定正確）

1. 全局函數

對於全局的方法調用，this 指向 window 對象(node下為 global )：

let foo = function () {
  return this
}
// 在瀏覽器中
foo() === window // true

// 在 node 中
foo() === global //true

但值得註意的是，以上代碼是在 非嚴格模式 下。然而，在 嚴格模式 下，this 的值將保持它進入執行上下文的值：

let foo = function () {
  "use strict"
  return this
}

f2() // undefined

即在嚴格模式下，如果 this 沒有被執行上下文定義，那它為 undefined。

在生成 上下文環境 時：

  • 若方法被 window（或 global ）對象調用，即執行 window.foo()，那 this 將會被定義為 window（或 global ）；
  • 若被普通對象調用，即執行 obj.foo()，那 this 將會被定義為 obj 對象；（在後面會討論）
  • 但若未被對象調用，即直接執行 foo()，在非嚴格模式下，this 的值預設指向全局對象 window（或 global ），在嚴格模式下，this 將保持為 undefined。

通過 this 調用全局變數：

let a = 'global this'

let foo = function () {
  console.log(this.a)
}
foo() // 'global this'
let a = 'global this'

let foo = function () {
  this.a = 'rename global this' // 修改全局變數 a
  console.log(this.a)
}
foo() // 'rename global this'

所以，對於全局的方法調用，this 指向的是全局對象 window （或global ），即調用方法的對象。（註意嚴格模式的不同）

2. 作為對象的方法

當函數作為對象的方法調用時，它的 this 值是調用該函數的對象。也就是說，函數的 this 值是在函數被調用時確定的，在定義函數時確定不了（箭頭函數除外）。

let obj = {
  name: 'Zavier Tang',
  foo: function () {
    console.log(this)
    console.log(this.name)
  }
}

obj.foo() // Object {name: 'Zavier Tang', foo: function}    // 'Zavier Tang'

//foo函數不是作為obj的方法調用
let fn = obj.foo // 這裡foo函數並沒有執行
fn() // Window {...}  // undefined

this 的值同時也只受最靠近的成員引用的影響：

//接上面代碼
let o = {
  name: 'Zavier Tang in object o',
  fn: fn,
  obj: obj
}
o.fn() // Object {name: 'Zavier Tang in object o', fn: fn, obj: obj}  // 'Zavier Tang in object o'
o.obj.foo() // Object {name: 'Zavier Tang', foo: function}    // 'Zavier Tang'

3. 作為構造函數

如果函數作為構造函數，那函數當中的 this 便是構造函數即將 new 出來的對象：

let Foo = function () {
  this.name = 'Zavier Tang',
  this.age = 20,
  this.year = 1998,
  console.log(this)
}

let tang = new Foo()

console.log(tang.name) // 'Zavier Tang'
console.log(tang.age) // 20
console.log(tang.year) // 1998

當 Foo 不作為構造函數調用時，this 的指向便是前面討論的，指向全局變數：

// 接上面代碼
Foo() // window {...}

4. 函數調用 apply、call、 bind 時

當一個函數在其主體中使用 this 關鍵字時，可以通過使用函數繼承自Function.prototype 的 call 或 apply 方法將 this 值綁定到調用中的特定對象。即 this 的值就取傳入對象的值：

let obj1 = {
  name: 'Zavier1'
}

let obj2 = {
  name: 'Zavier2'
}

let foo = function () {
  console.log(this)
  console.log(this.name)
}
foo.apply(obj1) // Ojbect {name: 'Zavier1'}   //'Zavier1'
foo.call(obj1) // Ojbect {name: 'Zavier1'}   //'Zavier1'

foo.apply(obj2) // Ojbect {name: 'Zavier2'}   //'Zavier2'
foo.call(obj2) // Ojbect {name: 'Zavier2'}   //'Zavier2'

與 apply、call 不同，使用 bind 會創建一個與 foo 具有相同函數體和作用域的函數。但是，特別要註意的是，在這個新函數中，this 將永久地被綁定到了 bind 的第一個參數，無論之後如何調用。

let foo = function () {
  console.log(this.name)
}

let obj1 = {
  name: 'Zavier1'
}
let obj2 = {
  name: 'Zavier2'
}

let g = foo.bind(obj1)
g() // 'Zavier1'

let h = g.bind(ojb2) // bind只生效一次！
h() // 'Zavier1'

let o = {
  name: 'Zavier Tang',
  f:f,
  g:g,
  h:h
}
o.f() // 'Zavier Tang'
o.g() // 'Zavier1'
o.h() // 'Zavier1'

5. 箭頭函數

在箭頭函數中，this 的值與創建箭頭函數的上下文的 this 一致。

在全局代碼中，this 的值為全局對象：

let foo = (() => this)
//在瀏覽器中
foo() === window // true
// 在node中
foo() === global // true

作為對象的方法：

let foo = (() => this)

let obj ={
  foo: foo
}
// 作為對象的方法調用
obj.foo() === window // true

// 用apply來設置this
foo.apply(obj) === window // true
// 用bind來設置this
foo = foo.bind(obj)
foo() === window // true

箭頭函數 foo 的 this 被設置為創建時的上下文（在上面代碼中，也就是全局對象）的this 值，而且無法通過其他調用方式設定 foo 的 this 值。

與普通函數對比，箭頭函數的 this 值是在函數創建創建確定的，而且無法通過調用方式重新設置 this 值。普通函數中的 this 值是在調用的時候確定的，可通過不同的調用方式設定 this 值。

原文鏈接

參考：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS 小結筆記之滑動門技術
    所謂的滑動門技術，就是指盒子背景能夠自動拉伸以適應不同長度的文本。即當文字增多時，背景看起來也會變長。 大多數應用於導航欄之中，如微信導航欄: 具體實現方法如下： 1、首先每一塊文本內容是由a標簽與span標簽組成 2、a標簽只指定高度，而不指定寬度。 3、a標簽 設置好背景圖後，指定一個paddi ...
  • CSS Grid 讀書筆記
    基本概念 "MDN" 上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, b ...
  • 用promise封裝ajax
    首先貼代碼 註釋： 1，open(method, url, async) method: GET和POST; url: 發送到服務端的url; async: 非同步true，同步false; 2，onreadystatechange 每當readyState的值變化，onreadystatechang ...
  • vue error:The template root requires exactly one element.
    error:[vue/valid-template-root] The template root requires exactly one element. 原因： 因為vue的模版中只有能一個根節點，所以在<template>中插入第二個元素就會報錯 解決方案： 將<template>中的元素先 ...
  • 前端演算法面試題整理
    1.寫一個方法將數組換成前端更易解析的樹狀結構 2.統計字元串出現最多的字母 3.排序演算法 4.去重演算法 5.二分查找演算法（建立在已經排好序的情況下） ...
  • 適配器在JavaScript中的體現
    適配器設計模式在JavaScript中非常有用，在處理跨瀏覽器相容問題、整合多個第三方SDK的調用，都可以看到它的身影。 其實在日常開發中，很多時候會不經意間寫出符合某種設計模式的代碼，畢竟設計模式就是老前輩們總結提煉出來的一些能夠幫助提升開發效率的一些模版，源於日常的開發中。 而 其實在 中應該是 ...
  • js三元運算符
    說起js，對很多初學者來說可能還是比較費力的，本人也是覺得js功底還是不夠扎實，所以把有些東西在學習一遍，順便分享出來希望可以幫到有需要的人 “三元運算符” 什麼是三元運算符 條件？條件成立執行：條件不成立執行； 相當於簡單的if()else()語句 舉個慄子： var num=10； if(num ...
  • 什麼是快速開發框架
    什麼是快速開發框架 前言 做為一個程式員，在開發的過程中會發現，有框架同無框架，做起事來是完全不同的概念，關係到開發的效率、程式的健壯、性能、團隊協作、後續功能維護、擴展......等方方面面的事情。很多朋友在學習搭建自己的框架，很多公司也在創建或使用自己的框架，網上開源的框架多如牛毛，每年新上線的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類