当前位置:网站首页>Using an example to understand the underlying processing mechanism of JS function
Using an example to understand the underlying processing mechanism of JS function
2020-11-06 20:53:00 【mttwind】
Personal notes , Please correct me if there is any mistake
Take the following code as an example , Run the parsing line by line
var x = [12, 23];
function fn(y) {
y[0] = 100;
y = [100];
y[1] = 200;
console.log(y);
}
fn(x);
console.log(x);
var x = [12, 23];
Run the following
- Open up heap memory , Create array values , Suppose the address of the heap memory is 0x000000
- Declare variables
x
- assignment , the
x
Address to heap memory 0x000000
next
function fn(y) {
y[0] = 100;
y = [100];
y[1] = 200;
console.log(y);
}
Run the following
The above code is the process of creating a function . It's similar to creating a variable :
- They all declare a variable to store the value
- Same steps : The first step is to create a heap memory , There are functions in it , This heap has an address , Then assign the address to the variable
- Statement : In a similar way, function names are variables , When we declare functions
function fn(y){...}
when , It's equivalent to declaring a variable , It's just that the value is a function . Be similar tovar fn = function (y){...}
Function expression for . Finally, assign a function as a value to a variable or something else
So create a function , The detailed execution order is as follows
- Start with a heap of memory , Store the value of the function ( Suppose the address is 0x000001)
- The value of the object is in heap memory , It stores its key value pairs
- The value of the function is in heap memory , It's stored in its code , And it's stored in the form of strings
- When you create a function , It's a statement of its Scope (scope),scope The value is The context in which the function is currently created , That is, in which context , The scope is who
- Then declare the variable
fn
, And point to the heap memory address ( Assuming that 0x000001)
To perform a function
fn(x);
Run the following ( To perform a function )
- Function execution time , The value is always passed on ,
fn(x)
The message isx
Value , namelyx
Point to the 0x000000 Heap memory address fn(0x000000)
Form a brand new Private context EC(fn)- In the new context of function formation , Generate a private variable object AO, Used to store variables declared in the current context (Active Object The object of activity , abbreviation AO, A variable object , Similar to global variables in the global context )
- What happened before the internal code was executed
- Initialize scope chain scope-chain <EC(fn1),EC(G)>, At both ends of the chain are < Your current private context , The scope of the function ( The context in which the function was created )>, The right side of the chain is also called the current context ' Superior context '
- initialization this
- initialization argument
- In the current context , Declare a parameter variable , And assign the value of the argument passed to it
- Variable Promotion
- Stack execution code
- Release from the stack
Function stack execution code detailed steps
Let's move on to the top 5 Step by step
Put the previously created function , The code string stored in heap memory is taken out and converted into line by line execution of code .
If a variable is encountered during code execution in private context , First of all, see if it's for your own ' Private variables ', If it is ' private ' Of , Then operate your own , There is no necessary relationship with the outside world , If it's not private , Based on Scope chain , To whom Superior context Search for , See if it is private in the context of the superior , If it's not , Continue looking up ...... Always find EC(G) Global context until , We call this search process Scope chain lookup mechanism therefore
y[0] = 100
y = [100]
y[1] = 200
It's done like this :
-
y[0] = 100
,y
Now the memory address stored is 0x000000, So change the value under this address : -
y = [100]
, New object values appear , So we need to open up new heap memory 0x000002, Create values , assignment -
y[1] = 200
, take 0x000002 Modify the value of the object corresponding to the address -
console.log(y);
Thisy
Namely 0x000002 Corresponding value[100,200]
It operates on private variablesy
fn
This completes the function .
And then execute the outside console.log(x);
, At this time x In the global variable object x, The corresponding address is 0x000000, So output directly [100,23]
If fn
After execution , Continue with other functions , It's going through the same process . Form a new context , Stack execution ... If there are so many functions , It's going to keep going up the stack , It's going to take up more and more memory . So in order to optimize , Browsers will default to many recycling mechanisms
Results and overall process
result
General flow chart
Other explanatory points
js Context classification
js Context ( Which area is executed ) classification
- Global context EC(G)
- Private context formed by function execution
- Block level private context
What are private variables
Private variables are variables declared by private context , contain
- Shape parameter
- Variables declared at the time of code execution
var
/let
/const
/function
... Note the difference from global variables , Not directly related , But there may be some indirect relationship , For example, the following code under the global variablex
The value of is 0x000000, By function , take 0x000000 Passed to private variablesy
,y
It's also 0x000000
function fn(y) {
y[0] = 100;
y = [100];
y[1] = 200;
console.log(y);
}
fn(x)
版权声明
本文为[mttwind]所创,转载请带上原文链接,感谢
边栏推荐
- What course of artificial intelligence? Will it replace human work?
- Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
- hdu3974 Assign the task線段樹 dfs序
- Elasticsearch Part 6: aggregate statistical query
- Use modelarts quickly, zero base white can also play AI!
- ES6 learning notes (4): easy to understand the new grammar of ES6
- (1) ASP.NET Introduction to core3.1 Ocelot
- 2020年数据库技术大会助力技术提升
- What is alicloud's experience of sweeping goods for 100 yuan?
- GUI engine evaluation index
猜你喜欢
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
Pn8162 20W PD fast charging chip, PD fast charging charger scheme
【学习】接口测试用例编写和测试关注点
ES6 learning notes (4): easy to understand the new grammar of ES6
How to play sortable JS vuedraggable to realize nested drag function of forms
What are manufacturing and new automation technologies?
FastThreadLocal 是什么鬼?吊打 ThreadLocal 的存在!!
How to understand Python iterators and generators?
A small goal in 2019 to become a blog expert of CSDN
理解格式化原理
随机推荐
Analysis of serilog source code -- how to use it
ORA-02292: 违反完整约束条件 (MIDBJDEV2.SYS_C0020757) - 已找到子记录
理解格式化原理
Elasticsearch Part 6: aggregate statistical query
To teach you to easily understand the basic usage of Vue codemirror: mainly to achieve code editing, verification prompt, code formatting
How to understand Python iterators and generators?
Some operations kept in mind by the front end foundation GitHub warehouse management
python100例項
How to hide part of barcode text in barcode generation software
How does filecoin's economic model and future value support the price of fil currency breaking through thousands
Swagger 3.0 brushes the screen every day. Does it really smell good?
Basic usage of GDB debugging
游戏主题音乐对游戏的作用
What knowledge do Python automated testing learn?
常用SQL语句总结
Diamond standard
事务的本质和死锁的原理
Application of restful API based on MVC
MongoDB与SQL常用语法对应表
StickEngine-架构11-消息队列(MessageQueue)