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+express+html5 实现拖拽上传
Aug 08 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 NodeJs
nodejs中的fiber(纤程)库详解
Mar 24 NodeJs
Windows系统下使用Sublime搭建nodejs环境
Apr 13 NodeJs
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
Nodejs Express4.x开发框架随手笔记
Nov 23 NodeJs
nodejs修复ipa处理过的png图片
Feb 17 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
监控Nodejs的性能实例代码
Jul 02 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python实现决策树分类
2018/08/30 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
预备党员入党思想汇报
2014/01/04 职场文书
活动总结范文
2014/08/30 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
教师个人总结范文
2015/02/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers