Primitive versus reference value types

There are two types of variables defined in the ECMAScript specification: primitive value type and reference value type. The immediate feature that distinguishes the two types is storage location. A primitive value type if a variable is a simple data segment stored directly on the stack, or a reference value type if it is an object stored on the heap.

In general, variables stored on the stack (primitive value types) are small and fixed in size. The only exception is String. Although it does not have a fixed size requirement, JS explicitly states that String is immutable. Since String is so stable and can be used frequently, it is stored on the stack. In other languages, strings can be modified under appropriate conditions, so they are stored in the heap.

Variables stored in the heap (reference value types) take up large space and have variable sizes. Therefore, if stored in the stack, it will affect the performance of the program. The reference value type also stores a pointer on the stack to the starting address of the entity in the heap. When the interpreter looks for a reference value, it first retrieves its address in the stack and then retrieves the entity from the heap.

Primitive value type

Primitive values are of the following data types: undefined, Boolean, number, string, and null. Primitive values are accessed by value, meaning that you can manipulate the actual value stored in a variable. Primitive value types have the following characteristics:

1. The value of the original value type is immutable

Here’s an example:

    var a = 'hello';
    a.toUpperCase(' '); // Actually returns a new string with another address console.log(a); // hello typeof('hello') // string
Copy the code

Suppose the address for saving the first line of the string is A and the address for saving the second line is B; Immutable string means: The second statement returns A new string HELLO, and then changes A from A to B. If the string can be changed, then the value of the address of A should be changed to HELLO, but this is prohibited in JS, so the string is unchangeable.

Hello is a string, so anything you do to variable A can’t change the value of Hello, just the address that variable A points to.

Here’s another chestnut:

    var person = 'Jhon';
    person.age = 22;
    person.method = function(){/ /... };

    console.log(person.age); // undefined the primitive value type has no attributes
    console.log(person.method); // undefined the primitive value type has no attributes
Copy the code

Javascript explicitly states that the values of undefined, Boolean, number, string and null are immutable. Immutable means that changing the original value type itself is prohibited in JS. That is, every time you create a new raw value, you create a new block of memory.

These two chestnuts show that the value of the original value type cannot be changed.

2. Comparison of original value types

  • A primitive value is a comparison of values, and a comparison of strings is that the lengths are equal and the characters of each index are equal.
  • Variables of primitive value types are stored on the stack.
  • Therefore, only stack memory is concerned in the comparison, not the heap memory address comparison
    var name = 'jozo';
    var city = 'guangzhou';
    var age = 22;
Copy the code

Reference types

In javascript, there are reference types, such as undefined, Boolean, number, string, and null. An object is a collection of properties and methods, that is, a reference type can have properties and methods, and an attribute can contain both primitive and reference types. Let’s look at some of the features of reference types:

1. The value of a reference type is mutable

We can add or remove properties and methods for a reference type, as in:

    var person = {};// Create a controller object -- reference type
    person.name = 'jozo';
    person.age = 22;
    person.sayName = function(){console.log(person.name); } person.sayName();// 'jozo'

    delete person.name; // Remove the name attribute of the person object
    person.sayName(); // undefined
Copy the code

The code above shows that reference types can have properties and methods that can change dynamically.

2. The value of a reference type is an object stored in both stack and heap memory

Javascript, unlike other languages, does not allow direct access to locations in memory, which means you cannot directly manipulate the memory space of an object. So what do we manipulate? In fact, it is the reference to the operation object, so the value of the reference type is accessed by reference.

To be precise, reference storage requires both the stack area of memory and the heap area (the heap area refers to the heap memory in memory), which holds the variable identifier and pointer to the object in the heap, or the object’s address in the heap.

Suppose there are the following objects:

    var person1 = {name:'jozo'};
    var person2 = {name:'xiaom'};
    var person3 = {name:'xiaoq'};
Copy the code

The situation of these three objects saved in memory is shown as follows:

3. Comparison of reference types is comparison of references

    var person1 = '{}';
    var person2 = '{}';
    console.log(person1 == person2); // true
Copy the code

When two values are of the same type, it is equivalent to using ===, so the output is true. Look at:

    var person1 = {};
    var person2 = {};
    console.log(person1 == person2); // false
Copy the code

You might already see the flaw. The top is comparing two strings, while the bottom is comparing two objects. Why are objects that look exactly the same not equal?

Person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap: person1 and person2 have the same address in the heap.

Simple assignment

When a basic type is assigned from one variable to another, a new value is created on that variable and then copied to the location allocated for the new variable:

    var a = 10;
    var b = a;

    a ++ ;
    console.log(a); / / 11
    console.log(b); / / 10
Copy the code

At this point, the value stored in A is 10. When a is used to initialize B, the value stored in B is also 10, but 10 in B and A are completely independent, and the value is only a copy of the value in A. After that, the two variables can participate in any operation without affecting each other.

That is, after an assignment of a primitive type, the two variables are unaffected by each other. When a basic type is assigned from one variable to another, a new value is created on that variable and then copied to the location allocated for the new variable:

That is, after an assignment of a primitive type, the two variables are unaffected by each other.

Object reference

When assigning a value of a reference type from one variable to another, a copy of the value of the object stored in the variable is also made into the space allocated for the new variable. As mentioned earlier in reference types, the object stored in a variable is the address of the object in heap memory, so instead of a simple assignment, the copy of the value is actually a pointer to an object stored in heap memory. So after the assignment, both variables hold the same object address, then the two variables refer to the same object. Therefore, changing any one of these variables affects each other:

    var a = {}; // a saves an instance of an empty object
    var b = a;  // Both a and b refer to the empty object

    a.name = 'jozo';
    console.log(a.name); // 'jozo'
    console.log(b.name); // 'jozo'

    b.age = 22;
    console.log(b.age);/ / 22
    console.log(a.age);/ / 22

    console.log(a == b);// true
Copy the code

Their relationship is shown below:

Introduction study address:

  • JS Advanced primitive type reference Type simple assignment object reference
  • JavaScript raw and reference values