2019-01-28 回答 对象字面量 通常用于存储一次性数据。 const person = { name: 'John', age: 50, birthday() { this.age++ } } person.birthday() console.log(person.age) // 51 构造函数 通常用于为一 ..

列举几种创建对象的方法,并说明每种方法的使用场景

本贴最后更新于 203 天前,其中的信息可能已经物是人非

2019-01-28

回答

对象字面量

通常用于存储一次性数据。

const person = {
  name: "John",
  age: 50,
  birthday() {
    this.age++
  }
}
person.birthday() 
console.log(person.age) // 51 

构造函数

通常用于为一个对象创建多个实例的场景,每个实例都不会受到该对象的其他实例的影响,他们有自己独立的数据。new 关键字必须位于构造函数之前,否则下例中的 nameage 将会挂载到 window 上。

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.birthday = function() {
  this.age++
}
const person1 = new Person("John", 50)
const person2 = new Person("Sally", 20)
person1.birthday()
console.log(person1.name, person1.age) // John 51
person2.birthday()
console.log(person2.name, person2.age) // Sally 21

工厂模式

和构造函数类似,都可以创造一个新的实例,但是他可以通过闭包存储私有数据。在函数调用或 this 关键字之前不需要使用 new 操作。工厂模式不使用原型链模式,他将所有属性和方法都做为自己的属性。

const createPerson = (name, age) => {
  const birthday = () => person.age++
  const person = { name, age, birthday }
  return person
}
const person = createPerson("John", 50)
person.birthday() 
console.log(person.age) // 51

Object.create()

可以设置新创建的对象的原型。Object.create() 的第二个参数可以提供新对象自身定义的可枚举属性。

const personProto = {
  birthday() {
    this.age++
  }
}
const person = Object.create(personProto, {
  age: {
    value: 50,
    writable: true,
    enumerable: true
  },
 name: {
    value: 'John',
    writable: true,
    enumerable: true
  }
})
person.birthday() 
console.log(person.age, person.name) // 51 "John"

加分回答

返回总目录

每天 30 秒

  • 30Seconds

    精选的常见前端问题集,帮助您踏踏实实走好每一步。

    英文原文请看 30-seconds

    251 引用 • 270 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    420 引用 • 1008 回帖 • 896 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    222 引用 • 1212 回帖 • 361 关注
1 回帖   
请输入回帖内容...
  • bdFK3000  

    好文
    學習
    關注了