JavaScript中函数调用栈是怎么工作的

技术JavaScript中函数调用栈是怎么工作的这篇文章将为大家详细讲解有关JavaScript中函数调用栈是怎么工作的,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。合理地处理堆栈信息

本文将详细解释JavaScript中的函数调用堆栈是如何工作的。边肖觉得很实用,就分享给大家参考。希望你看完这篇文章能有所收获。

合理处理栈信息可以让你清除无用的数据,只关注有用的数据。同时,更好地理解Errors对象及其相关属性可以帮助您充分利用Errors。

00-1010在谈论错误之前,我们应该首先了解调用堆栈(of function) :的原理。

当一个函数被调用时,它被推到栈顶。函数完成后,它将从堆栈顶部移除。

栈的数据结构是后进先出,以后进先出著称。

例如:

functionc(){ console . log(' c ');

} function b(){ console . log(' b ');

c();

} functiona(){ console . log(' a ');

b();

}

(a );在上例中,当函数A运行时,它将被添加到堆栈的顶部。然后,在函数A内部调用函数B时,函数B会被推到栈顶。当在函数B内部调用函数C时,也会被推到栈顶。

当函数C运行时,栈包含a、b和C(按此顺序)。

函数C完成后从栈顶移除,然后函数调用的控制流返回到函数B,函数B完成后也从栈顶移除,然后函数调用的控制流返回到函数a. ***,函数A也从栈顶移除。

为了更好地演示demo中的堆栈行为,可以使用console.trace()在控制台上输出当前堆栈数据。同时,您应该从上到下读取输出堆栈数据。

functionc(){ console . log(' c ');console . trace();

} function b(){ console . log(' b ');

c();

} functiona(){ console . log(' a ');

b();

}

(a );在节点的REPL模式下运行上述代码将获得以下输出:

Traceatc(repl:3:9)

atb(repl:3:1)

ata(回复:3:1)

at repl :1:1///-for owfeelfeliteignoreaningbelowthispoint,the arenode ' sinternalstreatarunithicontextscript(VM . js .1:1///-for owfeelfeliteignoreaningbelowthispoint)

at Singthandlerswrap(VM . js :98:12)

atContextifyScript。script . runiniscontext(VM . js :24:12)

atreplserver . DefaultEval(repl . js :313:29)

atbound(

domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)

正如所看到的, 当从函数 c 中输出时, 堆栈中包含了函数 ab 以及c.

如果在函数 c 运行完成之后, 在函数 b 中输出当前的堆栈数据, 就会看到函数 c 已经从堆栈的顶部被移除, 此时堆栈中仅包括函数 a 和 b.

function c() {console.log('c');
}function b() {console.log('b');
    c();console.trace();
}function a() {console.log('a');
    b();
}

正如所看到的, 函数 c 运行完成之后, 已经从堆栈的顶部被移除.

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)

Error对象和错误处理

当程序运行出现错误时, 通常会抛出一个 Error 对象. Error 对象可以作为用户自定义错误对象继承的原型.

Error.prototype 对象包含如下属性:

  • constructor&ndash;指向实例的构造函数

  • message&ndash;错误信息

  • name&ndash;错误的名字(类型)

上述是 Error.prototype 的标准属性, 此外, 不同的运行环境都有其特定的属性. 在例如 Node, Firefox, Chrome, Edge, IE 10+, Opera 以及 Safari 6+ 这样的环境中, Error 对象具备 stack 属性, 该属性包含了错误的堆栈轨迹. 一个错误实例的堆栈轨迹包含了自构造函数之后的所有堆栈结构.

如果想了解更多关于 Error 对象的特定属性, 可以阅读 MDN 上的这篇文章.

为了抛出一个错误, 必须使用 throw 关键字. 为了 catch 一个抛出的错误, 必须使用 try...catch 包含可能跑出错误的代码. Catch的参数是被跑出的错误实例.

如 Java 一样, JavaScript 也允许在 try/catch 之后使用 finally 关键字. 在处理完错误之后, 可以在 finally语句块作一些清除工作.

在语法上, 你可以使用 try 语句块而其后不必跟着 catch 语句块, 但必须跟着 finally 语句块. 这意味着有三种不同的 try 语句形式:

  • try...catch

  • try...finally

  • try...catch...finally

Try语句内还可以在嵌入 try 语句:

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 语句:

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.');
    }
}

