concept
As shown in the figure, there are seven types of js data types, the first six are basic data types, the symbol is a special basic data type introduced by es6, and the last one is also the type that needs the most attention. Reference types and reference types are also shown in the picture. Five types.
After understanding the classification of data types, you need to understand how the data types are stored:
- The basic type is stored in the stack memory , and when it is referenced or copied, an identical variable is created
- The reference type is stored in the heap memory , and the address is stored. Multiple references point to the same address. This involves the concept of sharing.
Example 1
let a = {
name: 'lee',
age: 18
}
let b = a;
console.log(a.name); //第一个console
b.name = 'son';
console.log(a.name); //第二个console
console.log(b.name); //第三个console
This question is relatively simple. We can see that the name of the first console typed out is'lee', which should be no doubt; but after executing b.name='son', you will find the attribute names of a and b as a result Both are'son'. The second and third print results are the same. This reflects the "shared" feature of the reference type, that is, these two values are shared in the same block of memory, and one is changed The other one also changed accordingly.
Let's look at a piece of code below. It is a slightly more complicated object property change problem than title one.
Example 2
let a = {
name: 'Julia',
age: 20
}
function change(o) {
o.age = 24;
o = {
name: 'Kath',
age: 30
}
return o;
}
let b = change(a); // 注意这里没有new，后面new相关会有专门文章讲解
console.log(b.age); // 第一个console
console.log(a.age); // 第二个console
This question involves function. Through the above code, you can see that the result of the first console is 30. The final print result of b is {name: “Kath”, age: 30}; the return result of the second console is 24. And the final print result of a is {name: “Julia”, age: 24}.
Is it different from what you expected? What you should pay attention to is that the function and return here bring different things.
The reason is: the o passed in by the function passes the memory address value of the object in the heap. By calling o.age = 24 (code in line 7), the age attribute of the a object is indeed changed; but the code in line 12 Return turns o into another memory address, stores {name: “Kath”, age: 30} into it, and finally returns the value of b to become {name: “Kath”, age: 30}. And if you remove the 12th line, then b will return undefined.
Data type detection you don't know
Speaking of data type detection, everyone must be familiar with typeof and instanceof, but do you know Object.prototype.toString?
Let's take a look at its usage below:
toString() is the prototype method of Object, calling this method can uniformly return a string in the format "[object Xxx]", where Xxx is the type of the object. For Object objects, you can directly call toString() to return [object Object]; for other objects, you need to call through call to return the correct type information. Let's take a look at the code.
Object.prototype.toString({
}) // "[object Object]"
Object.prototype.toString.call({
}) // 同上结果，加上call也ok
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call('1') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(function(){
}) // "[object Function]"
Object.prototype.toString.call(null) //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g) //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([]) //"[object Array]"
Object.prototype.toString.call(document) //"[object HTMLDocument]"
Object.prototype.toString.call(window) //"[object Window]"
But you must pay attention when writing the judgment conditions. Using this method, the final return of the unified string format is "[object Xxx]", and the first letter of "Xxx" in the string must be capitalized (Note: use typeof The lowercase is returned), and you need to pay more attention here.