this 關(guān)鍵字是 JavaScript 中最令人困惑的部分之一，本文試圖通過(guò)介紹有關(guān)它的五個(gè)重要事項(xiàng)來(lái)闡明其目的和用法。

1、它允許訪問(wèn)同一對(duì)象上的其他屬性

在 JavaScript 中，函數(shù)可以是獨(dú)立的單元，但它們也可以用作對(duì)象的值。

考慮下一個(gè)對(duì)象。

const obj = {
 msg: 'Hi',
 logMessage: function(){}
}

logMessage 屬性存儲(chǔ)一個(gè)函數(shù)，logMessage 是一種方法。

logMessage 函數(shù)如何訪問(wèn)同一對(duì)象上的其他成員？

這是這個(gè)偽參數(shù)變得有用的地方，它允許訪問(wèn)同一對(duì)象上的其他成員。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}
obj.logMessage();
//'Hi'

在 logMessage 方法中，this 關(guān)鍵字用于訪問(wèn)同一對(duì)象的 msg 屬性。

基本上，這就是在 JavaScript 中使用 this 關(guān)鍵字的原因，它允許訪問(wèn)其他擁有或繼承的屬性。

這種行為只有一個(gè)條件，函數(shù)應(yīng)該作為方法調(diào)用，而不是作為函數(shù)調(diào)用。

2、它取決于函數(shù)的調(diào)用方式而不是函數(shù)的定義位置

考慮以下訪問(wèn) this 參數(shù)的函數(shù)。

this.msg = "Parent";
function logMessage(){
  console.log(this.msg);
}

在下一個(gè)示例中，對(duì)兩個(gè)對(duì)象使用相同的函數(shù)。

const obj = {
  msg: 'Hi',
  logMessage
}
const newObj = {
 msg: 'Hello',
 logMessage
}

這個(gè)變量引用的對(duì)象是什么？

這取決于函數(shù)的調(diào)用方式，而不是函數(shù)的定義位置。

當(dāng) logMessage 作為 obj 對(duì)象上的方法調(diào)用時(shí)，它引用該對(duì)象。

obj.logMessage();
//'Hi'

當(dāng)它作為 newObj 對(duì)象上的方法被調(diào)用時(shí)，它指向它。

newObj.logMessage();
//'Hello'

請(qǐng)考慮以下示例，其中 logMessage 屬性存儲(chǔ)在 obj 對(duì)象內(nèi)定義的函數(shù)。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}

logMessage 中的 this 參數(shù)是否總是引用 obj 對(duì)象，因?yàn)樗窃谠搶?duì)象中定義的？

答案是，NO。

下面是調(diào)用 logMessage 并使用 call 方法傳遞由 this 參數(shù)引用的不同對(duì)象的示例。

const newObj = {
  msg: 'Hello'
}
obj.logMessage.call(newObj);
//'Hello'

同樣可以使用 apply 方法來(lái)完成，我們甚至可以強(qiáng)制它使用空對(duì)象運(yùn)行，這次函數(shù)記錄未定義。

obj.logMessage.apply({});
//undefined

3、與函數(shù)形式一起使用時(shí)，它指向其他東西

函數(shù)不一定是對(duì)象的一部分，它們可以是獨(dú)立的單元，因此，可以用函數(shù)形式調(diào)用。

考慮下一個(gè)例子。

const obj = {
  msg: 'Hi',
  logMessage: function(){
    console.log(this.msg);
  }
}
const logMessage = obj.logMessage;
logMessage();
//undefined

logMessage 中的 this 不依賴于函數(shù)的定義位置，在這種情況下是在 obj 對(duì)象中。

這取決于如何調(diào)用 logMessage，在前面的示例中，logMessage 被調(diào)用為函數(shù)而不是方法。這指向了一些意想不到的東西，this.msg 給出了未定義的內(nèi)容。

這是另一個(gè)例子。

const obj = {
  msg: '',
  logMessage: function(){
    this.msg = 'Hi';
    function logSomething(){
      console.log(this.msg);
    }

    logSomething();
  }
}
obj.logMessage();
//undefined

