JavaScript中this关键字实践

● 在全局中， this关键字表示全局窗口

console.log(this);
1

● 在严格模式下，this不指向函数本身，在非严格模式下，this指向全局窗口

console.log(this);

const calcAge = function (birthYear) {
  console.log(2037 - birthYear);
  console.log(this);
}

calcAge(1998);
1
2
3
4
5
6
7
8

● 使用箭头函数时，this的值将继承外围函数

const calcageArrow = brithYear => {
  console.log(2037 - brithYear);
  console.log(this);
};

calcageArrow(1980);
1
2
3
4
5
6

在箭头函数中，this的值是由其定义时所处的上下文决定的，而不是调用时的上下文。箭头函数calcageArrow被定义在全局作用域中，因此它的this值将引用全局对象（在浏览器环境中是window对象）。

● 在对象方法中调用this，this的值是该方法本身的对象

const jonas = {
  year: 1995,
  calcAge: function () {
    console.log(this);
  },
};

jonas.calcAge();
1
2
3
4
5
6
7
8

当然，this的值是对象，所以我们可以用this去计算年龄

const jonas = {
  year: 1995,
  calcAge: function () {
    console.log(this);
    console.log(2038 - this.year);
  },
};

jonas.calcAge();
1
2
3
4
5
6
7
8
9

● 当使用方法借用的时候，this的值仍然是调用该方法的对象

const jonas = {
  year: 1995,
  calcAge: function () {
    console.log(this);
    console.log(2038 - this.year);
  },
};

jonas.calcAge();

const mark = {
  year: 2017,
};

mark.calcAge = jonas.calcAge;
mark.calcAge();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在JavaScript中，当一个方法被赋值给另一个对象并作为该对象的方法调用时，方法内部的this值会发生改变。这是因为this的值是在函数被调用时动态确定的，取决于调用该函数的对象。