一文弄懂 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函数被调用时会创建出一个自己的执行环境,执行环境的三大元素

  1. 变量对象:定义在当前执行环境内可访问的所有变量和方法。
  2. 作用域链:本质是按照执行环境的嵌套顺序而形成的一组变量对象链。
作用域定义了在某个执行环境下可访问的所有变量和方法,作用域链定义了除当前作用域外还有权访问的父级作用域,按照被嵌套顺序及当前作用域形成一条作用域链。默认当我们访问一个变量或方法时,会按照作用域链由近及远查找,首先找到最近的作用域(即当前作用域)再向外层作用域查找。

作用域链图示
作用域链.png

按照作用域嵌套顺序,SayHi被嵌套在全局执行环境中,在SayHi函数内部查找name变量时,自然而然找到的就是外层全局作用域中的name变量,所以不论如何调用都会输出window

脑壳疼.jpg

那想一想,当我们调用MyJavaScript.sayHi()时要如何准确输出MyJavaScript对象的name属性呢?

time

噔噔蹬蹬,this 机制就此诞生了!!(自带 bgm)

  1. 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 是什么

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

为什么需要 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),在类上下文(class关键字)中则是取决于类的构造函数返回对象(默认返回类中定义的所有属性和方法,不包括静态方法)。

函数上下文默认 this

无初始化值

函数上下文默认 this

手动添加属性

手动添加 this 属性

函数上下文手动返回

函数上下文手动返回

类上下文默认 this

类上下文默认 this

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

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

是不是想回退了??快结束了啊,再坚持一下 👋

坚持一下

箭头函数

我们知道普通函数的this指向在函数执行时确定,由函数的调用方式决定。

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

箭头函数

静态方法

因为this对象代表调用这个函数的对象,而静态方法是属于类的而不是调用对象,静态方法成功加载后,调用对象可能还不存在。因此在静态方法中是找不到this对象的值的。

静态方法

匿名函数

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

作为对象的方法

foo作为objA的方法被调用,this指向objA

简单调用

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

setTimeout 和 setInterval

当使用setTimeoutsetInterval时,回调函数中的this默认指向window对象,因为setTimeoutsetIntervalwindow对象提供的方法。

setTimeout

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

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

再坚持一下

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

call

call

apply

bind

call 和 apply 的区别

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

call参数

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

apply参数

bind

bind用法和call一致,但是bind返回的是被绑定的函数,需要做一次额外的手动调用。

bind

ending

到此本文就结束啦,感谢阅读,欢迎点赞 🇨🇳

ending

阅读 414
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
文章目录
宣传栏