NodeJS和浏览器中this关键字的不同之处

前言

学习过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。

打开浏览器验证一下，没问题 一个2明晃晃的在那里。

那么就这样结束了吗？

如果你学过node，现在用nodejs重新执行一下以上代码，你就发现了不一样的地方。

你现在发现 那个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

函数中this指向了window，而全局的this也是指向了window

2、打印nodeJs中的this

发现了吧。函数中的this指向了Object [global]。

当我们给函数this赋值时，其实它挂靠在global对象上。所以它不会去改变全局中this的值

Node原理解析

那么看看为什么会这样

首先我们得去了解nodeJs的工作原理

浏览器直接在全局范围执行的脚本文件

而在Node中，Node将代码隐藏在一个立即被调用的匿名函数，你可以使用global来访问全局范围

在之前的解释中，我们会发现在外部打印的一个this，它指向了一个空对象{}，其实在node中运行的任何文件其实都被包裹在一个{}中，所以脚本文件都在自己的闭包中执行, 类似于下面这样

{
	(function(){
		//脚本文件
	})()
}

在之前的例子中，函数的外面this指向的是一个空对象{}，而在函数内部的this没有指定的执行上下文，所以它指向了global对象-（可以访问该匿名函数执行上下文的全局范围）

总结

到此这篇关于NodeJS和浏览器中this关键字不同之处的文章就介绍到这了,更多相关NodeJS 浏览器中this关键字内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Nodejs中的this详解

    以下内容都是关于在nodejs中的this而非javascript中的this,nodejs中的this和在浏览器中javascript中的this是不一样的. 在全局中的this console.log(this); {} this.num = 10; console.log(this.num); 10 console.log(global.num); undefined 全局中的this默认是一个空对象.并且在全局中this与global对象没有任何的关系,那么全局中的this究竟指向的是谁

  • NodeJS和浏览器中this关键字的不同之处

    NodeJS和浏览器中this关键字的不同之处

    前言 学习过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执行后,全局变量ty

  • nodejs与浏览器中全局对象区别点总结

    Node.js中,一个.js文件就是一个完整的作用域(module,模块).因此 var 声明的变量只在当前.js文件中有效,而不是全局有效. 而global全局对象是独立于所有的.js(module,模块)之上的. 而在浏览器中的最顶层全局对象是window,var声明的变量默认绑定到window对象上 1. 全局对象的定义 概念:在程序的任何地方都可以访问的对象,称之为全局对象.对象的属性称为全局变量. 2. NodeJS中的全局变量总结 这里我们总结下在nodejs中,我们常用的全局变量有

  • JAVA并发中VOLATILE关键字的神奇之处详解

    并发编程中的三个概念: 1.原子性 在Java中,对基本数据类型的变量的读取和赋值操作是原子性操作,即这些操作是不可被中断的,要么执行,要么不执行. 2.可见性 对于可见性,Java提供了volatile关键字来保证可见性. 当一个共享变量被volatile修饰时,它会保证修改的值会立即被更新到主存,当有其他线程需要读取时,它会去内存中读取新值. 而普通的共享变量不能保证可见性,因为普通共享变量被修改之后,什么时候被写入主存是不确定的,当其他线程去读取时,此时内存中可能还是原来的旧值,因此无法保

  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我

  • Nodejs中使用puppeteer控制浏览器中视频播放功能

    本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能. 仓库地址:  github.com/hapiman/chr- 安装静态服务器 如果电脑上存在nodejs的环境,可以直接安装 anywhere 来访问 index.html 页面. 进入项目根目录,执行命令: anywhere ,然后浏览器会自动打开 http://localhost:8000 页面. 使用puppeteer自动化执行命令 通过在 nodejs 调用前端页面的方法,然后能够Sock

  • 元素的内联事件处理函数的特殊作用域在各浏览器中存在差异

    标准参考 无. 问题描述 在一个元素的属性中绑定事件,实际上就创建了一个内联事件处理函数(如<h1 onclick="alert(this);"...>...</h1>),内联事件处理函数有其特殊的作用域链,并且各浏览器的实现细节也有差异. 造成的影响 如果在元素的内联事件处理函数中使用的变量或调用的方法不当,将导致脚本运行出错. 受影响的浏览器 所有浏览器 问题分析 1. 内联事件处理函数的作用域链 与其他函数不同,内联事件处理函数的作用域链从头部开始依次是:

  • 详解JavaScript中this关键字的用法

    详解JavaScript中this关键字的用法

    this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象(关于环境对象我们会在文章最后作补充说明),在调用函数前this的值并不确定,不同的调用方式会导致this值的改变. window.num = 22; var o = {num: 11}; function sayNum(){ alert(this.num) } sayNum();//22 o.sayNum = sayNum; o.sayNum();//11 记住:函数名仅仅是一个包含指针的变量而已.因此即使是在不同的环境中

  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

  • Delphi之Pascal语言中的关键字及保留字汇总

    本文汇总了Pascal语言中的关键字及保留字如下,供大家参考: absolute//指令(变量) abstract//指令(方法) and//运算符(布尔) array//类型 as//运算符(RTTI) asm//语句 assembler//向后兼容(汇编) at//语句(异常处理) automated//访问类别符(类) begin//块标记 case//语句 cdecl//函数调用协定 class//类型 const//声明或指令(参数) constructor//特殊方法 contain

  • 在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

    pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览器中直接复制的图片,也可以识别复制的富文本中的图片.仅仅可以识别在浏览器中复制的内容,操作系统中复制的图片是不能识别的. pasteimg依赖jQuery,简单易用,引入jQuery和paste.image.js后,调用方式如下: 复制代码 代码如下: //在需要监听粘贴事件的dom元素上调用pas

随机推荐