需要重点说明一下的是在抛出错误时, 可以只抛出一个简单值而不是 Error 对象. 尽管这看起来看酷并且是允许的, 但这并不是一个推荐的做法, 尤其是对于一些需要处理他人代码的库和框架的开发者, 因为没有标准可以参考, 也无法得知会从用户那里得到什么. 你不能信任用户会抛出 Error 对象, 因为他们可能不会这么做, 而是简单的抛出一个字符串或者数值. 这也意味着很难去处理堆栈信息和其它元信息.

例如:

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);

如果用户传递给函数 runWithoutThrowing 的参数抛出了一个错误对象, 上面的代码能正常捕获错误. 然后, 如果是抛出一个字符串, 就会碰到一些问题了:

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);

现在第二个 console.log 会输出undefined. 这看起来不是很重要, 但如果你需要确保 Error 对象有一个特定的属性或者用另一种方式来处理 Error 对象的特定属性(例如 Chai的throws断言的做法), 你就得做大量的工作来确保程序的正确运行.

同时, 如果抛出的不是 Error 对象, 也就获取不到 stack 属性.

Errors 也可以被作为其它对象, 你也不必抛出它们, 这也是为什么大多数回调函数把 Errors 作为***个参数的原因. 例如:

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 对象也可以用于 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);
    }
});

处理堆栈

这一节是针对支持 Error.captureStackTrace的运行环境, 例如Nodejs.

Error.captureStackTrace 的***个参数是 object, 第二个可选参数是一个 functionError.captureStackTrace 会捕获堆栈信息, 并在***个参数中创建 stack 属性来存储捕获到的堆栈信息. 如果提供了第二个参数, 该函数将作为堆栈调用的终点. 因此, 捕获到的堆栈信息将只显示该函数调用之前的信息.

用下面的两个demo来解释一下. ***个, 仅将捕获到的堆栈信息存于一个普通的对象之中:

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)

从上面的示例可以看出, 首先调用函数 a(被压入堆栈), 然后在 a 里面调用函数 b(被压入堆栈且在a之上), 然后在 b 中捕获到当前的堆栈信息, 并将其存储到 myObj 中. 所以, 在控制台输出的堆栈信息中仅包含了 a和 b 的调用信息.

现在, 我们给 Error.captureStackTrace 传递一个函数作为第二个参数, 看下输出信息:

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)

当将函数 b 作为第二个参数传给 Error.captureStackTraceFunction 时, 输出的堆栈就只包含了函数 b 调用之前的信息(尽管 Error.captureStackTraceFunction 是在函数 d 中调用的), 这也就是为什么只在控制台输出了 a. 这样处理方式的好处就是用来隐藏一些与用户无关的内部实现细节.

关于“JavaScript中函数调用栈是怎么工作的”这篇文章就分享到这里了,希望

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/73734.html

(0)

相关推荐

  • 怎么使用百度siteapp将PC网站转化成手机网站

    技术怎么使用百度siteapp将PC网站转化成手机网站本篇文章为大家展示了怎么使用百度siteapp将PC网站转化成手机网站,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。许多朋友

    攻略 2021年11月3日
  • 高处不胜寒的意思,“高处不胜寒”是什么意思

    技术高处不胜寒的意思,“高处不胜寒”是什么意思高处不胜寒的意思是高处不胜寒的意思:受不住高耸九天的寒冷。现在经常比喻一个人在技艺或修为上所达到的极高
    境界。境界越高,能够做伴的人就越少,越会感到孤独与寒冷。
    这句诗出自宋

    生活 2021年10月24日
  • servletservice方法的参数(如何将service注入到servlet)

    技术servlet.service()方法怎么调用这篇文章主要介绍“servlet.service()方法怎么调用”,在日常操作中,相信很多人在servlet.service()方法怎么调用问题上存在疑惑,小编查阅了各式

    攻略 2021年12月24日
  • 富文本编辑器 从word中复制内容带多张图片

    技术富文本编辑器 从word中复制内容带多张图片 富文本编辑器 从word中复制内容带多张图片?
    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存

    礼包 2021年11月10日
  • 什么是香港云服务器

    技术什么是香港云服务器在某种程度上,香港云服务器在使用体验上类似于物理服务器,只是它带有虚拟化。使用云服务器和物理服务器一样都是通过远程桌面或者ssh客户端进行连接来操作和管理服务器。另一方面,云服务器的架构方式不同于V

    礼包 2021年10月26日
  • 如何制作微信投票器,微信投票活动怎么做?

    技术如何制作微信投票器,微信投票活动怎么做?作为主办方都知道策划一场成功的微信投票活动是兼具宣传和增粉作用的,而且也是宣传范围广、活动成本低的一种方式,但是如何制作微信投票活动?微信投票活动怎么做以及微信投票活动的制作教

    测评 2021年12月10日