這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中函數(shù)調(diào)用棧是怎么工作的,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、貴南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性?xún)r(jià)比高,為貴南等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
合理地處理堆棧信息能使你清除無(wú)用的數(shù)據(jù), 而只專(zhuān)注于有用的數(shù)據(jù). 同時(shí), 當(dāng)更好地理解 Errors
對(duì)象及其相關(guān)屬性之后, 能有助于你更充分地利用 Errors
.
在談?wù)撳e(cuò)誤之前, 先要了解下(函數(shù)的)調(diào)用棧的原理:
當(dāng)有一個(gè)函數(shù)被調(diào)用的時(shí)候, 它就被壓入到堆棧的頂部, 該函數(shù)運(yùn)行完成之后, 又會(huì)從堆棧的頂部被移除.
堆棧的數(shù)據(jù)結(jié)構(gòu)就是后進(jìn)先出, 以 LIFO (last in, first out) 著稱(chēng).
例如:
function c() {console.log('c'); }function b() {console.log('b'); c(); }function a() {console.log('a'); b(); } a();
在上述的示例中, 當(dāng)函數(shù) a
運(yùn)行時(shí), 其會(huì)被添加到堆棧的頂部. 然后, 當(dāng)函數(shù) b
在函數(shù) a
的內(nèi)部被調(diào)用時(shí), 函數(shù) b
會(huì)被壓入到堆棧的頂部. 當(dāng)函數(shù) c
在函數(shù) b
的內(nèi)部被調(diào)用時(shí)也會(huì)被壓入到堆棧的頂部.
當(dāng)函數(shù) c
運(yùn)行時(shí), 堆棧中就包含了 a
, b
和 c
(按此順序).
當(dāng)函數(shù) c
運(yùn)行完畢之后, 就會(huì)從堆棧的頂部被移除, 然后函數(shù)調(diào)用的控制流就回到函數(shù) b
. 函數(shù) b
運(yùn)行完之后, 也會(huì)從堆棧的頂部被移除, 然后函數(shù)調(diào)用的控制流就回到函數(shù) a
. ***, 函數(shù) a
運(yùn)行完成之后也會(huì)從堆棧的頂部被移除.
為了更好地在demo中演示堆棧的行為, 可以使用 console.trace()
在控制臺(tái)輸出當(dāng)前的堆棧數(shù)據(jù). 同時(shí), 你要以從上至下的順序閱讀輸出的堆棧數(shù)據(jù).
function c() {console.log('c');console.trace(); }function b() {console.log('b'); c(); }function a() {console.log('a'); b(); } a();
在 Node 的 REPL 模式中運(yùn)行上述代碼會(huì)得到如下輸出:
Traceat c (repl:3:9) at b (repl:3:1) at a (repl:3:1) at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internalsat realRunInThisContextScript (vm.js:22:35) at sigintHandlersWrap (vm.js:98:12) at ContextifyScript.Script.runInThisContext (vm.js:24:12) at REPLServer.defaultEval (repl.js:313:29) at bound (domain.js:280:14) at REPLServer.runBound [as eval] (domain.js:293:12)
正如所看到的, 當(dāng)從函數(shù) c
中輸出時(shí), 堆棧中包含了函數(shù) a
, b
以及c
.
如果在函數(shù) c
運(yùn)行完成之后, 在函數(shù) b
中輸出當(dāng)前的堆棧數(shù)據(jù), 就會(huì)看到函數(shù) c
已經(jīng)從堆棧的頂部被移除, 此時(shí)堆棧中僅包括函數(shù) a
和 b
.
function c() {console.log('c'); }function b() {console.log('b'); c();console.trace(); }function a() {console.log('a'); b(); }
正如所看到的, 函數(shù) c
運(yùn)行完成之后, 已經(jīng)從堆棧的頂部被移除.
Trace at b (repl:4:9) at a (repl:3:1) at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internalsat realRunInThisContextScript (vm.js:22:35) at sigintHandlersWrap (vm.js:98:12) at ContextifyScript.Script.runInThisContext (vm.js:24:12) at REPLServer.defaultEval (repl.js:313:29) at bound (domain.js:280:14) at REPLServer.runBound [as eval] (domain.js:293:12) at REPLServer.onLine (repl.js:513:10)
當(dāng)程序運(yùn)行出現(xiàn)錯(cuò)誤時(shí), 通常會(huì)拋出一個(gè) Error
對(duì)象. Error
對(duì)象可以作為用戶(hù)自定義錯(cuò)誤對(duì)象繼承的原型.
Error.prototype
對(duì)象包含如下屬性:
constructor
–指向?qū)嵗臉?gòu)造函數(shù)
message
–錯(cuò)誤信息
name
–錯(cuò)誤的名字(類(lèi)型)
上述是 Error.prototype
的標(biāo)準(zhǔn)屬性, 此外, 不同的運(yùn)行環(huán)境都有其特定的屬性. 在例如 Node, Firefox, Chrome, Edge, IE 10+, Opera 以及 Safari 6+ 這樣的環(huán)境中, Error
對(duì)象具備 stack
屬性, 該屬性包含了錯(cuò)誤的堆棧軌跡. 一個(gè)錯(cuò)誤實(shí)例的堆棧軌跡包含了自構(gòu)造函數(shù)之后的所有堆棧結(jié)構(gòu).
如果想了解更多關(guān)于 Error
對(duì)象的特定屬性, 可以閱讀 MDN 上的這篇文章.
為了拋出一個(gè)錯(cuò)誤, 必須使用 throw
關(guān)鍵字. 為了 catch
一個(gè)拋出的錯(cuò)誤, 必須使用 try...catch
包含可能跑出錯(cuò)誤的代碼. Catch的參數(shù)是被跑出的錯(cuò)誤實(shí)例.
如 Java 一樣, JavaScript 也允許在 try/catch
之后使用 finally
關(guān)鍵字. 在處理完錯(cuò)誤之后, 可以在 finally
語(yǔ)句塊作一些清除工作.
在語(yǔ)法上, 你可以使用 try
語(yǔ)句塊而其后不必跟著 catch
語(yǔ)句塊, 但必須跟著 finally
語(yǔ)句塊. 這意味著有三種不同的 try
語(yǔ)句形式:
try...catch
try...finally
try...catch...finally
Try語(yǔ)句內(nèi)還可以在嵌入 try
語(yǔ)句:
try {try {throw new Error('Nested error.'); // The error thrown here will be caught by its own `catch` clause} catch (nestedErr) {console.log('Nested catch'); // This runs} } catch (err) {console.log('This will not run.'); }
也可以在 catch
或 finally
中嵌入 try
語(yǔ)句:
try {throw new Error('First error'); } catch (err) {console.log('First catch running');try {throw new Error('Second error'); } catch (nestedErr) {console.log('Second catch running.'); } }
try {console.log('The try block is running...'); } finally {try {throw new Error('Error inside finally.'); } catch (err) {console.log('Caught an error inside the finally block.'); } }
需要重點(diǎn)說(shuō)明一下的是在拋出錯(cuò)誤時(shí), 可以只拋出一個(gè)簡(jiǎn)單值而不是 Error
對(duì)象. 盡管這看起來(lái)看酷并且是允許的, 但這并不是一個(gè)推薦的做法, 尤其是對(duì)于一些需要處理他人代碼的庫(kù)和框架的開(kāi)發(fā)者, 因?yàn)闆](méi)有標(biāo)準(zhǔn)可以參考, 也無(wú)法得知會(huì)從用戶(hù)那里得到什么. 你不能信任用戶(hù)會(huì)拋出 Error
對(duì)象, 因?yàn)樗麄兛赡懿粫?huì)這么做, 而是簡(jiǎn)單的拋出一個(gè)字符串或者數(shù)值. 這也意味著很難去處理堆棧信息和其它元信息.
例如:
function runWithoutThrowing(func) {try { func(); } catch (e) {console.log('There was an error, but I will not throw it.');console.log('The error\'s message was: ' + e.message) } }function funcThatThrowsError() {throw new TypeError('I am a TypeError.'); } runWithoutThrowing(funcThatThrowsError);
如果用戶(hù)傳遞給函數(shù) runWithoutThrowing
的參數(shù)拋出了一個(gè)錯(cuò)誤對(duì)象, 上面的代碼能正常捕獲錯(cuò)誤. 然后, 如果是拋出一個(gè)字符串, 就會(huì)碰到一些問(wèn)題了:
function runWithoutThrowing(func) {try { func(); } catch (e) {console.log('There was an error, but I will not throw it.');console.log('The error\'s message was: ' + e.message) } }function funcThatThrowsString() {throw 'I am a String.'; } runWithoutThrowing(funcThatThrowsString);
現(xiàn)在第二個(gè) console.log
會(huì)輸出undefined. 這看起來(lái)不是很重要, 但如果你需要確保 Error
對(duì)象有一個(gè)特定的屬性或者用另一種方式來(lái)處理 Error
對(duì)象的特定屬性(例如 Chai的throws斷言的做法), 你就得做大量的工作來(lái)確保程序的正確運(yùn)行.
同時(shí), 如果拋出的不是 Error
對(duì)象, 也就獲取不到 stack
屬性.
Errors 也可以被作為其它對(duì)象, 你也不必拋出它們, 這也是為什么大多數(shù)回調(diào)函數(shù)把 Errors 作為***個(gè)參數(shù)的原因. 例如:
const fs = require('fs'); fs.readdir('/example/i-do-not-exist', function callback(err, dirs) {if (err instanceof Error) {// `readdir` will throw an error because that directory does not exist// We will now be able to use the error object passed by it in our callback functionconsole.log('Error Message: ' + err.message);console.log('See? We can use Errors without using try statements.'); } else {console.log(dirs); } });
***, Error
對(duì)象也可以用于 rejected promise, 這使得很容易處理 rejected promise:
new Promise(function(resolve, reject) { reject(new Error('The promise was rejected.')); }).then(function() {console.log('I am an error.'); }).catch(function(err) {if (err instanceof Error) {console.log('The promise was rejected with an error.');console.log('Error Message: ' + err.message); } });
這一節(jié)是針對(duì)支持 Error.captureStackTrace
的運(yùn)行環(huán)境, 例如Nodejs.
Error.captureStackTrace
的***個(gè)參數(shù)是 object
, 第二個(gè)可選參數(shù)是一個(gè) function
. Error.captureStackTrace
會(huì)捕獲堆棧信息, 并在***個(gè)參數(shù)中創(chuàng)建 stack
屬性來(lái)存儲(chǔ)捕獲到的堆棧信息. 如果提供了第二個(gè)參數(shù), 該函數(shù)將作為堆棧調(diào)用的終點(diǎn). 因此, 捕獲到的堆棧信息將只顯示該函數(shù)調(diào)用之前的信息.
用下面的兩個(gè)demo來(lái)解釋一下. ***個(gè), 僅將捕獲到的堆棧信息存于一個(gè)普通的對(duì)象之中:
const myObj = {};function c() { }function b() {// Here we will store the current stack trace into myObjError.captureStackTrace(myObj); c(); }function a() { b(); }// First we will call these functionsa();// Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);// This will print the following stack to the console:// at b (repl:3:7) <-- Since it was called inside B, the B call is the last entry in the stack// at a (repl:2:1)// at repl:1:1 <-- Node internals below this line// at realRunInThisContextScript (vm.js:22:35)// at sigintHandlersWrap (vm.js:98:12)// at ContextifyScript.Script.runInThisContext (vm.js:24:12)// at REPLServer.defaultEval (repl.js:313:29)// at bound (domain.js:280:14)// at REPLServer.runBound [as eval] (domain.js:293:12)// at REPLServer.onLine (repl.js:513:10)
從上面的示例可以看出, 首先調(diào)用函數(shù) a
(被壓入堆棧), 然后在 a
里面調(diào)用函數(shù) b
(被壓入堆棧且在a
之上), 然后在 b
中捕獲到當(dāng)前的堆棧信息, 并將其存儲(chǔ)到 myObj
中. 所以, 在控制臺(tái)輸出的堆棧信息中僅包含了 a
和 b
的調(diào)用信息.
現(xiàn)在, 我們給 Error.captureStackTrace
傳遞一個(gè)函數(shù)作為第二個(gè)參數(shù), 看下輸出信息:
const myObj = {};function d() {// Here we will store the current stack trace into myObj// This time we will hide all the frames after `b` and `b` itselfError.captureStackTrace(myObj, b); }function c() { d(); }function b() { c(); }function a() { b(); }// First we will call these functionsa();// Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);// This will print the following stack to the console:// at a (repl:2:1) <-- As you can see here we only get frames before `b` was called// at repl:1:1 <-- Node internals below this line// at realRunInThisContextScript (vm.js:22:35)// at sigintHandlersWrap (vm.js:98:12)// at ContextifyScript.Script.runInThisContext (vm.js:24:12)// at REPLServer.defaultEval (repl.js:313:29)// at bound (domain.js:280:14)// at REPLServer.runBound [as eval] (domain.js:293:12)// at REPLServer.onLine (repl.js:513:10)// at emitOne (events.js:101:20)
當(dāng)將函數(shù) b
作為第二個(gè)參數(shù)傳給 Error.captureStackTraceFunction
時(shí), 輸出的堆棧就只包含了函數(shù) b
調(diào)用之前的信息(盡管 Error.captureStackTraceFunction
是在函數(shù) d
中調(diào)用的), 這也就是為什么只在控制臺(tái)輸出了 a
. 這樣處理方式的好處就是用來(lái)隱藏一些與用戶(hù)無(wú)關(guān)的內(nèi)部實(shí)現(xiàn)細(xì)節(jié).
關(guān)于“JavaScript中函數(shù)調(diào)用棧是怎么工作的”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
文章題目:JavaScript中函數(shù)調(diào)用棧是怎么工作的
文章位置:http://bm7419.com/article30/geejso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、商城網(wǎng)站、網(wǎng)站排名、App開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)