Erklären Sie das Schlüsselwort „this“ in js auf einfache Weise

Vorwort

Das Schlüsselwort „this“ in JavaScript ist ein sehr wichtiges Konzept, aber viele Anfänger finden es schwierig, es tief zu verstehen. Wenn Sie davon gequält werden oder werden, atmen Sie tief durch und entspannen Sie sich jetzt, Sie müssen es haben Es ist nicht schwer zu tun wissen, dass es eigentlich nicht schwer ist, das Schlüsselwort „dies“ zu verstehen; nachdem Sie diesen Artikel geduldig gelesen haben, glaube ich, dass Sie ein tieferes Verständnis von „dies“ haben werden. Im Folgenden werden wir besprechen, wie das Schlüsselwort „this“ funktioniert.

was ist das schlüsselwort 'this'

Das Schlüsselwort „this“ ist eine spezielle Variable, die für jeden Ausführungskontext (jede Funktion) erstellt wird; daher nimmt „this“ in Funktionen, die das Schlüsselwort „this“ verwenden, im Allgemeinen immer den Wert seines Eigentümers an. Mit anderen Worten bedeutet es, dass es auf den Besitzer der Funktion zeigt. Das klingt abstrakt, also müssen Sie sich vorerst nur daran erinnern, dass der Wert des Schlüsselworts „this“ nicht statisch ist, also immer anders ist. Ihr Wert hängt davon ab, wie die Funktion aufgerufen wurde, und ihr Wert wird nur zugewiesen, wenn die Funktion tatsächlich aufgerufen wird. Zum Beispiel setzen wir x=4; dann ist der Wert von x 4, aber der Wert des Schlüsselworts „this“ hängt davon ab, wie die Funktion aufgerufen wird; also analysieren wir jetzt vier verschiedene Möglichkeiten, die Funktion aufzurufen.

Vier Möglichkeiten --- 1. Die erste Möglichkeit, eine Funktion aufzurufen, ist: Verwenden Sie die Funktion als Methode

Beispiel: Dies repräsentiert ein Objekt

const bruce={
    name:'bruce',
    birthYear:2001,
    calcAge:function () {
        return 2022-this.birthYear
    }
};
console.log(bruce.calcAge());//21`

Im obigen bruce-Objekt gibt es eine calcAge()-Funktion, die eine an das bruce-Objekt angehängte Funktion ist. Wenn wir also eine Methode aufrufen, zeigt this in calcAge() auf das Objekt; mit anderen Worten, das bruce-Objekt, auf das this zeigt, ruft die Methode auf. In der letzten Zeile des Codes rufen wir diese Funktion auf; in der Funktion calcAge() verwenden wir diese, also welchen Wert sollte diese haben? Ja, das bezieht sich auf Bruce, also this.birrhYear==bruce.birthYear==2001.

Vier Möglichkeiten --- 2. Die zweite Möglichkeit, eine Funktion aufzurufen, ist: Rufen Sie einfach die Funktion auf, verwenden Sie die Funktion nicht als Methode und hängen Sie sie keinem Objekt an

Beispiel: zu diesem Zeitpunkt this=undefined

const calcAge=function(birthYear){
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge(2001)

Das Ergebnis ist wie folgt:

像这样常规的调用某个函数，只是简单的调用某个函数，并没有将这个函数添加到任何对象上面；可以这样说这个this没有主人，就是this指的就是window 。但是在严格模式下全局对象无法进行默认绑定，所以导致this只能绑定在undefined上。这就是this的默认绑定规则：

• this所处的词法作用域在哪里生效this就绑定在哪里。
• 在严格模式下，全局对象无法进行默认绑定，所以导致this只能绑定在undefined上

四种方式---3.调用函数的第三种方法是:调用箭头函数

箭头函数没有自己的this关键字

Example:

//3.箭头函数的调用
const calcAge= birthYear => {
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge()

执行结果：

因为箭头函数没有this，所以在箭头函数里面的this是它外层作用域里面的非箭头函数的this,而本例中外层作用域是window,所以这里的this指的是window

四种方式---4.调用函数的第四种方式：该函数被调用作为事件监听器

那么此时的this将会指向处理程序函数所附加到的DOM元素

深入理解this指向的是调用该方法的对象

这就意味着this关键字不会简单的指向在我们编写方法的对象上面。

在第一种函数调用的方式中，因为bruce是调用calaAge()方法的对象，所以此时this是bruce; 那么现在创建一个新对象：

const lucy={
   birthYear:2006,
}

我们都知道函数只是一个值，所以我们可以这样：

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);

结果：

现在lucy里面也有了一个calcAge()方法，我们再来执行lucy.calcAge()

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);
lucy.calcAge()

结果为：

这就说明lucy对象调用calcAge()方法时，此时函数calcAge()方法里面的this指向的是lucy, 即调用该方法的对象。所以this关键字如上面所说，它不是静态的，而是取决于函数的调用方式。

现在我们来定义一个常量y,并将bruce.calcAge()函数赋给它

const y=bruce.calcAge
y()

结果为：

那么此时y()只是作为一个普通函数来进行调用，this是window

小结

this关键字是一个让许多初学者感到困惑的东西，但是总的来说:

1.如果函数是以普通函数（非构造函数）的形式调用，this指的永远都是window

2.如果函数是以方法的形式调用，this就是调用方法的那个对象