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 相关文章推荐
windows系统下简单nodejs安装及环境配置
Jan 08 NodeJs
利用NodeJS的子进程(child_process)调用系统命令的方法分享
Jun 05 NodeJs
轻松创建nodejs服务器(3):代码模块化
Dec 18 NodeJs
用nodejs搭建websocket服务器
Jan 23 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 NodeJs
nodejs和react实现即时通讯简易聊天室功能
Aug 21 NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 NodeJs
NodeJS和浏览器中this关键字的不同之处
Mar 03 NodeJs
分享node.js实现简单登录注册的具体代码
Apr 26 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
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python求导数的方法
2015/05/09 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python如何实现转换URL详解
2019/07/02 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
一文读懂Python 枚举
2020/08/25 Python
如何基于Python按行合并两个txt
2020/11/03 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
物理教学随笔感言
2014/02/22 职场文书
2014年高考决心书
2014/03/11 职场文书
活动总结格式范文
2014/04/26 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
先进班组材料范文
2014/12/25 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android