ECMAScript variables have two different data types:Basic types, reference types. There are also other names, for examplePrimitive types and object types，Types with methods and types without methods, it can also be divided intoMutable types and immutable types, in fact these names are all based on these twoType characteristicsto name them, everyone can call them whatever they like o(╯□╰)o .

1. Basic types

The basic data types are: undefined, boolean, number, string, null. Basic types are accessed by value, meaning you can operate on the actual value stored in the variable. Basic types have the following characteristics:

1. The values of basic types are immutable:

No method can change the value of a basic type, for example a string:

var name = 'jozo';
name.toUpperCase(); // 输出 'JOZO'
console.log(name); // 输出  'jozo'

You will find that the original name has not changed; instead, a new string is returned after calling the toUpperCase() method.
Let's look at another one:

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

console.log(person.age); // undefined
console.log(person.method); // undefined

From the above code, we can see that we cannot add properties and methods to basic types, which again shows that basic types are immutable;

2. Comparison of basic types is comparison of values:

They are equal only when their values are equal.
But you might do this:

var a = 1;
var b = true;
console.log(a == b);//true

Aren't they equal? Actually, this isType conversionand==knowledge of the == operator. That is to say, when using == to compare two variables of different types, some type conversion will be performed. For example, in the comparison above, true is first converted to the number 1 and then compared with the number 1, so the result is true. This is because when the types of the two compared values are different, the == operator performs type conversion, but when the types of the two values are the same, even == is equivalent to ===.

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

3. Variables of basic types are stored in the stack area (the stack area refers to the stack memory in memory)

Suppose there are the following variables of basic types:

var name = 'jozo';
var city = 'guangzhou';
var age = 22;

Then its storage structure is as shown below:

The stack area includes the variable identifier and the variable value.

2. Reference types

Reference types are more fun and interesting.

In JavaScript, apart from the basic types above(number,string,boolean,null,undefined)everything else is reference types, which can also be said to be objects. Objects are collections of properties and methods. That is, reference types can have properties and methods, and properties can contain basic types and reference types. Let's look at some characteristics of reference types:

1. The values of reference types are mutable

We can add properties and methods to reference types, and can also delete their properties and methods, for example:

var person = {};//创建个控对象 --引用类型
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);} 
person.sayName();// 'jozo'

delete person.name; //删除person对象的name属性
person.sayName(); // undefined

The above code shows that reference types can have properties and methods, and they can be changed dynamically.

2. The values of reference types are objects stored in both stack memory and heap memory

JavaScript is different from other languages in that it does not allow direct access to positions in memory, meaning it cannot directly operate on the memory space of objects. So what do we operate on? Actually, we operate on references to objects, so the values of reference types are accessed by reference.
To be precise, the storage of reference types requires both the stack area and the heap area of memory (the heap area refers to the heap memory in memory) to work together. The stack memory stores the variable identifier and the pointer to the object in heap memory, which can also be said to be the address of the object in heap memory.
Suppose there are the following objects:

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

Then the storage situation of these three objects in memory is as shown below:

3. Comparison of reference types is comparison of references

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

When talking about the comparison of basic types above, it was mentioned that when the types of two compared values are the same, it is equivalent to using ===, so the output is true. Let's take another look:

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

You may have already spotted the flaw. The above compares two strings, while the below compares two objects. Why are objects that look exactly the same not equal?

Don't forget, reference types are accessed by reference. In other words, it compares whether the addresses in heap memory of the two objects are the same. Obviously, person1 and person2 have different addresses in heap memory:

So these are two completely different objects, so false is returned;

3. Simple assignment

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

var a = 10;
var b = a;

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

At this time, the value stored in a is 10. When a is used to initialize b, the value stored in b is also 10, but the 10 in b is completely independent of the one in a. This value is only a copy of the value in a. After that, these two variables can participate in any operations without affecting each other.

That is to say, after the assignment operation of basic types, the two variables do not affect each other.

4. 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 placed into the space allocated for the new variable. As mentioned earlier when discussing reference types, what is stored in the variable is the address of the object in heap memory. Therefore, unlike simple assignment, this copy of the value is actually a pointer, and this pointer points to an object stored in heap memory. After the assignment operation, both variables hold the same object address, so both variables point to the same object. Therefore, changing either variable will affect each other:

var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象

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

Their relationship is as shown below:

Therefore, the assignment of reference types is actually the assignment of the pointer to the object's address stored in the stack area. Therefore, the two variables point to the same object, and any operation will affect each other.

Original link: https://segmentfault.com/a/1190000002789651