JavaScript basics: function

Get into the habit of writing together! This is the 10th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Objects have no roots, and types have no shape.

Originally there is nothing, where is the dust?

When we were kids, crying was our best way to solve problems. Growing up, laughter was our weapon to face reality.

1. The memory model of JavaScript

The essence of JavaScript is an object. An object can contain multiple properties. The properties of an object can be divided into two types: literal and object, and objects are divided into two types: Object object and function object.

By data type:

• simple data type
  • number
  • string
  • boolean
• special data types
  • null
  • undefined
• complex data types
  • object
    • Object
    • function object

---

The two types of properties of literals and objects are stored differently in memory (similar to Java)

• Direct quantity: directly use two pieces of memory to save the attribute name and attribute value respectively

  

• Object: Three pieces of memory are required to store the attribute name, attribute address and attribute content respectively

  

For properties of object type, the property name knowledge points to the memory address where the object is saved, rather than the actual object being executed. The code is demonstrated as follows:

function F(){
    this.v = 1;
}
var f1 = new F();
var f2 = f1;
console.log(f2.v);
f2.v = 2;
console.log(f1.v);
f1 = null;
console.log(f2.v);

复制代码

Execution diagram of the code:

We have always said that JavaScript is a scripting language, interpreted and executed in the browser, and should not have its own memory model, but it is not the case. Regardless of compiled language or interpreted language, their variables, functions, objects and other data are stored in memory. When using, you need to find the corresponding specific content in the specified place through the variable name, and then perform the actual operation.

2. How functions are executed in JS

We have already touched the function before, and the function has only two parts: the data and the operation on the data. Data can be divided into external data and internal data . We will not explain the external data first. Here we mainly talk about functions. The internal data is divided into two parts : parameters and variables .

Parameters (formal parameters) : The parameters will be assigned a new value each time the function is executed;

Variables (local variables) : will be set to the same initial value each time;

• How are the variables and parameters of the function stored?

  The function will create a new parameter array and a variable array before each execution (of course, it can also be combined into an array, which is usually implemented by using a stack), and then set the parameters passed in the call to the parameter array, and the variable array Has the same content on every execution. Simple data will be stored directly in the array, while complex data, the array will only store the address, and the specific data will be stored in the heap.

  

  function paramTest(p1){
      var message = "Hello World";
      console.log(p1);
      for(var i in arguments){
          console.log(arguments[i]);
      }
  }
  //函数的调用
  paramTest("a","b","c");
  //输出结果为： a a b c
  复制代码

  We used Chrome's debugging. When the function is executed, the parameter p1 will be in the same position as the variable message and i method used in the function, that is, it will not distinguish whether it is a parameter or a variable when executing inside the function. In the JS function, an internal variable named is automatically created arguments, and then the addresses of all parameters are saved into it. arguments is similar to an array object, which can be used to obtain the parameters passed when the function is called.

  

  The paramTest method first prints the value of p1, and then traverses and prints the values ​​of all parameters in arguments. It can be seen that the value of parameter p1 is the same as the value of arguments[0], and the parameters of the function are stored in the arguments variable in order. The number of parameters passed in when calling a function can also be different from when it is defined, so there is no overloaded method for a function with the same name in JS.

• Function-level scope instead of block-level scope for function-defined variables

  function scopeTest(){
      if(true){
          var message = "Hello World";
      }
      console.log(message);
  }
  //函数的调用
  scopeTest();
  //输出结果为：Hello World
  复制代码

  The message here is defined in the if statement block, but it can still be called outside the if statement.

  When the method in JS is executed, all its own variables defined using var will be unified into the variable array introduced earlier, so in a function, all variables defined using var have the same status