Javascript中的this

前言

在学习Javascript中,总有些知识点是令人感到困惑。例如this的指向、闭包、事件循环等等。本文将对this的指向问题进行简单的介绍。其中有些底层的东西不会在此讲明，会在后续的文章中讲解。因为在此讲解对文章篇幅占据较大，还望谅解。开始吧！

---

1. 在Javascript中的This

this是Javascript中的关键字,this是在函数运行前动态绑定的一个对象。由于函数运用的场景不同，this所指向的对象也不同。则也是学习时感到疑惑的地方。在Javascript的底层存在着对函数运行预解析。预解析时会产生执行上下文，产生执行上下文时就决定了this指向的对象了。至于什么是预解析、执行上下文在后续文章讲解。

2. This在不同场景的指向

1）普通函数执行中的this

function fn() {
    console.log(this) // web -> window node -> {}
}

2) 对象中的方法调用的this

var student = {
  name: "Mike",
  sayName() {
    console.log(`My name is ${this.name}`); // this.name -> Mike
  },
};

console.log(student.sayName()); // My name is Mike

 3) 构造函数中的this 

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(`My name is ${this.name}`);
  };
}

const p = new Person("Lucy", 18);

console.log(p.sayName()); // My name is Lucy

构造函数中，this会指向一个空对象,然后对它赋值属性和方法,最终隐式返回此对象

4) 通过call/apply/bind函数改变this的指向 

function getFullName() {
  return `${this.firstName}_${this.lastName}`;
}

const student = {
  firstName: "Michael",
  lastName: "Jordan",
};

console.log(getFullName.call(student)); // Michael_Jordan

 至于call/apply/bind方法之间的区别会在其他专栏中讲解。

5) 其他情况

1. 函数作为返回值

// globalThis 在web指向window 在node环境指向node全局对象
globalThis.value = 1;
function sum() {
  return function (...args) {
    return args.reduce((a, b) => {
      const result = (a += b);
      return result;
    }, this.value);
  };
}

const sumFn = sum();

console.log(sumFn(1, 2, 4));

在执行sumFn之前就是上述说的会预解析确定this指向。由于sum函数执行后返回赋值给了sumFn变量，此变量执行在全局作用域下，因此this的指向于全局变量对象(global object)简称GO 在一些培训视频或者文章的说法。

2. 箭头函数中this

this.name = "Lucy";

const student = {
  name: "Mike",
  getName: () => {
    console.log(this.name);
  },
};

student.getName(); // Lucy

 由于箭头函数中没有自身的this。所以箭头函数中this指向全局对象。

总结

至此this在开发中出现的场景介绍了，至于其中于涉及底层的预解析、执行上下文以及它们产生的过程有待后续讲述。还望谅解。End