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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類