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入门详解(多篇文章结合)
Mar 07 NodeJs
Nodejs进程管理模块forever详解
Jun 01 NodeJs
Nodejs实现批量下载妹纸图
May 28 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
NodeJS学习笔记之Module的简介
Mar 24 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
nodeJs爬虫的技术点总结
May 13 NodeJs
深入理解NodeJS 多进程和集群
Oct 17 NodeJs
nodejs提示:cross-device link not permitted, rename错误的解决方法
Jun 10 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
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
表彰大会新闻稿
2015/07/17 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
mysql 子查询的使用
2022/04/28 MySQL