this关键字,是如何把你难倒的?
创始人
2024-03-29 20:39:49
0

作为一名实战前端工程师,在jq时代,是经常被this关键字难倒的。几年前每次我意识到程序出现问题的时候,都本能反应是自己的this没有绑定好,于是重新绑定一下,就能解决了。但是他确实一直为难着我。

转眼到了2022年底,我想需要解决一下这个千年难题了。于是我开始认真摸索一番。

到底什么是this

简单说,this就是属性或方法“当前”所在的对象。

为什么这么简单的定义,我们理解不了?

  1. 层层嵌套,改变了this对象
  2. 对象自动携带this,或者全局默认有this对象
  3. 操作dom的时候,this对象变得扑朔迷离。

实际上JavaScript 的变量类型一样,看看这三种类型的变量,是不是更容易理解this了?
局部变量
被捕获变量
全局变量

this的实质

JavaScript 的对象类型存放给变量的是一个引用地址,是一个字符串地址。
引用地址

变量o是一个地址(reference)。后面如果要读取o.obj,引擎先从o拿到内存地址,然后再从该地址读出原始的对象,返回它的obj属性。

到这里好像跟this没关系?回忆一下,我们第一次接触this是学什么知识点的时候?没错,构造函数,new一个对象的时候,实例对象默认创建了this变量,这是我们第一次学习到this关键字。

我们把上面的对象o上加入kill方法.

var o = {num: 1,obj:{a:1},kill: function(){console.log(this.num)}
}

现在问题就来了,调用o.kill()会输出什么?
如果var b = o.kill; b();又输出什么?

答案是o.kill()会输出1;而b()又输出的是undefined。 为什么产生这样的不同呢?

由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

o.kill()的运行上下文是o这个对象(往上看一下哪个对象引用地址图);而b变量的运行上下文是window全局。b是window对象下的一个变量,所以b是在window对象包裹内部,而window对象其他地方没有定义num变量,所以num就是未定义。

相关内容

热门资讯

中央广电总台副台长王晓真,黑龙... 据央视新闻报道,12月28日,中央广播电视总台《2026年春节联欢晚会》分会场发布。黑龙江哈尔滨、浙...
聚焦全国财政工作会议丨明年财政... (央视财经《经济信息联播》)明年是“十五五”规划的开局之年,财政政策将聚焦哪些关键领域精准发力? ...
原创 中... 12月26日,中国对美国实施了一次重磅反制,针对美国政府前不久批准的111亿美元对台军售,中方决定出...
徐杰11分王少杰遭驱逐 张宁缺... [搜狐体育战报]北京时间12月28日消息,2025-26赛季CBA常规赛继续第7轮角逐。王少杰第三节...
《今日说法》主持人李晓东买茶叶... 12月28日,《今日说法》栏目主持人李晓东发布视频称,此前“被骗1000元买茶叶”事件迎来新进展:该...
3-0领先终于能休息了!莫德里... 在意甲第17轮的一场焦点战中,AC米兰迎战维罗纳。比赛进行到第70分钟时,AC米兰在3-0领先的情况...
原创 数... 星链卫星接连失控坠落背后,美国太空霸权现裂痕?反观中国,悄然布下反超棋局,六战六捷消息一出,美国立马...
“墨色无变化”,故宫出借米芾《... 12月28日,江西省博物馆发布声明回应近日文学爱好者的质疑: 近日,有观众质疑我馆“山谷雅集——黄庭...
原创 彻... 近期,中日关系因为日本首相高市早苗的错误涉台言论,跌到了谷底。然而在多重施压下,高市早苗仍然拒绝撤回...