探索JavaScript对象的多种孵化方式:从字面量到ES6类的进化之路

前言

javascript 创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用 JSON ;但写法有很多种,也能混合使用。下面本人将介绍一下至今本人所学的部分方法。

使用对象字面量

对象字面量是一种在 JavaScript 中创建对象的简单而直接的方式。它允许你在花括号 {} 内部列出对象的属性和对应的值,形成键值对的集合,从而定义一个对象。

下面是使用对象字面量创建对象的基本语法:

js 复制代码
let object = {
    key1: value1,
    key2: value2,
    // 更多的键值对...
};

其中,key1key2 是对象的属性名称,它们可以是字符串或符号;value1value2 是属性对应的值,可以是任何有效的 JavaScript 数据类型,包括数字、字符串、布尔值、函数、甚至是其他对象。

下面是一个使用对象字面量创建对象的示例:

js 复制代码
let person = {
    name: '沐渃清澄',
    age: 21,
    sex: '男'
};

可以看出,对象字面量是一种非常方便的创建对象的方式,特别是在需要创建简单的对象时。它简洁直观,让你可以快速定义和使用对象,非常适合在编写轻量级代码或进行快速原型开发时使用。

用function来模拟无参的构造函数

在JavaScript中,我们可以使用函数来模拟构造函数,即使用函数创建对象的实例。如果需要模拟无参的构造函数,我们可以定义一个函数,然后在函数体内使用this关键字来指向新创建的对象,并为这个对象添加属性和方法。下面是一个示例:

js 复制代码
function Person() {
    // 在构造函数内部使用this关键字定义对象的属性
    this.name = '沐渃清澄';
    this.age = 21;
    this.sex = '男';
    
    // 定义对象的方法
    this.greet = function() {
        return 'Hello, my name is ' + this.name;
    };
}

在这个示例中,我们定义了一个名为Person的构造函数,它模拟了一个人的属性和方法。在构造函数内部,我们使用this关键字来引用即将创建的对象,并为这个对象添加了nameagesex属性,以及一个greet()方法。

要创建Person对象的实例,我们可以使用new关键字来调用构造函数:

js 复制代码
let person = new Person();

通过new Person(),我们创建了一个新的Person对象的实例,并将其赋给了person变量。

现在,person对象就拥有了nameagesex属性和greet()方法,我们可以通过这些属性和方法来访问和操作对象的数据。例如:

js 复制代码
console.log(person.name); // 输出 "沐渃清澄"
console.log(person.age); // 输出 21
console.log(person.sex); // 输出 "男"
console.log(person.greet()); // 输出 "Hello, my name is 沐渃清澄"

总的来说,使用函数来模拟构造函数是JavaScript中一种常见的对象创建方式,通过在函数内部使用this关键字来引用新创建的对象,我们可以轻松地定义对象的属性和方法。这种方式非常灵活,适用于各种场景,包括创建无参构造函数。

用 function 来模拟参构造函数来实现 ( 用 this 关键字定义构造的上下文属性)

当我们使用函数来模拟带参数的构造函数时,我们可以在函数内部使用this关键字来定义对象的属性,并在创建对象的实例时传入参数来初始化这些属性。下面是一个示例:

js 复制代码
function Person(name, age,sex) {
    // 使用传入的参数初始化对象的属性
    this.name = name;
    this.age = age;
    this.sex = sex;
    
    // 定义对象的方法
    this.greet = function() {
        return 'Hello, my name is ' + this.name;
    };
}

在这个示例中,我们定义了一个名为Person的构造函数,它带有三个参数:nameagesex。在构造函数内部,我们使用this关键字来引用即将创建的对象,并将传入的参数分别赋值给对象的nameagesex属性。

要创建Person对象的实例,我们需要在调用构造函数时传入参数:

js 复制代码
let person = new Person('沐渃清澄', 21, 'sex');

通过new Person('沐渃清澄', 21, 'sex'),我们创建了一个新的Person对象的实例,并将传入的参数 '沐渃清澄'21'男' 分别赋值给了对象的nameagesex属性。

用工厂模式来创建(内置对象)

工厂模式是一种常见的 JavaScript 设计模式,它通过一个函数来创建对象,并根据参数或配置的不同返回不同类型的对象实例。在 JavaScript 中,我们可以使用工厂模式来创建内置对象,如数组、日期等。下面是一个示例:

js 复制代码
function createArray(length, defaultValue) {
    let array = [];
    for (let i = 0; i < length; i++) {
        array.push(defaultValue);
    }
    return array;
}

let defaultArray = createArray(5, 0);
console.log(defaultArray); // 输出 [0, 0, 0, 0, 0]

