别再把对象当“字典”！JS 零基础也能看懂的“属性账本”拆解笔记

前言

目前我的 JS 技能树点亮了"对象"这一格，这篇文章就是一份"新手村"笔记，只用我已掌握的钥匙，把对象这只"收纳盒"的隔层、暗格、标签一次性摸清楚，不越级打怪，也不提前透支未来语法。如果你也刚学完对象，想先把它玩透再往下走，欢迎一起原地复盘，把基础踩成肌肉记忆。

对象

• 在 js 这门语言中流传着一句话叫 万物皆对象，顾名思义不管你是哪种数据类型都可看作是对象。
  我们知道的数据类型可分为两种------原始类型和引用类型

1. 原始类型 又叫简单类型，有 string number boolean undefined null Symbol bigInt
2. 引用类型 又叫复杂类型，有 function array object

• 在解释为什么万物都可被称为对象之前我们先聊今天第一个话题------如何创建一个对象

一. 创建对象的方式

1. 对象字面量 只用一个 {} 就能解决

const obj = {
    a : 1
    }    // 这是我们最常看到的

2. new Object() 用new Object() 创建一个对象后，再在外围添加属性

const obj = new Object()  // 构造函数
obj.name = '饶总'
const abc = 'age'   // 目的添加 key 为 age ，value 为 20
obj[abc] = 20   //当 abc 是变量的时候用[]，就可直接访问到 age
delete obj[abc]   //要删掉属性就用 delete
console.log(obj);

3. new 调用自定义的构造函数 关于构造函数

• 当我们需要批量化创建对象时，可以使用构造函数
  方便理解这句话，首先我们设立一个目标，我们要把公司员工的姓名年龄职位输入到系统里面方便统计管理，按照古板的方法就是创造无数个职位对应的函数，一个一个输入姓名年龄放进去

function Insert(name, age) {
  const obj = {
    name: name,
    age: age,
    job: 'coder'
  }
  return obj
}

function Insert2(name, age) {
  const obj = {
    name: name,
    age: age,
    job: 'manager'
  }
  return obj
}

Insert('饶总', 18)

但是栈的容量有限，函数过多就会导致爆栈，那么这个时候就可以用构造函数来解决

function Insert(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
}
const p = new Insert('晓总', 18, 'coder') // { name: '晓总', age: 18, job: 'coder' }
const p2 = new Insert('佳颖', 19, 'manager')
console.log(p);
console.log(p2);

• 当一个函数被 new 调用时，我们称之为构造函数
  再来一个关于生产汽车的例子

function Car(color) {
  this.name = 'su7'
  this.height = '1400'
  this.lang = '4800'
  this.weight = '1500'
  this.color = color
}

const car1 = new Car('purple') // 实例化一个对象
const car2 = new Car('yellow')

由于生产的汽车的大部分标签是一样的，只有极个别标签能自行选择，这个时候用 new 构造一个函数就显得尤为高明

二. new 干了什么？

1. 创建一个 this 对象
2. 执行构造函数中的代码，就是给 this 对象添加属性值
3. 返回这个 this 对象

function person() {
  const _this = {}   //构造一个 _this 对象
  _this.name = 'su7'   
  _this.color = 'green'  //给该对象添加属性值
  return _this       //返回该对象
}

const obj = person()

console.log(obj);

三. 什么是包装类？

1. 当用户定义一个字面量，v8默认执行的还是 new Xxx()

var num = 123  //var num = new Number(123)  
var str = 'hello'  //var str = new String('hello')

2. 一个包装类的实例对象，在参与运算时，会自动拆箱成原始类型

var num = 123  // v8 默认执行 var num = new Number(123)
num.a = 'aaa'
//delete num.a   // 发现是原始类型就自动删除
console.log(num.a); // 执行结果为 undefined，既证明了 num 可以是对象，又说明了 num 的属性被删除了

3. 因为 js 是弱类型语言, 所以只有在赋值语句执行时才会判断值的类型(typeof)，当值被判定为原始类型时，就会自动将包装对象上添加的属性移除

var str = 'hello' 
//typeof('hello')   判断类型为string
//  v8执行 var str = new String('hello')
str.len = 2
//delete str.len  将包装对象上添加的属性移除

结语

对象既是 JavaScript 的地基，也是后续所有语法的交汇点；先把这块"自留地"的边界、门牌和规则摸透，再学任何新框架都能事半功倍。愿这份最基础的笔记，能在你未来的进阶路上当一块靠谱的垫脚石。感谢阅读！