为何logColor函数内this指向myCar，内部func函数内this指向window？

我写了一段JavaScript代码：

var myCar = { 
  color: "Blue", 
  logColor: function() { 
    var self = this; 
    console.log("In logColor - this.color: " + this.color); 
    console.log("In logColor - self.color: " + self.color); 
    var func=function() { 
      console.log("In IIFE - this.color: " + this.color); 
      console.log("In IIFE - self.color: " + self.color); 
    } 
    func(); 
  } 
}; 
myCar.logColor();

在logColor函数内部，this指向myCar对象，但在它内部定义的func函数中，this却指向window对象，请问这是为什么？我是JavaScript新手，基础知识有些薄弱。

嘿，这个问题其实是JavaScript里this绑定的经典坑，很多新手都会碰到，别担心，咱们一步步理清楚：

核心原因：this的绑定规则是调用时决定的 #

JavaScript里的this不是在函数定义时就固定绑定的，而是在函数被调用的那一刻才确定指向谁，核心要看函数的调用方式：

• 当你调用对象的方法时：比如myCar.logColor()，此时logColor作为myCar的属性方法被调用，this会自动绑定到这个所属对象（也就是myCar），所以你在logColor里打印this.color能拿到"Blue"。
• 当你直接调用普通函数时：比如你在logColor里直接执行func()，这时候func是作为一个独立的全局函数被调用的（没有挂载在任何对象上），在非严格模式下，这种调用方式的this会默认绑定到全局对象——浏览器环境里就是window。这就是为什么你在func里打印this.color会得到undefined（因为window上没有color属性）。

为什么self能拿到正确的值？ #

你在logColor里声明的var self = this;，这里的self是一个普通变量，它保存了logColor作用域中this的引用（也就是myCar）。而嵌套的func函数可以访问外层作用域的变量（这是闭包的特性），所以func里的self.color能正确拿到"Blue"。

额外补充：怎么让func里的this也指向myCar？ #

如果想让嵌套函数的this指向外层对象，有几种常见方法：

• 沿用你现在的思路：用self/that这类变量保存外层this
• 使用bind()方法：把func改成var func = function() { ... }.bind(this);，这样调用func()时this就会绑定到logColor里的this
• 使用ES6箭头函数：箭头函数不会自己绑定this，它会继承外层作用域的this，把func写成const func = () => { ... }即可

内容的提问来源于stack exchange，提问作者Shubham