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 sublime text 3安装与配置
Jun 19 NodeJs
基于NodeJS的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 NodeJs
Nodejs实现短信验证码功能
Feb 09 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
nodeJS实现简单网页爬虫功能的实例(分享)
Jun 08 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
nodejs实现范围请求的实现代码
Oct 12 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 NodeJs
node快速搭建后台的实现步骤
Feb 18 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
基于python实现银行管理系统
2021/04/20 Python