JavaScript中的 this

来源:https://www.cnblogs.com/uakora/archive/2020/04/11/12681646.html
-Advertisement-
Play Games

面向對象語言中 this 表示當前對象的一個引用。但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。 單獨使用(包括嚴格模式下)，this 表示全局對象 在函數中，this 表示全局對象 在函數中，在嚴格模式下，this 是未定義的(undefined) 在對象 ...


面向對象語言中 this 表示當前對象的一個引用。但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

  • 單獨使用(包括嚴格模式下)，this 表示全局對象
  • 在函數中，this 表示全局對象
  • 在函數中，在嚴格模式下，this 是未定義的(undefined)
  • 在對象方法中，this 表示該方法所屬的直接對象
  • 在事件中，this 表示接收事件的元素
  • 類似 call()、apply()、bind() 方法可以將 this 引用到任何對象

this 的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定 this 到底指向誰，實際上 this 最終指向的是那個調用它的對象。

單獨使用 this

單獨使用 this，則它指向全局(Global)對象。在瀏覽器中，Window 就是該全局對象。

var x = this;
x // [object Window]

嚴格模式下，如果單獨使用，this 也是指向全局(Global)對象。

"use strict";
var x = this;
x // [object Window]

函數中使用 this

在函數中，this 指向調用函數的對象

var color = 'Global color'; 

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [Object Windwo]
  console.log(this.color); // 'Global color'
}
myFunction(); // 實質是全局對象window在調用函數 ==> window.myFunction();

在嚴格模式下，this 是 undefined

"use strict"
var color = 'Global color'; 

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // undefined
  console.log(this.color); // TypeError: Cannot read property 'color' of undefined
}
myFunction();

對象方法中使用 this

在對象方法中，this 表示該方法所屬的直接對象

var color = 'Global color'; 

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [Object myObj]
  console.log(this.color); // 'Object color'
}
var myObj = {
  color: 'Object color', 

  foo: myFunction
};

myObj.foo();

有嵌套對象的場景(下列代碼中 myFunction 方法所屬的直接對象為 subObj )：

var color = 'Global color'; 

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [Object subObj]
  console.log(this.color); // 'SubObject color'
}
var subObj = {
  color: 'SubObject color',
  foo: myFunction
};
var myObj = {
  color: 'Object color', 

  subObj: subObj
};

myObj.subObj.foo();

對象普通屬性中使用 this

對象屬性由 普通屬性 + 方法 構成，當對普通屬性使用 this. 賦值時，this 始終指向全局對象(?? 沒有完全理解)

// 示例一(觀察 myFunction 中 this.dangerColor 的輸出)
var color = 'Global color'; 
var dangerColor = 'Global Danger color';

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [Object myObj]
  console.log(this.color); // 'Object color'
  console.log(this.dangerColor); // 'Global Danger color'
}
var myObj = {
  color: 'Object color', 
  dangerColor: this.dangerColor, // 此處 this 指向全局對象 Window
  foo: myFunction
};

myObj.foo();

// 示例二，有嵌套對象的場景，父對象、子對象單獨定義(觀察 myFunction 中 this.dangerColor 的輸出)
var color = 'Global color'; 
var dangerColor = 'Global Danger color';

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [SubObject myObj]
  console.log(this.color); // 'SubObject color'
  console.log(this.dangerColor); // 'Global Danger color' (?? 這個輸出有點不太理解)
}
var subObj = {
  color: 'SubObject color',
  dangerColor: this.dangerColor, // 此處 this 就確定了? 指向全局對象 Window? （?? 不太理解）
  foo: myFunction
};
var myObj = {
  color: 'Object color', 
  dangerColor: 'Object Danger color',

  subObj: subObj
};

myObj.subObj.foo();

// 示例三，有嵌套對象的場景，子對象直接在父對象中定義(觀察 myFunction 中 this.dangerColor 的輸出)
var color = 'Global color'; 
var dangerColor = 'Global Danger color';

function myFunction() {
  var color = 'Function color';

  console.log(color); // 'Function color'  
  console.log(this); // [SubObject myObj]
  console.log(this.color); // 'SubObject color'
  console.log(this.dangerColor); // 'Global Danger color' (?? 這個輸出有點不太理解)
}

var myObj = {
  color: 'Object color', 
  dangerColor: 'Object Danger color',
  // 子對象直接在父對象中定義
  subObj: {
    color: 'SubObject color',
    dangerColor: this.dangerColor, // 此處 this 就確定了? 指向全局對象 Window? （?? 不太理解）
    foo: myFunction
  }
};

