作者:aaaaaaaaaaa的美丽人生_556 | 来源:互联网 | 2023-05-18 09:11
在JavaScript中,有三种常见的链式结构:原型链(PrototypeChain),调用栈(CallStack),作用域链(ScopeChain).本文并不准备讲这些概念的基础知识,而是
在Javascript中,有三种常见的链式结构:原型链(Prototype Chain),调用栈(Call Stack),作用域链(Scope Chain).本文并不准备讲这些概念的基础知识,而是要给出如何遍历这三种链结构的方法,从而加深理解.
遍历原型链
在Javascript中,任何对象都有自己的原型链.原型链是由一系列对象加上最后的null组成的.如果还没掌握相关基础知识,可以看看我在MDN上翻译的继承与原型链一文.遍历函数如下:
function getPrototypeChain(obj) {
var protoChain = [];
while (obj = Object.getPrototypeOf(obj)) {
protoChain.push(obj);
}
protoChain.push(null);
return protoChain;
}
尝试执行一下
>getPrototypeChain(new String(""))
[String, Object, null] //依次是String.prototype,Object.prototype,null
>getPrototypeChain(function(){})
[function Empty() {}, Object, null] //依次是Function.prototype,Object.prototype,null
这个函数是在我以前写的一篇文章Javascript:我对原型链的理解中给出的.
遍历调用栈
在Javascript中,调用栈就是一系列的函数,表明当前函数是由哪些上层函数调用的.遍历函数如下:
function getCallStack() {
var stack = [];
var fun = getCallStack;
while (fun = fun.caller) {
stack.push(fun)
}
return stack
}
该函数用到了非标准的caller属性,不过主流浏览器都支持它.尝试执行一下:
function a() {
b()
}
function b() {
c()
}
function c() {
alert(getCallStack().map(function (fun) {
return fun.name //使用了非标准的name属性
}))
}
a() //弹出c,b,a
b() //弹出c,b
在调试工具中,我们可以直接使用console.trace()来打印出调用栈.在递归调用中,如果调用栈的长度过长,引擎就会抛出异常"too much recursion".到底多长是上限,不同的引擎不同的操作系统环境这个值是不同的.可以使用下面这个函数表达式获取到这个上限值:
> (function(i){try{(function m(){++i&&m()}())}catch(e){return i}})(0)
50761
遍历作用域链
作用域链是由一系列执行上下文(Execution context)中的活动对象(Activation object)加最后的全局对象组成的.活动对象是一个抽象实体(Abstract Entity),它是由引擎内部来管理的,并不能通过Javascript来访问.看不到,摸不着,所以这些知识就很难理解.
不过在Mozilla的引擎中,有一个魔法属性__parent__可以获取到函数执行时的活动对象.只是在SpiderMonkey中,该属性已经被删除了(Firefox 4开始).不过在Mozilla的另外一个Javascript引擎Rhino(Java编写)上,还可以使用这个特殊属性.遍历代码如下:
function getScopeChain(fun) {
var scopeChain = [];
while (fun = fun.__parent__) {
scopeChain.push(fun);
}
return scopeChain;
}
尝试执行一下:
var a = 0;
(function fun1() {
var a = 1;
(function fun2() {
var a = 2;
(function fun3() {
var a = 3;
getScopeChain(function () {}).map(function (obj) {
print("-----------------------------")
for(var i in obj){
print(i + ":" + (obj[i].name?obj[i].name:obj[i]))
}
})
})()
})()
})()
----------------------------- //函数fun3
arguments:[object Arguments]
a:3
fun3:fun3
----------------------------- //函数fun2
arguments:[object Arguments]
a:2
fun2:fun2
----------------------------- //函数fun1
arguments:[object Arguments]
a:1
fun1:fun1
----------------------------- //全局上下文
a:0
getScopeChain:getScopeChain
另外,如果是在Firefox的特权代码中(chrome上下文),还可以使用Debugger API来获取到各种引擎内部隐藏着的数据,Firebug中的以及Firefox自带的调试器,都是用这些API来实现的.