徹底搞懂JavaScript中this指向問題

這篇文章為大家帶來了JavaScript中關於this指向的相關知識，this關鍵字又是一個非常重要的語法點，希望對大家有幫助。

1. 上下文與this的關係

透過理解上下文，我們可以更加清晰的明白this的指向問題

this的指向可以看成就是當前的上下文

# 2. 一般函數

先讓我們透過一個例子來看看什麼是函數中的this：

let colors = {
    green : "绿色",
    blue : "蓝色",
    showColors : function() {
        console.log("green: " + this.green  + " blue: " + this.blue);
    }}colors.showColors();let show = colors.showColors;show();

第一個輸出的是綠色和藍色，此時函數的上下文是colors，所以this指向colors
第二個輸出的是undefined 和undefined，此時直接用圓括號呼叫函數，上下文就是window，此時this指向的是window

所以，我們可以看出函數的上下文也就是this是由呼叫函數的方式決定。

常見的函數上下文情況：

• 物件打點呼叫它的方法函數，則函數上下文是這個打點的對象，this指向這個物件
  obj.fun(); 上下文就是obj
• #直接用圓括號呼叫函數，上下文就是window 對象，this指向window 對象

舉例：

function fun() {
    return this.a + this.b;}var a = 1;var b = 2;let obj = {
    a : 5,
    b : fun(),
    fun : fun}let res = obj.fun();console.log(res);

在obj 裡面的b 這裡的fun() 是直接用圓括號呼叫的，所以此時的fun( ) 上下文就是window 對象，所以這裡的this指向window，b = 1 2 = 3;
obj.fun() 的fun() 是由obj 打點調用的，所以它的上下文就是obj，所以這裡的this指向obj，所以res = 5 3 = 8

3. 數組/ 類別數組物件

數組/ 類別數組物件枚舉出函數進行調用，上下文是這個數組/ 類別數組物件
即可以看成：

数组[下标](); 调用这个函数的上下文对象就是这个数组

讓我們透過例子來理解：

let arr = [1, 2, 3, function() {
    console.log(this[0]);}];arr[3]();

## 這裡下標為3 是個函數，透過陣列列舉出來下標示為3 的對象，然後再執行，所以它的上下文就是這個陣列arr

類別陣列物件：

什麼是類別數組物件？

所有鍵名為自然數序列（從0 開始），且有

length屬性的物件 例如：
arguments物件就是一個類別數組對象，它是函數的實參列表

function fun() {
    arguments[3]();}fun(1, 2, 3, function() {
    console.log(this[0]);})

這裡fun 這個函數被呼叫了，但是被呼叫的同時又執行了傳入到它身上的一個函數，即

arguments[3]()這個語句，所以就會輸出this[0]，它是個類別數組物件列舉函數進行調用，所以它的上下文就是arguments，this指向它。

---

4. 立即執行函數

立即執行函數（IIFE），它的上下文就是window 對象，所以它的

this指向的是window

讓我們透過一個例子來理解：

var a = 1;let obj = {
    a : 2,
    fun : (function() {
        let a = this.a;
        return function() {
            console.log(a + this.a);
        }
    })()};obj.fun();

obj.fun()由前文所講，fun() 由obj 調用，所以這裡的this指向obj; obj 中的fun 等於一個立即執行函數的回傳值，
就相當於

obj = function() {
    console.log(a + this.a);}

這裡的

this#的是obj，所以this.a = 2； 在這個立即執行函數裡面它的上下文物件是window，所以它的
this指向window，所以這裡面的let a = this.a的this指向的會是window 對象，所以a = 1，所以它的回傳值那裡的a = 1; 所以最終輸出1 2 = 3

5. 定時器、延時器呼叫函數

在定時器、延時器呼叫函數中，上下文對象就是window 對象，裡面的

this指向window 物件

讓我們來透過一個例子來理解：

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);

這裡
setTimeout的呼叫函數是obj.fun，它是由延時器調用的，它將在2s 後運行，所以它的this指向window 對象，輸出7

如果我們這麼寫，那將會輸出什麼呢？

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(function() {
    obj.fun();}, 2000);

此时，setTimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象；
在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3

6. 事件处理函数

事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素
即：

DOM元素.onclick = function() {
    这里的上下文就是 DOM元素，this指向DOM元素};

让我们来通过一个例子来理解一下：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件处理函数</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
    <p></p>
    <p></p>
    <p></p>

    <script>
        function show() {
            alert("You click " + this.id);
        }

        let box1 = document.getElementById(&#39;box1&#39;);
        let box2 = document.getElementById(&#39;box2&#39;);
        let box3 = document.getElementById(&#39;box3&#39;);

        box1.onclick = show;
        box2.onclick = show;
        box3.onclick = show;
    </script>

当我们点击构建出来的三个盒子时，弹出的对话框中会输出对应的盒子 id
因为事件处理函数中，this指向的就是对应的DOM 元素

【相关推荐：javascript学习教程】

以上是徹底搞懂JavaScript中this指向問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！