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初步体验篇
Nov 23 NodeJs
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
Nov 21 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
详解NODEJS的http实现
Jan 04 NodeJs
nodejs使用http模块发送get与post请求的方法示例
Jan 08 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
nodejs一个简单的文件服务器的创建方法
Sep 13 NodeJs
linux 下以二进制的方式安装 nodejs
Feb 12 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 NodeJs
nodejs使用Sequelize框架操作数据库的实现
Oct 21 NodeJs
nodejs处理tcp连接的核心流程
Feb 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
我的论坛源代码(五)
2006/10/09 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
wxPython的安装与使用教程
2018/08/31 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
医药专业推荐信
2013/11/15 职场文书
教师个人自我鉴定
2014/02/08 职场文书
财务简历的自我评价
2014/03/05 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
十二生肖观后感
2015/06/12 职场文书