Nodejs和浏览器环境下this关键字有何不同?
Admin 2021-04-02 群英技术资讯 1626 次浏览
Nodejs和浏览器中this关键字有何不同?很多朋友对于在this关键字在Nodejs和浏览器环境下的指向问题不是很清楚,接下来通过实例代码给大家详细接下一下。
var type = 1
function toWhere(){
this.type = 2;
}
toWhere();
console.log(type)
你们肯定会这样想:
这里声明了一个全局变量type,当执行type=1的时候,赋值为1。之后toWhere函数调用,看到函数中有this 就去判断this的指向,这里很清楚,this指向了window,this.type=2执行后,全局变量type就赋值为2了。
最后打印全局变量type 结果很明显是2。

打开浏览器验证一下,没问题 一个2明晃晃的在那里。
那么就这样结束了吗?
如果你学过node,现在用nodejs重新执行一下以上代码,你就发现了不一样的地方。

你现在发现 那个1怎么这么不对劲呢,不是等于2吗?
从以上的例子可以看到,相同的js代码在浏览器中运行和在nodejs中运行结果变得不一样了。
这其实是因为this指向问题,但是这个指向和我们通常认知中的指向是不一样的。这个指向问题是由于node工作原理造成的
var type = 1
function toWhere() {
this.type = 2
console.log("函数中this指向",this)
}
toWhere()
console.log(type)
console.log("全局中this",this)
1、打印浏览器中的this

函数中this指向了window,而全局的this也是指向了window
2、打印nodeJs中的this

发现了吧。函数中的this指向了Object [global]。
当我们给函数this赋值时,其实它挂靠在global对象上。所以它不会去改变全局中this的值
那么看看为什么会这样
首先我们得去了解nodeJs的工作原理
浏览器直接在全局范围执行的脚本文件
而在Node中,Node将代码隐藏在一个立即被调用的匿名函数,你可以使用global来访问全局范围
在之前的解释中,我们会发现在外部打印的一个this,它指向了一个空对象{},其实在node中运行的任何文件其实都被包裹在一个{}中,所以脚本文件都在自己的闭包中执行, 类似于下面这样
{
(function(){
//脚本文件
})()
}
在之前的例子中,函数的外面this指向的是一个空对象{},而在函数内部的this没有指定的执行上下文,所以它指向了global对象-(可以访问该匿名函数执行上下文的全局范围)
以上就是关于Nodejs和浏览器环境下this关键字的不同之处介绍,希望对大家理解和学习this关键字学习有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
React中useRef的用法有什么?如果有使用过React的朋友,应该对ref会比较熟悉的点,ref可以用来获取组件实例对象或者是DOM对象,而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。那么具体怎样用呢?下面我们就一起来了解看看。
这篇文章主要为大家详细介绍了vue iview实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
闭包实质上是函数作用域的副产物,下面这篇文章主要给大家介绍了关于浏览器是如何看闭包的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
前言过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法。一、语法arr.reduce(function(prev,cur,index,arr){...}, i
本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于鼠标事件以及键盘事件的相关问题,还包括了页面事件、焦点事件、表单事件,下面一起来看一下,希望对大家有帮
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008