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

 更新时间:2021年03月03日 12:04:58   作者:Beatrix  
这篇文章主要给大家介绍了关于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关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Node.js如何提取文件中的中文字符

    Node.js如何提取文件中的中文字符

    这篇文章主要介绍了Node.js如何提取文件中的中文字符,本文介绍了在Node.js开发中如何使用代码提取文件中的中文字符,帮助开发者更好地处理中文文本数据,提高开发效率
    2023-05-05
  • 浅谈Koa服务限流方法实践

    浅谈Koa服务限流方法实践

    本篇文章主要介绍了浅谈Koa服务限流方法实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Electron 调用命令行(cmd)

    Electron 调用命令行(cmd)

    这篇文章主要介绍了Electron 调用命令行(cmd),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Koa 中的错误处理解析

    Koa 中的错误处理解析

    这篇文章主要介绍了Koa 中的错误处理解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 详解Koa中更方便简单发送响应的方式

    详解Koa中更方便简单发送响应的方式

    这篇文章主要介绍了详解Koa中更方便简单发送响应的方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • node+express制作爬虫教程

    node+express制作爬虫教程

    这篇文章主要介绍了node+express制作爬虫的详细过程和相关基础知识,非常的不错,需要的朋友可以参考下
    2016-11-11
  • node版本与node-sass版本不兼容时的问题及解决

    node版本与node-sass版本不兼容时的问题及解决

    这篇文章主要介绍了node版本与node-sass版本不兼容时的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用nodejs中httpProxy代理时候出现404异常的解决方法

    使用nodejs中httpProxy代理时候出现404异常的解决方法

    下面小编就为大家带来一篇使用nodejs中httpProxy代理时候出现404异常的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • NodeJS学习笔记之Connect中间件应用实例

    NodeJS学习笔记之Connect中间件应用实例

    前面我们介绍了几篇内容的connect中间件的基础知识,今天我们来实例应用一下,做个记事本的小应用,希望大家能够喜欢。
    2015-01-01
  • node vue项目开发之前后端分离实战记录

    node vue项目开发之前后端分离实战记录

    其实基于vue.js+node.js构建的开源博客系统有很多,下面这篇文章主要给大家介绍了关于node vue项目开发之前后端分离的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。
    2017-12-12

最新评论