问答1 问答5 问答50 问答500 问答1000
网友互助专业问答平台

如何更好的理解js中的this,分享2段有意思的代

提问网友 发布时间:2022-04-21 01:07
声明:本网页内容为用户发布,旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:1656858193@qq.com
1个回答
热心网友 回答时间:2022-06-17 00:22

如何更好的理解js中的this,分享2段有意思的代码

----------------第一段--------------------

function a(xx){this.x=xx;return this};
var x=a(5);var y=a(6);
console.log(x.x);
console.log(y.x);
输出:
undefined  //console.log(x.x)
6          //console.log(y.x)
Why?

其实这段代码还是比较有误导性的,我们来简化并且分解一下,简化后如下。

function a(xx){
  this.x = xx;
  return this;
}
var x = a(5);
console.log(x.x);

我们主要分析一下 var x = a(5) 调用a函数时发生了什么。

由于在window层面下,我们可以这样改写这句。  

window.x = window.a(5); //这句等同于 var x = a(5);

1、我们先看等号【右侧 var x = a(5)】部分,也就是执行a(5)这个函数的时候发生了什么,因为其在window层面下,你可以理解为 window.a(5),基于javascript中关于this的理解,【谁调用该函数,里面的this指向谁】,

那么在这里,很显然,是window调用了函数a,里面的this当然指向window。

在函数执行时第1句: this.x = xx; //由于传入的值是常数5,那么this.x=5,没有问题吧; ok,进一步,this指向是谁呢,谁调用的该函数,this就是谁,那么在这里显然是window调用的函数a,那么this指向的就是window,于是我们可以这样写,window.x = 5   请注意,这里很重要,此时此刻window.x=5, 表明window层下面有一个x属性,并且值为常数5;

在函数执行时第2句:return this;  // this同样指向的是window, 所以返回window a(5)执行完毕,返回window;

2、接着看等号【左侧 var x = a(5)】部分,也就是var x,也就是说我们在window层面下申明一个名为x的变量;  前面第一句【this.x=xx】执行完毕,已经在window下面产生了一个属性x,也就是上面加粗部分 window.x  而现在我们又在window层面下申请一个变量x ,显然后面这个申明的x会覆盖掉第一句在【this.x】产生的window.x。

最终:a(5)执行完毕,返回window对象,并赋值给变量x,那么在console.log(x.x) 输出window

问题来了,不是说输出undefined吗?现在我们整段一起看。

function a(xx){
   this.x=xx;
   return this
};
 
var x=a(5);
//console.log(x.x) 如果此时我们作输出,没错,得到的就是window。问题在下面这一句
var y=a(6);  //调用函数a(6) 会造成 window.x =6  再么接下来再输出console.log(x.x), 由于x=6 ; console.log(6.x)肯定是无效的,因此为undefined
console.log(x.x); // undefined
console.log(y.x); // 6

总结:定义的a方法,直接调用this对象指向的是window全局变量。在x=a(5)时,this.x就是window.x得到的是5,后来x接到了返回值是window.

这一点你可以把y=a(6)注释掉执行看到!然后再调用y=a(6),这时候this.x把之前的x改写成6,成了一个数值型的变量了。

这时候y接到了返回的window,x.x不存在,y.x就是被改写的那个6了!

----------------第二段--------------------

var obj = {
  go: function() { alert(this) }
};
(0 || obj.go)()  //这里为什么输出window 啊

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

js当中this什么用法 如何理解 JavaScript 中的 this 关键字 javascript中的this到底指什么? JavaScript脚本中的this用法详细诠释? 怎么把金山毒霸卸载了 我删除也删除不了啊 金山毒霸企业版5.2卸载需要密码,如何才能卸载? 怎样完全卸载金山毒霸?卸载不了金山毒镖? 金山毒霸如何卸载 怎样才能完全的卸载金山毒霸 金山毒霸怎么卸载 金山毒霸卸载的方法 正确卸载金山毒霸的步骤 如何卸载金山毒霸软件? 安装了企业版,客户端上金山毒霸软件卸载方法! 安装了企业版,客户端上金山毒霸软件卸载方法! 网络环路怎么查? U盘删除的数据可以恢复吗??能恢复删除多久的数据? 我的U盘里面的东西刚刚删掉了,但是删掉的文件在哪里?? 如何清除U盘安装记录信息 u盘删掉的文件在哪里? 如何彻底删除u盘的文件 javascript中this的意思 javascript自定义对象中this的用法 Javascript中“this” 的作用? JAVAscript里面this的用法谁能举个例子啊 理解Javascript中this是什么1 js中this代表什么意思? javascript里的this用法指正 鲁刚的《老厂》 歌词 javascript中各个地方的this指什么 JS中this关键字的解释 JavaScript 函数作用域 this javascript什么意思 如何排查C1下的网络环路? 防狼喷雾能过机场安检吗? 上飞机出国 可以带防狼喷雾吗 你好,防狼喷雾真的能带上飞机吗? 什么东西可以作防身利器又可以带上飞机? 防狼喷雾剂 能带上飞机吗? 老师,您好,我有几个问题想请教您 防狼喷雾60毫升,坐飞机可以放在行李箱里托运吗
Top