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文件操作模块FS(File System)常用函数简明总结
Jun 05 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
nodejs URL模块操作URL相关方法介绍
Mar 03 NodeJs
nodejs加密Crypto的实例代码
Jul 07 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
nodejs+express搭建多人聊天室步骤
Feb 12 NodeJs
nodejs+mongodb aggregate级联查询操作示例
Mar 17 NodeJs
nodeJS服务器的创建和重新启动的实现方法
May 12 NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 NodeJs
Nodejs调用Dll模块的方法
Sep 17 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 变量的定义方法
2010/01/26 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
js 回车提交表单两种实现方法
2012/12/31 Javascript
JavaScript 数组详解
2013/10/10 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python3.4爬虫demo
2019/01/22 Python
python对象与json相互转换的方法
2019/05/07 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
求职自荐信
2013/12/14 职场文书
四年级数学教学反思
2014/02/02 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers