马上七夕了,该聊聊对象的事儿了

211 阅读2分钟

微信公众号:  [大前端驿站]
关注大前端驿站。问题或建议,欢迎公众号留言。 这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

我们都知道可以使用Object构造函数或者对象字面量的方式创建对象,今天来聊聊如何创建具有同样接口的多个对象有哪些方式。

工厂模式

工厂模式广泛应用于软件工程领域,用于抽象创建特定对象的过程。

function createPerson (name, age) {
  let obj = new Object()
  obj.name = name
  obj.age = age
  return obj
}

const p1 = createPerson('James', 37)
const p2 = createPerson('Antony', 36)

这里,可以用不同的参数多次调用这个函数,每次都会返回一个新的对象。这种工厂模式虽然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)。

构造函数模式

ECMAScript 中的构造函数是用于创建特定类型对象的,上述工厂模式代码可以改造成自定义构造函数的形式

function Person(name, age, job){ 
 this.name = name
 this.age = age
 this.job = job
 this.sayName = function() { 
  console.log(this.name)
 }
} 
let person1 = new Person("James", 37, "Player"); 
let person2 = new Person("Antony", 36, "Player"); 
person1.sayName(); // James 
person2.sayName(); // Antony

这里需要注意Person首字母大写,有助于区别构造函数和普通函数。 要创建 Person 的实例,应使用 new 操作符。以这种方式调用构造函数会执行如下操作:

  • 在内存中创建一个新的对象
  • 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性
  • 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)
  • 执行构造函数内部的代码(给新对象添加属性)
  • 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象

对比工厂模式,构造函数解决了对象标识问题

console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true

构造函数定义的方法会在每个实例上都创建一遍。虽然person1和person2中的sayName方法起到的作用是一样的,但是它们不是同一个Function实例。

原型模式

每个函数都会创建一个 prototype 属性,这个属性是一个对象,这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处就是在它上面定义的属性和方法可以被对象实例共享。

let Person = function() {}; 
Person.prototype.name = "James"; 
Person.prototype.age = 29; 
Person.prototype.sayName = function() { 
 console.log(this.name); 
}; 
let person1 = new Person(); 
person1.sayName(); // "James" 
let person2 = new Person(); 
person2.sayName(); // "James" 
console.log(person1.sayName == person2.sayName); // true

函数体中是空的,所以属性和方法都定义在Person的原型对象上。原型模式定义的属性和方法是由所有实例共享的。




~~ 感谢观看

关注下方【大前端驿站】
让我们一起学,一起进步

【分享、点赞、在看】三连吧,让更多的人加入我们