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的模板视图机制分析
Jul 19 NodeJs
NodeJS学习笔记之Http模块
Jan 13 NodeJs
Nodejs抓取html页面内容(推荐)
Aug 11 NodeJs
图片上传之FileAPI与NodeJs
Jan 24 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
Nodejs 复制文件/文件夹的方法
Aug 24 NodeJs
详解使用PM2管理nodejs进程
Oct 24 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
利用nodeJs anywhere搭建本地服务器环境的方法
May 12 NodeJs
解决nodejs的npm命令无反应的问题
May 17 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 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
php 常用字符串函数总结
2008/03/15 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
职工运动会邀请函
2014/02/02 职场文书
档案室主任岗位职责
2014/02/12 职场文书
品酒会策划方案
2014/05/26 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
捐书活动倡议书
2015/04/27 职场文书
会计岗位工作总结
2015/08/12 职场文书