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

Source: Internet
Author: User
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 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.