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 相关文章推荐
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 NodeJs
nodejs win7下安装方法
May 24 NodeJs
轻松创建nodejs服务器(4):路由
Dec 18 NodeJs
基于html5和nodejs相结合实现websocket即使通讯
Nov 19 NodeJs
nodejs 中模拟实现 emmiter 自定义事件
Feb 22 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
Apr 06 NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
Nodejs 识别图片类型的方法
Aug 15 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php递归json类实例
2014/12/02 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python中as用法实例分析
2015/04/30 Python
Python中协程用法代码详解
2018/02/10 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
应聘护士求职信
2014/07/21 职场文书
新闻稿件写作范文
2015/07/18 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers