JS前端中的this指向 ~ 含详解

1、在全局作用域下，this始终指向全局对象window，无论是否是严格模式。

2、通过函数名（）直接调用，分为是否为严格模式：

•  严格模式，下，直接example()调用函数,this指向undefined，window.example()调用函数this指向window。
• 非严格模式下，通过example()和window.example()调用函数对象，this都指向window。

3、通过对象.函数名（）调用，this指向这个对象。

4、函数作为数组的一个元素，通过数组下标调用，this指向这个数组。

5、定时器等回调函数调用，this指向window。

6、构造函数（new关键字）调用，this指向创建的实例。

7、箭头函数中的this，指向箭头函数外层（所在作用域）。

8、call、apply、bind可以改变函数的this指向。

总结一句话：在JavaScript中，this永远指向函数的最终调用者。

this指向三个基本要素：

1. this指向的永远只可能是对象；
2. this指向谁，不取决于this写在哪，而是取决于函数在哪里调用；
3. this指向的对象，称为函数的上下文（context），也叫函数的调用者。

前端中的this指向详解：

1、在全局作用域下，this始终指向全局对象window，无论是否是严格模式。

// 在全局作用域下this指向
console.log(this);      // this ==> window

window.console.log(this);  // this ==> window
// congsole.log()完整的写法是window.console.log(),window可以省略
// window调用了conso.log() 方法，所以此时this指向window。

2、通过函数名（）直接调用，分为是否为严格模式：

严格模式，下，直接example()调用函数,this指向undefined，window.example()调用函数this指向window。

语法结构如下:

      // 严格模式下
      function example() {
        "use strict";
        console.log(this);
      }

      example(); // this ==> undefined
      window.example(); // this ==> window

非严格模式下，通过example()和window.example()调用函数对象，this都指向window。

      function example() {
        console.log(this);
      }
      example(); // this ==> window
      window.example(); // this ==> window

3、通过对象.函数名（）调用，this指向这个对象。

      var obj = {
        name: "二狗子",
        skill: function () {
          name: "狗腿子";
          console.log(this.name);
        },
      };

      obj.skill(); // 二狗子
      // 调用obj.skill()方法，返回值为二狗子，说明 this ==> obj

4、函数作为数组的一个元素，通过数组下标调用，this指向这个数组。

      function example() {
        console.log(this);
      }
      var arr = [example, 1, 2, 3, 4];

      arr[0](); // this ==> arr

5、定时器等回调函数调用，this指向window。

      function example() {
        console.log(this);
      }
      setTimeout(example, 1000); // this ==> window

6、构造函数（new关键字）调用，this指向创建的实例。

      function example() {
        console.log(this);
      }
      function example(name, age) {
        this.name = name;
        this.age = age;
      }
      var a = new example("许三炮", 18);

      console.log(a.name); // 许三炮
      console.log(a.age); // 18
      // this ==> 新new出的实例 a

7、箭头函数中的this，指向箭头函数外层（所在作用域）。

箭头函数中没有 this， 它会绑定最近的非箭头函数作用域中的this。首先从它的父级作用域找，如果父级作用域还是箭头函数，就再往上找，一层一层的直到直到this的指向。

      // 箭头函数中的this
      let model = () => {
        console.log(this);
      };

      model(); // this ==> window; 原因如下
      // 由于model函数是箭头函数，所以自身不能绑定this，因此找它的上一级作用域

8、call、apply、bind可以改变函数的this指向。

更多情景，正在更新中。。。。。。

综上所述，还是那句话：在JavaScript中，this永远指向函数的最终调用者。

所以JS前端的this指向，你学废了嘛？如有不同见解，欢迎讨论