简单易懂的this 的指向问题

函数的 this 关键字**在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

1. 无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

2. 严格模式下，不在全局执行环境中，进入执行环境时没有设置 this 的值，this 会保持为 undefined。

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

3. 重点来了， this 永远指向调用它本身的对象，构造函数 this 指向构造函数新创建的对象。

下面我将举例说明这一点

函数自己调用

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window,  f1() 相当于 window.f1();

//在Node中：
f1() === globalThis; 

当某个函数为对象的一个属性时

var car = {
    name:'丰田',
    run() {
        console.log(this); // {name: "丰田", run: ƒ}   调用 run 的是 car，所以this指向car
    }
}

car.run() 

原型链中的 this

var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5 调用他的是 this 指向 p

作为构造函数 , this构造函数新创建的对象

var Car = function(name) {
    this.name = name;
    console.log(this); // Car {name: "亚洲龙"} 
                       // Car {name: "汉兰达"} 
}

var myCar_1 = new Car('亚洲龙');  
var myCar_2 = new Car('汉兰达');

当一个元素被绑定事件处理函数时，this指向被点击的这个元素

var btn = document.querySelector('button');

btn.onclick = function() { 
    console.log(this); // <button>this</button> 
}

4. 箭头函数没有自身的this，他沿用父级作用域的this。

5. 题目测试

var out = 25,
   inner = {
        out: 20,
        func: function () {
            var out = 30;
            return this.out;
        }
    };

console.log((inner.func, inner.func)());  // 25  (inner.func, inner.func) ',' 运算符返回了一个匿名函数 ` inner.func`  this 指向 window
console.log(inner.func());                // 20  inner 调用 this指向 inner
console.log((inner.func)());              // 20  inner 调用 this指向 inner
console.log((inner.func = inner.func)()); // 25 (inner.func = inner.func) 返回了一个匿名函数 this 指向 window