prefacio

La palabra clave 'esto' en JavaScript es un concepto muy importante, sin embargo, a muchos principiantes les resulta difícil entenderlo profundamente. Si está o será torturado por esto, respire hondo y relájese ahora, debe tener No es difícil Sepa que en realidad no es difícil entender la palabra clave 'esto'; después de leer este artículo con paciencia, creo que tendrá una comprensión más profunda de 'esto'. A continuación, analizaremos cómo funciona la palabra clave 'esto'.

¿Cuál es la palabra clave 'esto'?

La palabra clave 'this' es una variable especial creada para cada contexto de ejecución (cada función), por lo que, en general, en las funciones que utilizan la palabra clave 'this', 'this' siempre tomará el valor de su propietario. En otras palabras, significa que apunta al propietario de la función. Esto suena abstracto, así que por ahora solo debes recordar que el valor de la palabra clave 'esto' no es estático, por lo que siempre es diferente. Su valor depende de cómo se llamó a la función y su valor solo se asigna cuando se llama realmente a la función. Por ejemplo, establecemos x=4; entonces el valor de x es 4, pero el valor de la palabra clave 'this' depende de cómo se llame a la función; ahora analicemos cuatro formas diferentes de llamar a la función.

Cuatro formas --- 1. La primera forma de llamar a una función es: usar la función como método

Ejemplo: esto representa un objeto

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

En el objeto bruce anterior hay una función calcAge(), que es una función adjunta al objeto bruce. Entonces, cuando llamamos a un método, this en calcAge() apuntará al objeto; en otras palabras, el objeto bruce al que apunta this está llamando al método. En la última línea del código, llamamos a esta función; en la función calcAge() usamos esto, entonces, ¿cuál debería ser el valor de esto? Sí, this this se refiere a bruce, así que this.birrhYear==bruce.birthYear==2001.

Cuatro formas --- 2. La segunda forma de llamar a una función es: simplemente llamar a la función, no usar la función como método y no adjuntarla a ningún objeto

Ejemplo: en este momento esto = indefinido

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

El resultado es el siguiente:

QQ图片20220710143425.png

像这样常规的调用某个函数，只是简单的调用某个函数，并没有将这个函数添加到任何对象上面；可以这样说这个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()

执行结果：

QQ图片20220710143752.png 因为箭头函数没有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);

结果：

QQ图片20220710134346.png

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

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

结果为：

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

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

const y=bruce.calcAge
y()

结果为：

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

小结

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

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

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

Explique la palabra clave 'esto' en js de una manera simple