牛叔叔 的笔记

好好学习

2025-08-29 16:10

JavaScript创建对象的5种常用方式

牛叔叔

WEB前端

(8)

(0)

收藏

JavaScript中创建对象就像搭积木,有几种不同的搭建方法,每种都有自己的特点和适用场景。下面我用最通俗的方式讲解这些方法:

1. 对象字面量 - 最直接的"手工打造"

  • ‌特点‌:简单直观,适合创建单个对象

  • ‌缺点‌:创建多个相似对象时需要重复代码

const person = {
  name: "万码学堂",
  age: 25,
  sayHi: function() {
    console.log(`你好,我是${this.name}`);
  }
};

2. 构造函数 - 批量生产的"模具"

  • ‌特点‌:可以批量创建相似对象

  • ‌注意‌:每个方法都会在新对象上创建,可能浪费内存

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log(`你好,我是${this.name}`);
  };
}

const person1 = new Person("万码", 25);
const person2 = new Person("学堂", 30);

3. 原型模式 - 共享的"家族基因"

  • 特点‌:所有实例共享方法和属性,节省内存

  • ‌缺点‌:所有实例默认属性值相同

function Person() {}
Person.prototype.name = "万码学堂";
Person.prototype.age = 0;
Person.prototype.sayHi = function() {
  console.log(`你好,我是${this.name}`);
};

const person1 = new Person();
person1.name = "张三";

4. 组合模式 - 最常用的"黄金搭档"

  • ‌特点‌:结合构造函数和原型的优点

  • ‌推荐‌:这是最常用的对象创建方式

function Person(name, age) {
  // 实例属性
  this.name = name;
  this.age = age;
}

// 共享方法
Person.prototype.sayHi = function() {
  console.log(`你好,我是${this.name}`);
};

const person1 = new Person("万码学堂", 25);

5. ES6类语法 - 现代的"语法糖"

  • ‌特点‌:语法更简洁,底层仍然是原型继承

  • ‌注意‌:类中的方法会自动添加到原型上

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log(`你好,我是${this.name}`);
  }
}

const person1 = new Person("万码学堂", 25);

其他创建方式

  • ‌Object.create()‌:基于现有对象创建新对象

  • ‌工厂模式‌:用函数封装对象创建过程

  • ‌单例模式‌:确保一个类只有一个实例

如何选择?

  • 简单对象 → 对象字面量

  • 多个相似对象 → 组合模式或ES6类

  • 需要继承 → 原型模式或ES6类

  • 需要特殊控制 → 工厂模式或单例模式

记住:JavaScript中几乎所有东西都是对象,理解对象创建方式是掌握JavaScript的关键!


0条评论

点击登录参与评论