NodeJS和瀏覽器中this關(guān)鍵字的不同之處
前言
學(xué)習(xí)過(guò)JavaScript的人肯定清楚 處在不同環(huán)境下this的指向問(wèn)題。那么看下面的代碼
var type = 1
function toWhere(){
this.type = 2;
}
toWhere();
console.log(type)
你們肯定會(huì)這樣想：
這里聲明了一個(gè)全局變量type，當(dāng)執(zhí)行type=1的時(shí)候，賦值為1。之后toWhere函數(shù)調(diào)用，看到函數(shù)中有this 就去判斷this的指向，這里很清楚，this指向了window，this.type=2執(zhí)行后，全局變量type就賦值為2了。
最后打印全局變量type 結(jié)果很明顯是2。
打開(kāi)瀏覽器驗(yàn)證一下，沒(méi)問(wèn)題 一個(gè)2明晃晃的在那里。
那么就這樣結(jié)束了嗎？
如果你學(xué)過(guò)node，現(xiàn)在用nodejs重新執(zhí)行一下以上代碼，你就發(fā)現(xiàn)了不一樣的地方。
你現(xiàn)在發(fā)現(xiàn) 那個(gè)1怎么這么不對(duì)勁呢，不是等于2嗎？
相關(guān)調(diào)試
從以上的例子可以看到，相同的js代碼在瀏覽器中運(yùn)行和在nodejs中運(yùn)行結(jié)果變得不一樣了。
這其實(shí)是因?yàn)閠his指向問(wèn)題，但是這個(gè)指向和我們通常認(rèn)知中的指向是不一樣的。這個(gè)指向問(wèn)題是由于node工作原理造成的
var type = 1
function toWhere() {
this.type = 2
console.log("函數(shù)中this指向",this)
}
toWhere()
console.log(type)
console.log("全局中this",this)
1、打印瀏覽器中的this
函數(shù)中this指向了window，而全局的this也是指向了window
2、打印nodeJs中的this
發(fā)現(xiàn)了吧。函數(shù)中的this指向了Object [global]。
當(dāng)我們給函數(shù)this賦值時(shí)，其實(shí)它掛靠在global對(duì)象上。所以它不會(huì)去改變?nèi)种衪his的值
Node原理解析
那么看看為什么會(huì)這樣
首先我們得去了解nodeJs的工作原理
瀏覽器直接在全局范圍執(zhí)行的腳本文件
而在Node中，Node將代碼隱藏在一個(gè)立即被調(diào)用的匿名函數(shù)，你可以使用global來(lái)訪問(wèn)全局范圍
在之前的解釋中，我們會(huì)發(fā)現(xiàn)在外部打印的一個(gè)this，它指向了一個(gè)空對(duì)象{}，其實(shí)在node中運(yùn)行的任何文件其實(shí)都被包裹在一個(gè){}中，所以腳本文件都在自己的閉包中執(zhí)行, 類似于下面這樣
{
(function(){
//腳本文件
})()
}
在之前的例子中，函數(shù)的外面this指向的是一個(gè)空對(duì)象{}，而在函數(shù)內(nèi)部的this沒(méi)有指定的執(zhí)行上下文，所以它指向了global對(duì)象-（可以訪問(wèn)該匿名函數(shù)執(zhí)行上下文的全局范圍）
總結(jié)
到此這篇關(guān)于NodeJS和瀏覽器中this關(guān)鍵字不同之處的文章就介紹到這了,更多相關(guān)NodeJS 瀏覽器中this關(guān)鍵字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Mongoose實(shí)現(xiàn)虛擬字段查詢的方法詳解
這篇文章主要給大家介紹了關(guān)于Mongoose實(shí)現(xiàn)虛擬字段查詢的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
在項(xiàng)目開(kāi)發(fā)過(guò)程中,不同項(xiàng)目使用的node版本不同,有時(shí)會(huì)因?yàn)閚ode版本過(guò)高或太低,導(dǎo)致報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于安裝多個(gè)node版本的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
nodejs開(kāi)發(fā)環(huán)境配置與使用
經(jīng)過(guò)幾個(gè)星期的nodejs學(xué)習(xí)，從開(kāi)始的小白到現(xiàn)在漸漸得熟悉，走過(guò)來(lái)也才算明白，現(xiàn)在已經(jīng)入門也掌握了相關(guān)的學(xué)習(xí)方法，今天開(kāi)始記錄下自己學(xué)習(xí)的過(guò)程，以便日后查看。2014-11-11
如何自動(dòng)化部署項(xiàng)目？折騰服務(wù)器之旅~
這篇文章主要介紹了自動(dòng)化部署項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
nodejs中實(shí)現(xiàn)用戶注冊(cè)路由功能
這篇文章主要介紹了nodejs中實(shí)現(xiàn)用戶注冊(cè)路由功能的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Node.JS中的模塊、exports和module講解,模塊分為兩類一類是核心模塊一類是文件模塊，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
Pycharm配置Node.js運(yùn)行js代碼詳細(xì)過(guò)程
在PyCharm中寫JavaScript代碼并進(jìn)行調(diào)試是非常方便的,但是有些用戶可能對(duì)如何在PyCharm中準(zhǔn)確地運(yùn)行JavaScript代碼感到困惑,這篇文章主要給大家介紹了關(guān)于Pycharm配置Node.js運(yùn)行js代碼的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了node.js中的fs.fsync方法使用說(shuō)明,本文介紹了fs.fsync的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了OpenSCA技術(shù)原理npm依賴示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
nodejs實(shí)現(xiàn)日志讀取、日志查找及日志刷新的方法分析
這篇文章主要介紹了nodejs實(shí)現(xiàn)日志讀取、日志查找及日志刷新的方法,涉及nodejs日期時(shí)間運(yùn)算、轉(zhuǎn)換及日志讀寫等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05