myObj.subObj.foo();

說明：當對 對象普通屬性使用 this. 賦值時，感覺 this 始終指向全局對象，目前還不太理解??

事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

<button onclick="this.style.display='none'">點我後我就消失了</button>

this 的四種綁定規則

this 的四種綁定規則分別是：預設綁定、隱式綁定、顯示綁定、new 綁定

預設綁定

獨立函數調用

var color = 'Global color'; 

function myFunction() {
  console.log(this.color); // 'Global color' (嚴格模式下有 undefined 的問題)
}
myFunction();

隱式綁定

函數的調用是在某個對象上觸發的，調用位置上存在上下文對象(上文中的“對象方法中使用 this ”)

var color = 'Global color'; 
function myFunction() {
  console.log(this.color); // 'Object color'
}
var myObj = {
  color: 'Object color', 
  foo: myFunction
};
myObj.foo();
隱式丟失(函數別名)
var color = 'Global color'; 
function myFunction() {
  console.log(this.color); // 'Global color'
}
var myObj = {
  color: 'Object color', 
  foo: myFunction
};
var bar = myObj.foo; // 不直接執行
bar();

說明：myObj.foo 是引用屬性，賦值給 bar 的實際上就是foo函數（即：bar 指向 foo 本身）。那麼，實際的調用關係是：通過 bar 找到 foo 函數，進行調用。整個調用過程並沒有myObj 的參與，所以是預設綁定，輸出結果為全局變數 color 的值 'Global color'。

隱式丟失(回調函數)
var color = 'Global color'; 
function myFunction() {
  console.log(this.color); // 'Global color'
}
var myObj = {
  color: 'Object color', 
  foo: myFunction
};

setTimeout(myObj.foo, 1000);

說明：同樣的道理，雖然參傳是 myObj.foo，因為是引用類型，所以傳參實際上傳的就是 foo 對象(函數)本身的引用。對於 setTimeout 的調用，還是 setTimeout -> 獲取參數中 foo的引用參數 -> 執行 foo 函數，中間沒有 myObj 的參與，這裡依舊進行的是預設綁定。

顯示綁定

相對隱式綁定，this 值在調用過程中會動態變化，如果我們就想綁定指定的對象，這時就用到了顯示綁定。
具體使用上，可以通過call(…)、apply(…) 或 bind(…)來實現。（三個方法的區別）

