当前位置:网站首页>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:42 【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]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World