logMessage 作為方法調(diào)用（obj.logMessage()），但 logSomething 作為函數(shù)調(diào)用。因?yàn)?logSomething 不是作為方法調(diào)用，而是作為函數(shù)調(diào)用，所以，在其中 this 指向未例外的東西。在這種情況下，this.msg 給出未定義。

如果您希望 this 引用正確的對(duì)象，請(qǐng)確保始終將 logMessage 作為方法調(diào)用。

4 、箭頭函數(shù)沒(méi)有this

確實(shí)箭頭函數(shù)沒(méi)有自己的 this。它們實(shí)際上是用來(lái)解決我們之前在方法內(nèi)部調(diào)用內(nèi)部函數(shù)時(shí)遇到的問(wèn)題。

檢查下一個(gè)示例。

const obj = {
  logMessage: function(){
    const msg = 'Hi';
    const logSomething = ()=>{
      console.log(msg);
    }

    logSomething();
  }
}
obj.logMessage();
//'Hi'

logSomething 是否將 msg 作為變量？不。

logSomething 在嘗試訪問(wèn)它沒(méi)有的變量時(shí)會(huì)發(fā)生什么？

它向下看它的父級(jí)元素來(lái)找到變量并使用它。

據(jù)說(shuō)箭頭函數(shù)沒(méi)有自己的 this，它實(shí)際上是什么意思？

這意味著它看不起它的父級(jí)元素來(lái)找到變量并使用它。

看下面的例子。

const obj = {
  msg: '',
  logMessage: function(){
    this.msg = 'Hi';
    const logSomething = ()=>{
      console.log(this.msg);
    }

    logSomething();
  }
}
obj.logMessage();
//'Hi'

logSomething 沒(méi)有這個(gè)參數(shù)，與從外部環(huán)境中使用的其他變量和參數(shù)一樣，它向下查看鏈并在其父級(jí)中找到它并使用它。

logSomething 中的 this 與 logMessage 中的對(duì)象相同。

5、應(yīng)用程序可以在不使用它的情況下編寫

除非應(yīng)用程序已經(jīng)以這種方式編寫，否則無(wú)需使用 this 關(guān)鍵字編寫應(yīng)用程序。

像 React Hooks、VueJs Composition API 和 Svelte 這樣的 UI 框架允許在不使用 this 關(guān)鍵字的情況下編寫組件。

我們可以使用閉包來(lái)編寫封裝對(duì)象，這是一個(gè)例子。

const obj = (function(){
  let msg = '';

  function logMessage(){
    msg = 'Hi';
    const logSomething = ()=>{
      console.log(msg);
    }

    logSomething();
  }

  return {
   logMessage
  }
})();
obj.logMessage();
//'Hi'

logMessage 是在自執(zhí)行函數(shù)內(nèi)部定義的內(nèi)部函數(shù)。logMessage 是一個(gè)閉包。它從外部函數(shù)引用 msg 變量。即使在自執(zhí)行函數(shù)返回后，它也可以訪問(wèn)此變量。

現(xiàn)在它不關(guān)心我們是否將 logMessage 作為函數(shù)或作為方法調(diào)用，它總是引用正確的 msg 變量。

const logMessage = obj.logMessage;
logMessage();
//'Hi'

寫在最后的想法

如果您真的想使用 this 關(guān)鍵字，或者受限于應(yīng)用程序內(nèi)部已經(jīng)做出的決定，請(qǐng)記住該函數(shù)應(yīng)作為方法調(diào)用以指向正確的對(duì)象。

如果真的不喜歡使用 this 關(guān)鍵字，您也可以考慮使用閉包實(shí)現(xiàn)對(duì)象并完全避免使用 this。

好了，以上就是我今天這篇文章所要跟你分享的內(nèi)容，如果您覺(jué)得有幫助的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，同時(shí)，將它與您的開(kāi)發(fā)者朋友一起來(lái)分享它，也許能夠幫助到他。