JavaScript 中 this 指向问题分析与解决

JavaScript 中 this 指向问题分析与解决

在 JavaScript 中，this 是一个关键字，它的指向与函数的调用方式密切相关。许多开发者在写代码时常常遇到 this 指向不明确的问题，导致错误的结果。今天，我们将通过分析一段代码，来详细探讨 this 指向的问题，并提供解决方案

代码分析

var obj = {
age: 11,
growup: function () {
console.log("my age is " + this.age);
function growup() {
this.age++;
console.log("I am growup. I am " + this.age + " years old now!");
}
growup();
}
}
obj.growup();

• this 在对象方法中的指向

  首先，我们来看 obj.growup() 方法的调用。我们调用了 obj 对象的 growup 方法，this 在方法调用时指向该对象 obj this 指向 obj

    console.log("my age is " + this.age);  // 输出 "my age is 11"
  
    // 在这里，this.age 访问的是 obj 对象中的 age 属性，输出为 11
  

• this 的指向

  • 在 JavaScript 中，this 的指向是动态的，取决于函数是如何被调用的。通常情况下，this 的指向有以下几种规则
    • 对象方法调用： 如果函数作为对象的方法调用，this 指向该对象
    • 普通函数调用： 如果函数是作为普通函数调用（即不属于任何对象），this 会指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。如果在严格模式下，this 会是 undefined。

  在我们的代码中，growup() 函数是作为普通函数调用的，而不是作为方法调用。因此，在执行 growup() 时，this 指向了 全局对象（在浏览器环境中是 window），而不是 obj 对象

• 进入嵌套的 growup 函数

  接下来，我们在 growup 方法内定义了一个嵌套函数 growup()。注意，growup() 是一个普通函数，而不是作为对象方法调用的，因此它的 this 指向是一个重要的焦点

   function growup() {  
   this.age++;  
   console.log("I am growup. I am " + this.age + " years old now!");  
   // I am growup. I am NaN years old now!
   }
  

• 为什么 NaN？

  this.age++ 在此时尝试访问 window.age，如果 age 在全局对象上未定义，它会被初始化为 undefined,然后，undefined++ 结果是 NaN，因为 undefined 不能进行加法操作，JavaScript 会将其转为 NaN。

• growup 函数调用后的最终输出

  // my age is 11
  // I am growup. I am NaN years old now!
  

• 解决 this 问题

  • 使用箭头函数

    箭头函数不会创建自己的 this，而是继承外部函数的 this。因此，使用箭头函数可以确保 this 指向 obj 对象，而不是全局对象

  如：

  var obj = {
    age: 11,
    growup: function () {
        console.log("my age is " + this.age);  // 输出 "my age is 11"
        const growup = () => {  // 使用箭头函数
            this.age++;  
            console.log("I am growup. I am " + this.age + " years old now!");
        };
        growup();  // 输出 "I am growup. I am 12 years old now!"
    }
    }
    obj.growup();
  

  • 使用 bind() 方法

    另一个常见的解决方案是使用 bind() 方法来显式绑定 this 的值。bind() 方法返回一个新的函数，并将 this 指向绑定到指定的对象

    如：

    var obj = {
    age: 11,
    growup: function () {
    console.log("my age is " + this.age);  // 输出 "my age is 11"
    const growup = () => {  // 使用箭头函数
    this.age++;  
    console.log("I am growup. I am " + this.age + " years old now!");
    };
    growup.bind(this)(); // 显式绑定 this
    }
    }
    obj.growup();
    

原文地址：https://blog.csdn.net/weixin_46328739/article/details/143514015

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！