一文弄懂 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

0 声望
0 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45.2k评论 18

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
0 声望
0 粉丝
宣传栏