Nodejs 中关于 this 的使用以及与浏览器 JavaScript 中的 this 的区别【亲自踩坑总结,值得收藏】

前言

最近根据安排,在参与一个自动化测试工具的开发,本项目是基于 Nodejs 开发的,由于挺长时间没有使用 Nodejs 进行完整的项目开发了,所以在开发过程中还会踩不少坑,所以这就来了。

我们这里说的是在 Nodejs 中的 this,而不是在 JavaScript 中的 this。Nodejs 中的 this 和在浏览器中 JavaScript 中的 this 还是不一样的,所以大家还是需要区分一下。(关于 Nodejs 中的 this 与 Javascript 中的 this 的区别,在文末我也替大家总结了一下,记得看哦~)


Nodejs 中 this 的使用

下面,我将分三个部分介绍 this 是如何在 Nodejs 中使用的,它究竟指向的是 WHO??

在全局中的 this

console.log( this ); // {}
this.name = 'Tony';
console.log( this.name ); // Tony
console.log( global.name ); // undefined

全局中的 this 默认是一个空对象,并且在全局中 thisglobal 对象没有任何的关系,那么全局中的 this 究竟指向的是谁呢?想要知道答案,请继续往下看。

在函数中的 this

function fn(){
  this.name = 'Tony';
}
fn();
console.log( this ); // {}
console.log( this.name ); // undefined
console.log( global.name ); // Tony

上面的代码可以看出:在函数中 this 指向的是 global 对象,和全局中的 this 不是同一个对象,简单来说,你在函数中通过 this 定义的变量就是相当于给 global 添加了一个属性,此时与全局中的 this 已经没有关系了。

function fn(){
  function fn2(){
    this.age = 18;
  }
  fn2();
  console.log( this );  // global
  console.log( this.age ); // 18
  console.log( global.age ); // 18
}
fn();

通过这段代码,可以验证我上面说的:在函数中 this 指向的是 global 对象,和全局中的 this 不是同一个对象。

构造函数中的 this

function Fn(){
  this.name = 'Tony';
}
var fn = new Fn();
console.log( fn.name );  // Tony
console.log( global.name ); // undefined

可以看出:在构造函数中 this 指向的是它的实例,而不是全局 global 对象。

回归全局的 this

看完上面这三部分,我们再回过头来看一下全局的 this。说到全局中的 this,其实和 Nodejs 中的作用域有一些关系,如果对 Nodejs 中的作用域问题不太了解,请看下一篇文章:。

this.name = 'Tony';
console.log( module.exports ); // { name: Tony }
console.log( module.exports.name );  // Tony

所以:全局中的 this 指向的是 module.exports

怎么样,看完上面三部分,是不是对 Nodejs 的 this 又有了新的认识呢。


JavaScript 中 this 的使用

由于这一部分内容比较多,就将它单独整理出来了,请小伙伴移步至:浏览器 JavaScript 中的 this 的使用总结【最全总结,值得收藏】


Nodejs 中的 this 与浏览器 JavaScript 中的 this 的区别

上面说好要为大家整理一下 Nodejs 中的 this 与 Javascript 中的 this 的区别,那么,他来了。


希望以上内容可以帮助到大家。有任何问题欢迎讨论留言,不要忘记一键三连哦~。

各位 加油!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器使用Node.js代码需要借助一些工具,这里介绍两种常用的方案。 1. 使用Browserify Browserify是一个将Node.js模块编译成浏览器可识别的JavaScript文件的工具。使用Browserify,可以在浏览器直接使用Node.js模块。 首先,需要在Node.js安装Browserify: ``` npm install -g browserify ``` 然后,在Node.js编写代码,例如: ``` // mymodule.js module.exports = function(name) { console.log('Hello, ' + name + '!'); }; ``` 接着,在命令行使用Browserify将代码编译成浏览器可识别的文件: ``` browserify mymodule.js -o bundle.js ``` 最后,在HTML文件使用编译后的文件: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Node.js in Browser</title> </head> <body> <script src="bundle.js"></script> <script> var mymodule = require('./mymodule'); mymodule('World'); </script> </body> </html> ``` 这样,在浏览器打开HTML文件就可以看到控制台输出了`Hello, World!`。 2. 使用Webpack Webpack是一个可以打包JavaScript模块的工具。使用Webpack,可以将多个模块打包成一个文件,避免了在HTML文件引入多个JavaScript文件的问题。 首先,需要在Node.js安装Webpack: ``` npm install -g webpack ``` 然后,在Node.js编写代码,例如: ``` // mymodule.js module.exports = function(name) { console.log('Hello, ' + name + '!'); }; ``` 接着,在命令行使用Webpack将代码打包成浏览器可识别的文件: ``` webpack mymodule.js bundle.js ``` 最后,在HTML文件使用打包后的文件: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Node.js in Browser</title> </head> <body> <script src="bundle.js"></script> <script> var mymodule = require('./mymodule'); mymodule('World'); </script> </body> </html> ``` 这样,在浏览器打开HTML文件就可以看到控制台输出了`Hello, World!`。 总的来说,使用Browserify或Webpack可以在浏览器直接使用Node.js模块,但需要注意的是,在浏览器使用Node.js代码可能会有一些限制,例如无法访问操作系统的文件系统等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值