JavaScript中this关键字的四种调用方式与指向规则详解

前言

在JavaScript语言体系中，this关键字占据着核心地位，但其行为机制常令初学者感到困惑。若你正为此困扰，请不必焦虑，掌握其底层逻辑其实并不复杂。通过耐心阅读本文，你将能透彻理解this的工作机制及其在不同场景下的表现。

什么是'this'关键字

this是一个为每个执行上下文（即每个函数）自动创建的特殊变量。通常情况下，当函数被调用时，this指向该函数的所有者。这意味着this的值并非静态固定，而是动态变化的，具体取决于函数的调用方式。只有在函数实际被执行时，this的值才会被确定。例如，变量x赋值后值为4，但this的值则完全依赖于调用上下文。接下来，我们将分析四种不同的函数调用方式及其对应的this指向。

四种方式---1.调用函数的第一种方法是：将函数作为一种方法

Example: this代表一个对象

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

在bruce对象中定义了一个calcAge()函数，该函数作为对象的方法被附加到bruce上。当通过bruce.calcAge()调用该方法时，函数内部的this指向调用它的对象，即bruce。因此，在calcAge()函数中，this.birrhYear等同于bruce.birthYear，值为2001。

四种方式---2.调用函数的第二种方法是： 简单的调用函数，不将函数作为方法，不附加到任何对象里面

Example: 此时this=undefined

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

结果如下：

当以常规方式直接调用函数，且未将其附加到任何对象时，在非严格模式下，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是调用calcAge()方法的对象，因此此时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()方法时，函数内部的this指向lucy，即实际调用该方法的对象。这再次印证了this关键字的动态特性：它不是静态的，而是取决于函数的具体调用方式。

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

const y=bruce.calcAge
y()

结果为：

此时，y()仅作为普通函数进行调用，因此this指向window。

小结

this关键字常令初学者困惑，但总结其核心规则如下：

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

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

总结

到此这篇关于js中this关键字的文章就介绍到这了,更多相关js中this关键字内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！