一文弄懂 this 的前世此生

JavaScript 的 this关键字你们都不陌生，根据 this所在的不一样的运行环境，会产生一些容易让人困惑的表现和差别，在没有仔细了解 this以前，我对它的理解很是的生硬和片面，但愿你们阅读完这篇内容可以清楚的明白 this的用途。

this 的由来

让咱们看一下这个栗子：

var name = 'MyWindow'

function SayHi() {
  console.log('Hi, My name is ' + name + '.')
}

var MyJavaScript = {
  name: 'MyJavaScript',
  sayHi: SayHi,
}

SayHi() // Hi, My name is MyWindow.
MyJavaScript.sayHi() // Hi, My name is MyWindow.

能够看到，当咱们想试图输出Hi, My name is MyJavaScript.的时候，仍是输出了window。由于SayHi函数里输出的name变量值一定是沿着当前执行环境的做用域链查找的，而SayHi函数被调用时会建立出一个本身的执行环境，按照做用域嵌套顺序，SayHi被嵌套在全局执行环境中，在函数内部查找name变量则会找到外层的全局做用域中的name变量，因此不论如何调用都会输出window。

那想想，当咱们调用MyJavaScript.sayHi()时要如何准确输出MyJavaScript对象的name属性呢？

噔噔蹬蹬，this机制就此诞生了!!（自带 bgm）

this被用来指向 函数真正的运行环境。

让咱们改写一下SayHi方法：

var name = 'MyWindow'

function SayHi() {
  // 此处发生变化
  console.log('Hi, My name is ' + this.name + '.')
}

var MyJavaScript = {
  name: 'MyJavaScript',
  sayHi: SayHi,
}

SayHi() // Hi, My name is MyWindow.
MyJavaScript.sayHi() // Hi, My name is MyJavaScript.

如上图，当咱们将name修改成this.name后，sayHi函数当在做为MyJavaScript对象的某一属性被调用时，准确的输出了当前函数的调用者MyJavaScript对象的name属性值。

由此咱们能够得知，this对象的做用就是当函数在不一样的执行环境下被调用，让咱们可以获得真正调用函数的对象。与函数定义在哪里或者函数做用域无关，只关心函数的调用方式。

========================= 伪装华丽的分割线 ===========================

以上就是this对象的前世，下面会整理一些与this对象相关的必懂知识点，供你们查阅。

一些必懂的知识点

this 是什么

this是JavaScript关键字，在非严格模式下，它老是指向一个对象，而具体指向哪一个对象是根据函数运行时所在的执行环境动态绑定的。

为何须要 this

由于函数能够在不一样的运行环境中执行，自身调用或做为方法调用，为了获得当前函数真正运行时的所在执行环境，即函数执行时真正的调用对象，this机制就此诞生了。

this 有什么做用

（同上）指向函数真正的调用对象。

this 的指向

简单调用

全局环境下this默认指向全局对象，严格模式下则为undefined，浏览器中则为window对象。

e.g. func() => this默认指向全局对象 => window（浏览器下）。

做为对象的方法调用

this指向由调用方式决定，在函数执行时肯定。

e.g. obj.func() => this指向具体调用对象 => obj。

这里能够理解为obj.f1()咱们是经过该对象obj找到f1函数的，则它运行时所在环境就是obj环境，this指向obj。

做为构造函数

当一个函数用做构造函数时（使用 new 关键字），它的this被绑定到正在构造的新对象。

this指向取决于函数返回的对象（默认无初始化值 => undefined），在类上下文中则是取决于类的构造函数返回对象（默认返回类中定义的全部属性和方法，不包括静态方法）。

函数上下文默认 this

无初始化值

手动添加 this 属性

函数上下文手动返回

类上下文默认 this

类上下文构造函数手动返回

是否是想返回了？？快结束了啊，再坚持一下 👋

箭头函数

咱们知道普通函数的this指向在函数执行时肯定，由函数的调用方式决定。

而在 ES6 的箭头函数中，this指向在函数定义时就肯定了，永远指向该函数声明时所在的环境对象，任何其余方式都没法修改this的指向。

静态方法

由于this对象表明调用这个函数的对象，而静态方法是属于类的而不是调用对象，静态方法成功加载后，调用对象可能还不存在。所以在静态方法中是找不到this对象的值的。

匿名函数

匿名函数中this的指向也是依旧由函数调用方式决定。

foo做为objA的方法被调用，this指向objA。

foo被指向objA.foo所指向的匿名函数，当foo被简单调用时，this就指向了全局对象。

setTimeout 和 setInterval

当使用setTimeout和setInterval时，回调函数中的this默认指向window对象，由于setTimeout和setInterval是window对象提供的方法。

可见，setTimeout中输出的是window对象上的count属性。

真的真的第 99 步了，坚持到底啊 👋

改变 this 指向的几种方法和区别

call

apply

call 和 apply 的区别

call的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔。

apply的第二个参数接收的是一个数组，对应传递给被绑定的函数。

bind

bind用法和call一致，可是bind返回的是被绑定的函数，须要作一次额外的手动调用。

到此本文就结束啦，能坚持看完的小伙伴们必成大才！感谢阅读，欢迎点赞 🇨🇳