谈谈JavaScript中对象属性及堆栈的的概念

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

前言

大家好哇，今天我们来谈谈JavaScript中对象属性及堆栈的概念，对于非科班出身的小伙伴而言，这其中的概念还是很容易被搞混的，所以今天我们就来好好谈一下这个问题。

文章目标

先来看一下本文的目标吧，大神请绕道，因为本文基本摘自我刚入行时的笔记哦~

重点

1. 能够获取和设置对象属性的值
2. 能够遍历对象

了解

1. 知道内存中分为栈和堆两个区域

操作对象

操作对象比较简单，熟练基本的操作对象方法即可。

获取对象属性的值

注意: 如果对象中没有的属性,返回的是undefined。

var obj = {
    name: '小明',
    age: 20
}
alert(obj.name)    // '小明'
alert(obj.sex)     // undefined

给对象添加属性并赋值

var obj = {
    name: 'ls'
    age: 20
}
// 给对象添加属性并赋值
obj.sex = '男'
console.log(obj)  // {name: 'ls', age: 28, sex:'男'}

通过中括号语法操作对象的属性

语法：对象 [ '属性名' ]

var stu01 = {
  name:'小白',
  age:28,
  sex:true,
  getInfo:function(){
    return '我的名字叫：'+this.name + '，年龄：'+ this.age + '，性别：' + this.sex
  }
}

获取操作如下：

alert(stu01.name)    // 小白
alert(stu01['name'])    // 小白
alert(stu01.getInfo())    // 我的名字叫小白,年龄28,性别true
alert(stu01['getInfo']())    // 我的名字叫小白,年龄28,性别true

赋值，以下两种方式书写代码的作用是一样的：

stu01.name = '小黑'
stu01['name'] = '小黑'

遍历对象中的所有属性

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

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

删除对象中的某个属性

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

内存中的栈空间和堆空间

• 基本数据类型存储在栈空间中
• 引用数据类型存储在堆空间中

图解如下：

基本数据类型和引用数据类型传参

基本数据类型赋值

var num1 = 1;
var num2;
num2 = num1;  //把num1的值克隆一份赋值给num2
console.log(num2); //1

图解如下：

引用数据类型赋值

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

图解如下：

后记

你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。

关注我，前端路途一起走。嘿哈~?