学习js中的'this'关键字

学习js中的’this’关键字

JavaScript中的'this'关键字

在JavaScript中，'this'关键字是一个非常重要的概念。虽然我们知道它很重要，但它也十分的晦涩难懂，也给我们学习造成不小的困扰。 'this'关键字是为每个执行上下文(每个函数)创建的一个特殊变量。所以一般来说，在使用'this'关键字的函数中，'this'永远是取其所有者的值。总结一句话是该函数的所有者。这样的抽象，很难理解，那么你现在只要记住'this'关键字的值不是静态的，所以它总是不一样。它的值取决于函数是怎么被调用的，这个是有在实际调用中才可以。

学习js中的'this'关键字

四种不同的调用函数的方式

下面我们来分析四种不同的调用函数的方式。

1.将函数作为一种方法

在这种方式中，将函数作为一种方法附加到一个对象上。在这种情况下，调用这个方法时，函数内部的'this'将指向这个对象。

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

console.log(bruce.calcAge()); // 21

在上面的例子中，bruce对象里面有一个calcAge()函数，这个函数是一个被附加到了bruce对象里面的函数。所以当我们调用一个方法的时候，calcAge()里面的'this'将会指向这个对象；换句话来说，'this'所指的bruce这个对象正在调用这个方法。在代码的最后一行，我们调用了这个函数；在calcAge()函数里面我们使用了'this'，那么这个'this'的值就是bruce；所以this.birthYear == bruce.birthYear == 2001。

2.简单的调用函数，不将函数作为方法，不附加到任何对象里面

在这种情况下，'this'指向的是全局对象window，在严格模式下，全局对象无法进行默认绑定，所以导致'this'只能绑定在undefined上。

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

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

3.调用箭头函数

箭头函数没有自己的'this'关键字，所以在箭头函数里面的'this'是它外层作用域里面的非箭头函数的'this'。

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

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

4.该函数被调用作为事件监听器

当一个函数被用作事件监听器时，函数内的'this'将指向处理程序函数所附加到的DOM元素。

// 创建一个新对象
const lucy = {
  birthYear: 2006
}

// 在lucy对象里面添加一个calcAge()方法
lucy.calcAge = bruce.calcAge;

console.log(lucy);
lucy.calcAge();

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

小结

总结一下，'this'关键字不会简单的指向在我们编写方法的对象上面。对于很多初学者，这是一个难点。我们可以简单总结为：

如果函数是以普通函数（非构造函数）的形式调用，'this'指的永远都是window。
如果函数是以方法的形式调用，'this'就是调用方法的那个对象。
箭头函数没有自己的'this'关键字，所以在箭头函数里面的'this'是它外层作用域里面的非箭头函数的'this'。
当一个函数被用作事件监听器时，'this'将指向处理程序函数所附加到的DOM元素。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7290.html