Javascript: traversing prototype chain, calling stack, and scope chain javascript: traversing prototype chain, calling stack, scope chain javascript: My Understanding of prototype chain

Javascript: traversing the prototype chain, calling stack, and scope chain

In JavaScript, there are three common chain structures: prototype chain, call stack (Call StackScope chain. This article does not want to talk about the basic knowledge of these concepts, but rather shows how to traverse the three chain structures to deepen understanding.

Traverse prototype chain

In JavaScript, any object has its own prototype chain. A prototype chain consists of a series of objects and the final null. if you have not mastered the basic knowledge, you can refer to my article on the inheritance and prototype chain translation on MDN. the traversal function is as follows:

 
FunctionGetprototypechain (OBJ ){VaRProtochain =[];While(OBJ =Object. getprototypeof (OBJ) {protochain. Push (OBJ);} protochain. Push (Null);ReturnProtochain ;}
 

Run

> Getprototypechain (NewString ("") [String, object,Null]//String. prototype, object. prototype, null> Getprototypechain (Function(){})[FunctionEmpty () {}, object,Null]//Function. prototype, object. prototype, null
 

This function was written before.ArticleJavascript: What I gave in my understanding of the prototype chain.

Traverse call stack

In JavaScript, the call stack is a series of functions, indicating which upper-layer functions are called by the current function. The traversal function is as follows:

 
FunctionGetcallstack (){VaRStack =[];VaRFun =Getcallstack;While(Fun =Fun. Caller) {stack. Push (fun )}ReturnStack}
 

This function uses a non-standard caller attribute, but all mainstream browsers support it. Try to execute it:

FunctionA () {B ()}FunctionB () {C ()}FunctionC () {alert (getcallstack (). Map (Function(Fun ){ReturnFun. Name//The non-standard name attribute is used.})} ()//C, B,
 

 
B ()//C, B
 

In the debugging tool, we can directly use the console. trace () to print the call stack. in recursive calls, if the call stack length is too long, the engine will throw an exception "too much recursion ". how long is the upper limit? The value varies with the operating system environment of different engines. you can use the following function expression to obtain the upper limit:

 
> (Function(I ){Try{(FunctionM () {++ I & M ()}())}Catch(E ){ReturnI }}) (0)50761
 

Traverse the scope chain

The scope chain is composed of a series of activation objects in the execution context and the final global objects. an activity object is an abstract entity, which is managed by the engine and cannot be accessed through JavaScript. it is hard to understand this knowledge.

However, in the Mozilla engine, the magic attribute _ parent _ can be used to obtain the activity objects during function execution. only in spidermonkey, this attribute has been deleted (beginning with Firefox 4 ). however, this special attribute can be used in another JavaScript Engine rhino (written in Java) of Mozilla. traversalCodeAs follows:

 
FunctionGetscopechain (fun ){VaRScopechain =[];While(Fun =Fun. _ parent _) {scopechain. Push (fun );
}ReturnScopechain;
}
 

Run the following command:

 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]) }}) ()}) () ----------------------------- //  Function fun3  Arguments: [object arguments]: 3 Fun3: fun3 ----------------------------- //  Function fun2  Arguments: [object arguments]: 2 Fun2: fun2 ----------------------------- //  Function fun1  Arguments: [object arguments]: 1 Fun1: fun1 ----------------------------- //  Global Context A: 0 Getscopechain: getscopechain 

In JavaScript, there are three common chain structures: prototype chain, call stack (Call StackScope chain. This article does not want to talk about the basic knowledge of these concepts, but rather shows how to traverse the three chain structures to deepen understanding.

Traverse prototype chain

In JavaScript, any object has its own prototype chain. A prototype chain consists of a series of objects and the final null. if you have not mastered the basic knowledge, you can refer to my article on the inheritance and prototype chain translation on MDN. the traversal function is as follows:

FunctionGetprototypechain (OBJ ){VaRProtochain =[];While(OBJ =Object. getprototypeof (OBJ) {protochain. Push (OBJ);} protochain. Push (Null);ReturnProtochain ;}
 

Run

 
> Getprototypechain (NewString ("") [String, object,Null]//String. prototype, object. prototype, null> Getprototypechain (Function(){})[FunctionEmpty () {}, object,Null]//Function. prototype, object. prototype, null
 

This function is provided in my previous article javascript: My Understanding of the prototype chain.

Traverse call stack

In JavaScript, the call stack is a series of functions, indicating which upper-layer functions are called by the current function. The traversal function is as follows:

FunctionGetcallstack (){VaRStack =[];VaRFun =Getcallstack;While(Fun =Fun. Caller) {stack. Push (fun )}ReturnStack}
 

This function uses a non-standard caller attribute, but all mainstream browsers support it. Try to execute it:

 
FunctionA () {B ()}FunctionB () {C ()}FunctionC () {alert (getcallstack (). Map (Function(Fun ){ReturnFun. Name//The non-standard name attribute is used.})} ()//C, B,
 

 
B ()//C, B
 

In the debugging tool, we can directly use the console. trace () to print the call stack. in recursive calls, if the call stack length is too long, the engine will throw an exception "too much recursion ". how long is the upper limit? The value varies with the operating system environment of different engines. you can use the following function expression to obtain the upper limit:

> (Function(I ){Try{(FunctionM () {++ I & M ()}())}Catch(E ){ReturnI }}) (0)50761
 

Traverse the scope chain

The scope chain is composed of a series of activation objects in the execution context and the final global objects. an activity object is an abstract entity, which is managed by the engine and cannot be accessed through JavaScript. it is hard to understand this knowledge.

However, in the Mozilla engine, the magic attribute _ parent _ can be used to obtain the activity objects during function execution. only in spidermonkey, this attribute has been deleted (beginning with Firefox 4 ). however, this special attribute can be used in another JavaScript Engine rhino (written in Java) of Mozilla. the traversal code is as follows:

 
FunctionGetscopechain (fun ){VaRScopechain =[];While(Fun =Fun. _ parent _) {scopechain. Push (fun );
}ReturnScopechain;
}
 

Run the following command:

 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]) }}) ()}) () ----------------------------- //  Function fun3  Arguments: [object arguments]: 3 Fun3: fun3 ----------------------------- //  Function fun2  Arguments: [object arguments]: 2 Fun2: fun2 ----------------------------- //  Function fun1  Arguments: [object arguments]: 1 Fun1: fun1 ----------------------------- //  Global Context A: 0 Getscopechain: getscopechain