前端祖传三件套JavaScript的对象之对象创建的其他组合或演进模式

简介: 在 JavaScript 中,对象是一个非常重要的数据类型,用于表示一组相关属性和方法。创建对象的方式有多种,除了构造器模式和原型模式之外,还有其他一些组合或演进模式可以帮助我们更好地管理对象。本文将介绍一些常见的组合或演进模式。


一、工厂模式

工厂模式是一种通过函数来创建对象的方式。它类似于构造器模式,但不需要使用 new 运算符。例如:

function createPerson(name, age) {
  const obj = {};
  obj.name = name;
  obj.age = age;
  obj.sayHello = function() {
    console.log('Hi, my name is ' + this.name + ', I am ' + this.age + ' years old.');
  }
  return obj;
}
const person = createPerson('Tom', 18);
person.sayHello(); // 输出: Hi, my name is Tom, I am 18 years old.

在上面的例子中,createPerson 函数返回一个新的对象,并且为该对象添加了一些属性和方法。

二、构造函数与原型混合模式

构造函数与原型混合模式是一种将构造函数和原型模式相结合的方式。在这种模式下,构造函数用于定义实例属性,而原型用于定义共享的方法和属性。例如:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log('Hi, my name is ' + this.name + ', I am ' + this.age + ' years old.');
};
const person = new Person('Tom', 18);
person.sayHello(); // 输出: Hi, my name is Tom, I am 18 years old.

在上面的例子中,构造函数用于定义实例属性 name 和 age,而原型用于定义共享的方法 sayHello。

三、ES6 类

ES6 引入了类的概念,可以用于定义对象。类可以看作是一种语法糖,它本质上还是通过构造函数和原型模式来实现的。例如:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log('Hi, my name is ' + this.name + ', I am ' + this.age + ' years old.');
  }
}
const person = new Person('Tom', 18);
person.sayHello(); // 输出: Hi, my name is Tom, I am 18 years old.

在上面的例子中,使用 class 关键字定义一个 Person 类,并且为该类添加了一个 constructor 方法,在该方法内部定义了实例属性 name 和 age。同时,还在类的原型上定义了一个方法 sayHello。

四、总结

除了构造器模式和原型模式之外,JavaScript 还有其他一些组合或演进模式可以帮助我们更好地管理对象,例如工厂模式、构造函数与原型混合模式以及 ES6 类。在实际开发中,需要根据实际需求来选择合适的对象创建方式,以提高代码的可维护性和可读性。

目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
8 2
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
6天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
15 1
|
7天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
10 1
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
11天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
98 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
68 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置