Javascript经典问题1，函数作用域内的 this 绑定

var literalCircle = {
  radius: 10,

  getArea: function () {//    var self = this;
    console.log(this);

    var increaseRadius = function () {
      this.radius = 20;
    };
    increaseRadius();
    console.log(this.radius);	

    return Math.PI * Math.pow(this.radius, 2);
  }
};

console.log(literalCircle.getArea());　

代码输出:

 

这段代码中的 this 指向问题是一个经典的 JavaScript 问题，它涉及函数作用域内的 this 绑定。

在 increaseRadius() 函数内部，this 默认指向 全局对象（window 或 global），而不是 literalCircle 对象。

解决办法：

使用箭头函数（ES6+）

箭头函数不绑定自己的 this，而是继承外层作用域的 this：

getArea: function () {
  var increaseRadius = () => {
    this.radius = 20; // 箭头函数继承 getArea 的 this
  };
  increaseRadius();
  console.log(this.radius); // 20
}

 

关键点

1. 普通函数（function）：

   • 有自己的 this，取决于调用方式。

   • 在 increaseRadius() 里，this 默认指向 window（非严格模式）或 undefined（严格模式），导致 this.radius 修改失败。

2. 箭头函数（=>）：

   • 没有自己的 this，直接继承外层 this（即 getArea 的 this，也就是 literalCircle）。

   • 因此 this.radius = 20 能正确修改 literalCircle.radius。