JavaScript之创建对象的几种方法

JavaScript是一门面向对象的语言,那么首当其冲,创建对象就是一个绕不开的话题。

创建对象的方式多种多样,每种都有其应用场景,也许你用过,也许用过而不知。如果不是的深入学习,只是完成一些简单业务的话,根本就不需要考虑这些。但为了提升自己的能力,梳理一下知识体系,了解不同的对象创建方法是有必要的。

对象的不同创建方式

使用字面量创建对象

使用对象字面量创建对象是最简单对象创建方式。

javascript 复制代码
const person = {
  name: '苏白',
  age: 18,
  sayName() {
    return this.name
  }
}

console.log(person)

使用构造函数创建对象

使用new关键字调用构造函数,可以初始化一个新的对象。

构造函数可以是内置构造函数,也可以是自定义构造函数。

构造函数可以通过this为对象添加属性,属性类型可以是基本类型、对象或者函数。

javascript 复制代码
const Person = function (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
// 作为构造函数调用
const subai = new Person('苏白', 18)
const cuiluoheng = new Person('崔洛恒', 18)

console.log(subai.sayName === cuiluoheng.sayName) // false

// 作为普通函数调用
Person('邱文', 18)
window.sayName() // 邱文

// 在对象作用域中调用Person
const other = new Object()
Person.call(other, '叶琛', 18)
other.sayName() // 叶琛

每个实例方法都会占据一定的内存空间,会造成资源的浪费;

构造函数作为普通函数调用,函数内部this会指向window对象

使用原型对象创建对象

使用原型对象创建对象是将所有的函数和属性都封装在对象的prototype属性中,对象的构建过程简单理解成对原型的复制。

这种创建方式很少单独使用,因为使用原型对象创建的实例,属性和方法都是相同的,不同实例之间共享原型上的属性和方法,改变一个实例的属性值会引起其他实例属性值的变化。

javascript 复制代码
function Person() {}

Person.prototype = {
  constructor: Person,
  name: '苏白',
  age: 18,
  sayName() {
    return this.name
  }
}
const person_1 = new Person()
const person_2 = new Person()
console.log(person_1.sayName === person_2.sayName) // true
console.log(person_1.name === person_2.name) // true

混合使用构造函数与原型对象创建对象

混合使用构造函数和原型对象方法创建对象是非常常用的一种方式。

在构造函数中定义实例共享的属性和方法,通过构造函数传递参数,让每个实例可以拥有自己的属性值,同时还可以共享方法的引用。

javascript 复制代码
function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  return this.name
}

const subai = new Person('苏白', 18)
const cuiluoheng = new Person('崔洛恒', 18)

console.log(subai.sayName === cuiluoheng.sayName) // true
console.log(subai.name === cuiluoheng.name) // false

这种混合方式可以节省内存,实时地识别、添加或者更改成员

使用Object.create()方法创建对象

使用Object.create()方法创建对象,允许为创建的对象选择一个原型对象,而不用定义构造函数。

javascript 复制代码
const person = {
  name: '苏白',
  age: 18,
  sayName() {
    console.log(`姓名:${this.name}--年龄:${this.age}`)
  }
}
const person_1 = Object.create(person)
console.log(person_1) // {}

person.name = '崔洛恒'
person_1.sayName() //  姓名:崔洛恒--年龄:18

Object.create()创建的对象只是原型指向源对象,并不会继承它的任何属性

工厂模式创建对象

工厂模式是一种软件工程领域用来创建特定对象的过程,是一种设计模式,并非独属于JavaScript。

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)

ES5实现工厂模式

javascript 复制代码
function createPerson(name, age) {
  const obj = {} // 相当于 obj = new Object()
  obj.name = name
  obj.age = age
  obj.sayName = function () {
    console.log(this.name)
  }
  return obj
}

const subai = createPerson('苏白', 18)
const cuiluoheng = createPerson('崔洛恒', 18)

ES6实现工厂模式

javascript 复制代码
class User {
  constructor(name, auth) {
    this.name = name
    this.auth = auth
  }
}

class UserFactory {
  static createUser(name, auth) {
    if (auth === 'admin') return new User(name, 1)
    if (auth === 'user') return new User(name, 2)
  }
}

const subai = UserFactory.createUser('苏白', 'admin')
const cuiluoheng = UserFactory.createUser('崔洛恒', 'user')
相关推荐
叼烟扛炮10 分钟前
[LangChain] 学习笔记(03):打破失忆症——对话机制与上下文管理
java·前端·javascript·笔记·学习·langchain
卋罖7501 小时前
Razor 视图 + JavaScript + Vue/iView 组件实现的表格自定义列
javascript·vue·iview·razor视图
系统集成-鹰翔16 小时前
ERP图片改名后仍命中识别缓存:缓存键、十分钟到期与调用计数
javascript·经验分享·后端
FlyWIHTSKY17 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
程序员大阳19 小时前
副队长JavaScript教程(66)-本地存储实战:待办事项网页的开发
javascript·json·实战·待办事项·本地存储·案例
Dream-Y.ocean19 小时前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
前端小D21 小时前
JS核心底层
前端·javascript
Dovis(誓平步青云)1 天前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
codeejun1 天前
每日一Go·MySQL-11、覆盖索引 & 回表原理
javascript·数据库·mysql
用户298698530141 天前
React 前端将 Excel 工作表导出为图片的技术实践
javascript·react.js·excel