JavaScript对象大观园：从青铜到王者，对象的奇幻漂流记

偶像佳沛
64 阅读4分钟

各位掘友！今天咱们不聊高深莫测的源码，也不卷算法题，就来唠唠JavaScript世界里那位无处不在的"社交达人"——对象（Object） 。它就像是编程界的"乐高"，能组合出无限可能，但有时候也像你的发型，看起来挺好，一上手就乱套。而在JavaScript中，可以说是万物皆对象，此话从何说起？请听我娓娓道来。

1.对象是什么鬼

许多刚刚学习编程的朋友们初次接触对象这个概念都会感到些许迷茫，对象到底是个啥啊？ 那我们设想一个场景，描述一下自己喜欢的人，你会不会这样描述？

let name = '佳沛'
let age = '19'
let skill = 'coding'

那我们就会想，不行太麻烦了，这变量乱七八糟的我要让它们整合起来。于是你灵机一动：

const star = {
name: '佳沛',
age: '19',
skill: 'coding',
saying: function(){
 console.log('佳沛好帅')
 }
}

这感觉就像把乐高零件撒一地，拼不起来啊！这时候，对象闪亮登场——它就像一个万能收纳盒，把相关的数据和功能打包在一起，整整齐齐！

那么恭喜你，你成功创建了一个对象，那么我们该怎么访问这个变量里面的内容呢？

也比较简单，在原有的语句中加入执行语句就行了。就像这样

console.log(star)

image.png

看，一个活生生的"人"就在代码里诞生了！要属性有属性，要方法有方法，还能随时让他写代码（调用方法），这不比变量满天飞优雅多了？

我们会发现saying显示的是函数类型的对象属性，因为没有运行所以没有打印。

2. 对象的"七十二变"：创建方式大比拼

JavaScript中的对象非常灵活，创建方式也多得让人眼花缭乱。以下是几种常见的"召唤术"：

2.1 对象字面量：直白少年的最爱

最直接的方式，像写购物清单一样简单

const _object{
key: 'value', // 键值对，用逗号隔开
  action: function() { /* 做一些事 */ }
}

2.2 构造函数：规矩匠人的选择

构造函数也是很好用的（用的时候默念：我写的是函数，不是对象）

function Star(age,high){
    this.name = '佳沛',
    this.age = age,
    this.high = high,
    this.saying = '佳沛好帅',
    this.favorite = function(){
     console.log('不想怀揣')
     return 'iptv'
    }
}

const goat = new Star(19,158)
console.log(goat);
console.log(goat.favorite())

2.3工厂函数方法（大批量，高效）

function notPerson(name, age) {
  return {
    name: name,
    age: age,
    greet: function() {
      console.log(`Hello, I'm ${this.name}`);
    }
  };
}

const person = notPerson('佳沛', 19);

还有一些方法尚未提及，后续文章揭晓

3. 对象的"社交法则"：增删改查

const person = {name:  '佳沛'}
person.job = 'student'
person.age = '18'
//年龄不想要了
delete person.age
//不想当学生了
person.job = 'boss'
console.log(person)

image.png

4. 对象的"家族遗传"：原型与原型链

就好像是家族里的血缘关系一般，对象也是能继承属性的！这是JavaScript对象系统中最神奇的部分！每个对象都有一个"隐藏的爹"——原型（prototype）。当你访问一个对象的属性时，如果它自己没有，JavaScript就会去它原型上找，如果原型上也没有，就去原型的原型（隐式原型）上找……这就形成了原型链 在这先对原型做个介绍

原型 prototype

  1. 函数天生拥有一个的属性 prototype，它是一个对象
  2. 将构造函数中的一些固定的属性和方法挂载到原型上，在创建实例的时候，就不需要重复执行这些属性和方法了
  3. 挂载在原型上的属性是可以直接被实例对象访问到的
  4. 实例对象无法修改 构造函数 原型上的属性值

对象原型 _ _ proto _ _ (隐式原型)

  1. 每一个对象都拥有一个 _ _ proto_ _ 属性，该属性值也是一个对象
  2. v8在访问对象中的一个属性时，会先访问该对象中的显示属性，如果找不到，就回去对象的隐式原型中查找
  3. 实例对象的隐式原型 === 构造函数的显示原型
function person(){
   this.doHomework = function(name){
        console.log(this.name + '写作业')
        return '怀揣'
    }
}
const jiapei = new person()
jiapei.name = '佳沛'
// 这个是自己的
console.log(jiapei.name)
// 这个是继承的
console.log(jiapei.doHomework())

image.png

5.总结：对象的哲学

JavaScript对象就像现实世界中的事物——它们有特征（属性），有行为（方法），而且与其他对象有着复杂的关系（原型链）

对象的精髓在于：

  • 封装：把相关的数据和行为打包在一起
  • 动态：可以随时改变和扩展
  • 灵活：多种创建和使用方式适应不同场景

记住，在JavaScript的世界里，几乎"一切皆对象"。理解了对象，你就掌握了JavaScript的一半精髓！

那么，下次当你创建一个对象时，不妨想想：你不仅仅是在写代码，而是在创造一个微型的数字生命！

avatar
文章
阅读
粉丝