On the concept of object attribute and stack in JavaScript

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ：8 Yuegengwen challenge

Preface

Hello everyone , Today we are going to talk JavaScript The concept of object properties and stack in , For a small partner who has no academic background , The concept is still easy to be confused , So let's talk about this problem today .

The goal of the article is

Let's take a look at the goal of this article , Please detour , Because this article basically extracts my notes when I first started ~

a key

1.  Can get and set the value of object properties 
2.  Ability to traverse objects 
 Copy code 

understand

1.  Know that the memory is divided into two areas: stack and heap 
 Copy code 

Action object

The operation object is relatively simple , Be familiar with basic operation objects and methods .

Get the value of the object property

Be careful : If there are no properties in the object , The return is undefined.

var obj = {
    name: ' Xiao Ming ',
    age: 20
}
alert(obj.name)    // ' Xiao Ming '
alert(obj.sex)     // undefined
 Copy code 

Add properties and assign values to the object

var obj = {
    name: 'ls'
    age: 20
}
//  Add properties and assign values to the object 
obj.sex = ' male '
console.log(obj)  // {name: 'ls', age: 28, sex:' male '}
 Copy code 

Manipulate the properties of an object through bracket syntax

grammar ： object [ ' Property name ' ]

var stu01 = {
  name:' The small white ',
  age:28,
  sex:true,
  getInfo:function(){
    return ' My name is ：'+this.name + ', Age ：'+ this.age + ', Gender ：' + this.sex
  }
}
 Copy code 

The operation of obtaining is as follows ：

alert(stu01.name)    //  The small white 
alert(stu01['name'])    //  The small white 
alert(stu01.getInfo())    //  My name is Xiaobai , Age 28, Gender true
alert(stu01['getInfo']())    //  My name is Xiaobai , Age 28, Gender true
 Copy code 

assignment , The following two ways of writing code work the same ：

stu01.name = ' Little black '
stu01['name'] = ' Little black '
 Copy code 

Traverse all properties in the object

adopt for..in loop , Traversing the properties of an object

grammar : for( var Variable name in Traversed objects ){ Code executed in a loop }

var obj = {
    name: 'zs',
    age: 18,
    sayHi:function(){
        console.log('hi');
    }
};
 Copy code 

There are several properties in the object ,for The loop will be executed several times

During the cycle , The attributes in the object are assigned to key Variable

Use bracket syntax in the loop

for(var key in obj) {
  console.log(key + "==" + obj[key]);
}
 Copy code 

Delete an attribute in an object

var obj = {
     name: 'zs',
    age: 18
}
console.log(obj.age)    // 18
delete obj.age
console.log(obj.age)    // undefined
console.log(obj)    // {name: 'zs'}
 Copy code 

Stack space and heap space in memory

js All of the code must be loaded into memory for execution , In fact, the memory is divided into regions , such as , There is a stack in memory and Stack two areas

js Medium 6 Type of data , It is divided into two categories : Basic data types and reference data types

The stack is equivalent to the address , The heap is equivalent to the actual storage place

• Basic data types are stored in stack space
• Reference data types are stored in heap space

The diagram is as follows ：

Basic data type and reference data type are passed as parameters

Basic data type assignment

var num1 = 1;
var num2;
num2 = num1;  // hold num1 Clone a copy of the value assigned to num2
console.log(num2); //1
 Copy code 

The diagram is as follows ：

Reference data type assignment

var obj = {
    name: 'zs'
}
var num2
num2 = obj
console.log(num2) // { name: 'zs'}
 Copy code 

The diagram is as follows ：

Postscript

Hello, wow , I'm the Antarctic ice , A front-end engineer whose technology is proportional to his appearance , Advocate getting to the point to solve the front-end problems , I hope my blog has helped you .

Pay attention to me , Go along the front road . Hey ha ~