在这个示例中,我们定义了一个名为createArray的工厂函数,它接受两个参数:lengthdefaultValue。函数内部通过循环将指定长度的数组填充为指定默认值,并返回该数组。

我们可以调用createArray函数来创建一个指定长度且元素值都为默认值的数组。例如,我们调用createArray(5, 0)会返回一个长度为 5 的数组,数组的每个元素都是 0。

用原型方式创建

使用原型方式创建对象也是 JavaScript 中一种常见的模式,它通过定义一个构造函数和原型对象来实现对象的创建和方法的共享。下面是一个使用原型方式创建对象的示例:

js 复制代码
// 定义构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sex= sex;
}

// 通过原型对象添加方法
Person.prototype.bark = function() {
    console.log(this.name);
};

// 创建对象实例
let person1 = new Person('沐渃清澄', 21,'男');
let person2 = new Person('小明', 22,'男');

// 调用方法
person1.bark(); // 输出:沐渃清澄
person2.bark(); // 输出:小明

在这个示例中,我们首先定义了一个构造函数 Person,它接受两个参数 nameagesex,用于初始化一个人的名字、年龄和性别属性。

然后,我们通过 Person.prototype 对象来添加一个方法 bark,这样所有通过 Person 构造函数创建的对象实例都可以共享这个方法。

最后,我们使用 new 关键字来创建两个 Person 对象实例 person1person2,并分别调用了 bark() 方法。

使用原型方式创建对象的优点包括:

  1. 方法共享:所有通过构造函数创建的对象实例都可以共享原型对象上定义的方法,节省了内存空间。
  2. 扩展性:可以随时在原型对象上添加新的方法,所有实例都可以立即访问到新的方法。
  3. 性能:相比每个对象实例都定义自己的方法,使用原型方式可以提高代码的性能,因为方法只需定义一次。

因此,在实际开发中,原型方式是一种常见且优雅的对象创建方式,尤其适用于需要创建多个相似对象的情况。

使用类(ES6及以后版本)

使用类是 ES6及以后版本中新增的特性,它提供了一种更加面向对象的编程方式,使得 JavaScript 的代码更加结构化、可读性更强。下面是一个使用类创建对象的示例:

js 复制代码
class Dog {
    constructor(name, age) {
    this.name = name;
    this.age = age;
    this.sex= sex;
}
    bark() { 
    console.log(`${this.name}`); 
    }

// 创建对象实例
let person1 = new Person('沐渃清澄', 21,'男');
let person2 = new Person('小明', 22,'男');

// 调用方法
person1.bark(); // 输出:沐渃清澄
person2.bark(); // 输出:小明

在这个示例中,我们使用 class 关键字定义了一个名为 Person 的类。类中包含了构造函数 constructor 和一个方法 bark

  • 构造函数 constructor 用于初始化对象的属性,它接受两个参数 nameagesex,并使用 this 关键字将这两个参数分别赋值给对象的 nameagesex 属性。
  • 方法 bark 是类的一个成员方法,他使用了模板字符串来输出人的名字。

通过 class 关键字定义的类,我们可以通过 new 关键字来创建对象实例,然后调用对象的方法。

使用类的优点包括:

  1. 语法糖:类提供了一种更加简洁、清晰的语法,使得面向对象的编程更加直观和易于理解。
  2. 继承和多态 :类支持继承和多态的特性,可以通过 extends 关键字轻松实现类的继承,并通过方法的覆写实现多态。
  3. 封装性:类的定义具有封装性,可以将属性和方法封装在一起,提高了代码的可维护性和可读性。

因此,在 JavaScript 开发中,使用类是一种非常常见和推荐的方式,特别适用于构建复杂的应用程序和组件。

总结

综上所述,每种创建对象的方式都有其适用的场景和局限性。在实际开发中,可以根据具体情况选择合适的方式来创建对象,以提高代码的可读性、可维护性和性能效率。

相关推荐
罗_三金15 分钟前
前端框架对比和选择?
javascript·前端框架·vue·react·angular
Fan_web1 小时前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
叫我:松哥1 小时前
基于Python flask的医院管理学院,医生能够增加/删除/修改/删除病人的数据信息,有可视化分析
javascript·后端·python·mysql·信息可视化·flask·bootstrap
好名字08212 小时前
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
前端·javascript
c#上位机2 小时前
C#事件的用法
java·javascript·c#
万物得其道者成2 小时前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白2 小时前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风3 小时前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom3 小时前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan3 小时前
electron react离线使用monaco-editor
javascript·react.js·electron