var person = {
  name: 'xx',
  age: 'xx',
  foo: function() {
    console.log(this.name + ', ' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 21
}
var zhangsan = {
  name: '張三',
  age: 31
}
var lisi = {
  name: '李四',
  age: 27
}
var bar = person.foo;
bar.call(xiaoming); // 小明, 21
bar.apply(zhangsan); // 張三, 31
bar.bind(lisi)(); // 李四, 27

硬綁定

var person = {
  name: 'xx',
  age: 'xx',
  foo: function() {
    console.log(this.name + ', ' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 21
}
var zhangsan = {
  name: '張三',
  age: 31
}
var bar = function() {
  person.foo.call(xiaoming); 
};

setTimeout(bar, 1000); // 小明, 21

bar.call(zhangsan); // 小明, 21 (!!!，這裡需要註意)

說明：雖然最後一行代碼， bar 被顯示綁定到 zhangsan 上，對於 bar，function(){…} 中的 this 確實被綁定到了 zhangsan 上，但 person.foo 因為通過 person.foo.call( xiaoming) 已經顯示綁定了 xiaoming，所以在 foo 函數內，this 指向的是 xiaoming，不會因為 bar 函數內指向 zhangsan 而改變自身，所以列印的是 "小明, 21"。

在顯示綁定中，綁定 null 或 undefined，實際上會進行預設綁定，導致函數中可能會使用到全局變數，與預期不符。對於要忽略 this 的情況，可以傳入一個空對象，該對象通過Object.create(null) 創建。

var name = 'Window';
var age = '100';
var person = {
  name: 'xx',
  age: 'xx',
  foo: function() {
    console.log(this.name + ', ' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 21
}
var emptyObj = Object.create(null);
var emptyObj2 = Object.create({});

person.foo.call(null); // Window, 100
person.foo.call(undefined); // Window, 100
person.foo.call(xiaoming); // 小明, 21
person.foo.call(emptyObj); // undefined, undefined
person.foo.call(emptyObj2); // undefined, undefined

new 綁定

作為構造函數調用，this 指代 new 實例化的對象

function Person(name) {
  this.name = name;  
}
var xiaoming = new Person('小明');
console.log(xiaoming.name); // 小明

var zhangsan = new Person('張三');
console.log(zhangsan.name); // 張三

當 this 碰到 return 時，如果返回值是一個對象，那麼 this 指向的就是那個返回的對象，如果返回值不是一個對象那麼 this 還是指向函數的實例

function Person(name) {
  this.name = name;  
  return {}; // 返回 Object (函數除外)
}
var xiaoming = new Person('小明');
console.log('name: ', xiaoming.name); // name: undefined

function Person(name) {
  this.name = name;  
  return function() {};
}
var xiaoming = new Person('小明');
console.log('name: ', xiaoming.name); // name:     (空值)

function Person(name) {
  this.name = name;  
  return null; // 返回基本數據類型 Number, String, Boolean, Null, Undefined
}
var xiaoming = new Person('小明');
console.log('name: ', xiaoming.name); // name: 小明

擴展：箭頭函數

（待續...）

參考文檔：
https://www.cnblogs.com/pssp/p/5216085.html
https://blog.csdn.net/cjgeng88/article/details/79846670
https://segmentfault.com/a/1190000019937964?utm_source=tag-newest


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

-Advertisement-
Play Games
更多相關文章
  • 【趙強老師】MongoDB的inMemory存儲引擎
    一、MongoDB的存儲引擎概述 存儲引擎（Storage Engine）是MongoDB的核心組件，負責管理數據如何存儲在硬碟（Disk）和記憶體（Memory）上。從MongoDB 3.2 版本開始，MongoDB 支持多數據存儲引擎（Storage Engine），MongoDB支持的存儲引擎有 ...
  • ORA-12523：TNS：監聽程式無法找到適用於客戶機連接的常式
    在tnsnames.ora中修改客戶端的連接方式為專用(DEDICATED)模式 重啟資料庫服務和監聽服務 ...
  • 【MySQL 主從同步延遲的原因及解決辦法】
    Mysql主從基本原理，主要形式以及主從同步延遲原理 (讀寫分離)導致主庫從庫數據不一致問題的及解決方案 一、主從資料庫的區別 從資料庫(Slave)是主資料庫的備份，當主資料庫(Master)變化時從資料庫要更新，這些資料庫軟體可以設計更新周期。這是提高信息安全的手段。主從資料庫伺服器不在一個地理 ...
  • Android連載4-自定義控制項的單位和尺寸
    一、自定義控制項的單位和尺寸 1.一般在PC上會使用px(像素)和pt(磅)作為單位，但是在手機上由於不斷地會更新手機屏幕的解析度，因此使用這兩個單位不再那麼合適。可能在一部低解析度手機上，一個控制項占據整塊屏幕，而在高解析度的手機屏幕上連一半都占不到。我們先新建一個工程UISizeTest，然後修改a ...
  • 安卓開發-安卓串口轉USB-小白入門
    1.新建一個安卓項目。 2.引入jar包：CH34xUARTDriver.jar(下載後直接拖入項目的libs下就可以了) 3.右鍵點擊jar包，導入項目中（到時會彈出一個框，直接點ok就可以了） 4.檢查libs文件是否與圖片一致 5.可以開始寫入你的代碼了。在MainActivity中就可以調用 ...
  • 數組中的冒泡排序與選擇排序
    冒泡排序示意圖 冒泡排序程式 1 var arr = [4,2,5,7,8,2,1] 2 console.log(arr) 3 // 用冒泡排序從小到大 4 // 總共有arr.length個數，每一趟都能確定一個最大值，但是最後一個不需要比較 5 // 所以總共要比較arr.length-1趟 0 ...
  • 一種開箱即賊好用的移動端適配方案
    主角是誰 在今天這篇文章中，我並不會在這裡講一些移動端視口的概念，包括物理像素和邏輯像素，理想視口，dpr等等等等，我只介紹這樣一種非常不錯的移動端適配方案：post-css-to-viewport，如果我說這種方案能解決98%以上的移動端佈局痛點，我想整個博客園，應該沒有人會反駁。 痛點在哪裡 在 ...
  • Javascript獲取GET參數
    鏈接： https://example.com?id=1&type=2 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類