JavaScript parameter passing diagram tutorial
How to pass parameters? This time I try to re-understand parameter passing in JavaScript through a flow chart and two examples. I hope it can help everyone.
Borrowing a sentence from the Little Red Book:
The parameters of all functions in ECMAScript are passed by value
If the value is a simple type, then it is itself. If it is a reference type, the object passed is the address pointing to the object. Therefore, we can think that parameter passing is all value passing, so how to understand it specifically? Take a look at the example:
First example
var obj = {
n: 1
};
function foo(data) {
data = 2;
console.log(data); //2
}
foo(obj);
console.log(obj.n) // 1 Let’s not talk about the reason first. Let’s go through the process by drawing a picture. I believe we should be able to understand the parameter transfer. Remember that when passing reference types, you pass pointers! 
First execute var obj = {n: 1}; , which can be regarded as storing a pointer in the stack address 001 {n:1}'s pointer*p
The next step is to declare function foo At this time, the function execution context will be created. A variable object is generated in which the formal parameter data is declared. Since the function is not executed, the current value is undefined. We record the data address as 022. For more knowledge about variable objects, you can refer to Teacher Yu Yu’s JavaScript in-depth variable object. This article does not delve into the AO related aspects. You only need to know that the formal parameters have been created when declaring this function. 
Execute foo(obj) The parameters will be passed, and the *p stored in obj will be copied to the data at the 022 address, then At this time, they point to the same object. If one variable changes the value of n, the value of n in the other variable will also change, because it stores a pointer. 
Enter the function and execute it sequentially data = 2;At this time, the basic type value is stored at address 002, which is stored directly in the stack , thereby losing contact with {n:1} in the heap. Thus printing console.log(data) // 2 , and finally found that the initially opened {n:1} object has not been changed, so console.log(obj.n) // 1still prints 1.
Second example
var obj = {n:1};
(function(obj){
console.log(obj.n); //1
obj.n=3;
var obj = {n:2};
console.log(obj.n) //2
})(obj);
console.log(obj.n) //3 Overall, there is a problem of same-name coverage in this example. If you don’t quite understand the flow of how the code is executed, it may be a little confusing because of the same name, but that’s okay. As long as you follow the execution process in the flow chart of the previous example, you will be able to get the correct result. 
Declare variable obj, the address is 011, which stores the pointer to {n:1}*p
console.log(obj.n)The result is 1. 
obj.n=3. At this time, the formal parameter of the function, that is, obj in 022, changes the value of n in the object. value. 
The most critical step: var obj = {n:2}; Due to the relationship between object naming, it is possible Many children will be a little confused, but they can still analyze it in the same way. Since var is used, a new object is declared, and a new address is pushed into the stack as 033, in which a new pointer is stored. Points to the new object {n:2}. Therefore, the console.log(obj.n) result printed later should be the value of n in the newly opened object.
console.log(obj.n) //3Obviously, the global object has changed its value to 3 once.
Summary
So far we have gone through all the "mental journeys" of the variables involved in the above two pieces of code. Since the author is not a professional, the description of the stack and variable names in this picture may not be very accurate. Please feel free to tell me if there are any mistakes. The key point is that you can understand what I want to express. Generally speaking, the key point is that there is a copy of the value in the process of passing parameters. At the same time, if the assignment object is a reference type, a pointer is passed in. After understanding these two points and the analysis of the previous flow chart, I believe that we will encounter something similar again. problems can have a more consistent approach.
Related recommendations:
About vue-router to implement jump parameter transfer between components
HTML page jump and parameter transfer issues
Js parameter passing and variable copy
The above is the detailed content of JavaScript parameter passing diagram tutorial. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1654
14
1413
52
1306
25
1252
29
1225
24
Tutorial on how to use Dewu
Mar 21, 2024 pm 01:40 PM
Dewu APP is currently a very popular brand shopping software, but most users do not know how to use the functions in Dewu APP. The most detailed usage tutorial guide is compiled below. Next is the Dewuduo that the editor brings to users. A summary of function usage tutorials. Interested users can come and take a look! Tutorial on how to use Dewu [2024-03-20] How to use Dewu installment purchase [2024-03-20] How to obtain Dewu coupons [2024-03-20] How to find Dewu manual customer service [2024-03-20] How to check the pickup code of Dewu [2024-03-20] Where to find Dewu purchase [2024-03-20] How to open Dewu VIP [2024-03-20] How to apply for return or exchange of Dewu
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
In summer, you must try shooting a rainbow
Jul 21, 2024 pm 05:16 PM
After rain in summer, you can often see a beautiful and magical special weather scene - rainbow. This is also a rare scene that can be encountered in photography, and it is very photogenic. There are several conditions for a rainbow to appear: first, there are enough water droplets in the air, and second, the sun shines at a low angle. Therefore, it is easiest to see a rainbow in the afternoon after the rain has cleared up. However, the formation of a rainbow is greatly affected by weather, light and other conditions, so it generally only lasts for a short period of time, and the best viewing and shooting time is even shorter. So when you encounter a rainbow, how can you properly record it and photograph it with quality? 1. Look for rainbows. In addition to the conditions mentioned above, rainbows usually appear in the direction of sunlight, that is, if the sun shines from west to east, rainbows are more likely to appear in the east.
DisplayX (monitor testing software) tutorial
Mar 04, 2024 pm 04:00 PM
Testing a monitor when buying it is an essential part to avoid buying a damaged one. Today I will teach you how to use software to test the monitor. Method step 1. First, search and download the DisplayX software on this website, install it and open it, and you will see many detection methods provided to users. 2. The user clicks on the regular complete test. The first step is to test the brightness of the display. The user adjusts the display so that the boxes can be seen clearly. 3. Then click the mouse to enter the next link. If the monitor can distinguish each black and white area, it means the monitor is still good. 4. Click the left mouse button again, and you will see the grayscale test of the monitor. The smoother the color transition, the better the monitor. 5. In addition, in the displayx software we
What software is photoshopcs5? -photoshopcs5 usage tutorial
Mar 19, 2024 am 09:04 AM
PhotoshopCS is the abbreviation of Photoshop Creative Suite. It is a software produced by Adobe and is widely used in graphic design and image processing. As a novice learning PS, let me explain to you today what software photoshopcs5 is and how to use photoshopcs5. 1. What software is photoshop cs5? Adobe Photoshop CS5 Extended is ideal for professionals in film, video and multimedia fields, graphic and web designers who use 3D and animation, and professionals in engineering and scientific fields. Render a 3D image and merge it into a 2D composite image. Edit videos easily
Tutorial on how to turn off the payment sound on WeChat
Mar 26, 2024 am 08:30 AM
1. First open WeChat. 2. Click [+] in the upper right corner. 3. Click the QR code to collect payment. 4. Click the three small dots in the upper right corner. 5. Click to close the voice reminder for payment arrival.
PHP Tutorial: How to convert int type to string
Mar 27, 2024 pm 06:03 PM
PHP Tutorial: How to Convert Int Type to String In PHP, converting integer data to string is a common operation. This tutorial will introduce how to use PHP's built-in functions to convert the int type to a string, while providing specific code examples. Use cast: In PHP, you can use cast to convert integer data into a string. This method is very simple. You only need to add (string) before the integer data to convert it into a string. Below is a simple sample code
Experts teach you! The Correct Way to Cut Long Pictures on Huawei Mobile Phones
Mar 22, 2024 pm 12:21 PM
With the continuous development of smart phones, the functions of mobile phones have become more and more powerful, among which the function of taking long pictures has become one of the important functions used by many users in daily life. Long screenshots can help users save a long web page, conversation record or picture at one time for easy viewing and sharing. Among many mobile phone brands, Huawei mobile phones are also one of the brands highly respected by users, and their function of cropping long pictures is also highly praised. This article will introduce you to the correct method of taking long pictures on Huawei mobile phones, as well as some expert tips to help you make better use of Huawei mobile phones.
