NodeJS和浏览器中this关键字的不同之处


Posted in NodeJs onMarch 03, 2021

前言

学习过JavaScript的人肯定清楚 处在不同环境下this的指向问题。那么看下面的代码

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。

NodeJS和浏览器中this关键字的不同之处

打开浏览器验证一下,没问题 一个2明晃晃的在那里。

那么就这样结束了吗?

如果你学过node,现在用nodejs重新执行一下以上代码,你就发现了不一样的地方。

NodeJS和浏览器中this关键字的不同之处

你现在发现 那个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

NodeJS和浏览器中this关键字的不同之处

函数中this指向了window,而全局的this也是指向了window

2、打印nodeJs中的this

NodeJS和浏览器中this关键字的不同之处

发现了吧。函数中的this指向了Object [global]。

当我们给函数this赋值时,其实它挂靠在global对象上。所以它不会去改变全局中this的值

Node原理解析

那么看看为什么会这样

首先我们得去了解nodeJs的工作原理

浏览器直接在全局范围执行的脚本文件

而在Node中,Node将代码隐藏在一个立即被调用的匿名函数,你可以使用global来访问全局范围

在之前的解释中,我们会发现在外部打印的一个this,它指向了一个空对象{},其实在node中运行的任何文件其实都被包裹在一个{}中,所以脚本文件都在自己的闭包中执行, 类似于下面这样

{
	(function(){
		//脚本文件
	})()
}

在之前的例子中,函数的外面this指向的是一个空对象{},而在函数内部的this没有指定的执行上下文,所以它指向了global对象-(可以访问该匿名函数执行上下文的全局范围)

总结

到此这篇关于NodeJS和浏览器中this关键字不同之处的文章就介绍到这了,更多相关NodeJS 浏览器中this关键字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 NodeJs
详解nodejs操作mongodb数据库封装DB类
Apr 10 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 NodeJs
Nodejs + Websocket 指定发送及群聊的实现
Jan 09 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 #NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 #NodeJs
一文秒懂nodejs中的异步编程
Jan 28 #NodeJs
在nodejs中创建child process的方法
Jan 26 #NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 #NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 #NodeJs
Nodejs实现微信分账的示例代码
Jan 19 #NodeJs
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python 远程开关机的方法
2020/11/18 Python
python requests库的使用
2021/01/06 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
读书活动总结
2014/04/28 职场文书
大学迎新标语
2014/06/26 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
法定代表人证明书
2014/11/28 职场文书
嘉宾邀请函
2015/01/31 职场文书
个人工作能力自我评价
2015/03/05 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers