JS创建对象的方法归纳

js创建对象的方法很多,每种都有不同的适用场景,满足各种业务需求(都是屁话,写个业务用什么面向对象啊)

一种归纳了7种常见的 实际在js的设计模式中还有很多

第一种: Object构造函数创建
说明: 这是一个方法用的不多,跟字面量的方法很像,但是写法上复杂一些
优点: 书写简便
缺点: 不便以大量对象的批量生成

var parson1 = new Object({
  like: 'book'
})
parson1.name = '小可爱'
parson1.age = 18
parson1.show = function () {
  console.log(this.name)
}
parson1.show()
console.log('parson1', parson1)

第二种: 字面量方式创建对象
说明: 两个字简单,最长用的创建对象的方法了把,但是实例的原型是Object(很尴尬)
优点: 书写简便
缺点: 不便以大量对象的批量生成

var parson2 = {
  name: '小明',
  age: 48,
  show: function () {
    console.log(this.name)
  }
}
parson2.show()
console.log('parson2', parson2)

第三种: 工厂模式创建对象
说明: 对象的原型还是Object,一种能够批量声明实例的方法,没有原型,没有实例之间都是独立的
优点: 可批量创建对象
缺点: 无法判断对象的类型

function Parson3(name, age) {
  var o = new Object({
    name, age
  })
  o.show = function () {
    console.log(this.name)
  }
  return o
}
const parson3 = Parson3('小灰灰', 3)
parson3.show()
console.log('parson3', parson3)

第四种: 构造函数创建对象
说明: 终于有原型了,不过生成实例的时候需要添加new,不new的话this就会指向全局对象(浏览器是Window对象,node中式Global对象);
优点: 可批量创建对象,拥有自己的原型,能够用于判断对象的类型
缺点: 每个方法都要每个实例上重新创建一遍(方法指的是对象里面定义的函数),如果方法数量很多,就会占用很多不必要的内存

function Parson4(name, age) {
  this.name = name
  this.age = age
  this.show = function () {
    console.log(this.name)
  }
}
var parson4 = new Parson4('乔治', 2)
parson4.show()
console.log('parson4', parson4)

第五种: 原型模式创建对象
说明: 很坑,实例化之后直接输出实例什么都没有,因为所有的属性和方法都在实例的__proto__里面;当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。
优点: 可批量创建对象,拥有自己的原型,方法不会再实例上创建
缺点: 不能自定义对象属性的值,每个实例都拥有相同的属性和方法

function Parson5() { }
Parson5.prototype.name = '小红红'
Parson5.prototype.age = 30
Parson5.prototype.show = function () {
  console.log(this.name)
}
var parson5 = new Parson5()
parson5.show()
console.log('parson5', parson5)
console.log('parson5.name', parson5.name)
console.log('parson5.age', parson5.age)

第六种: 组合方式创建对象(构造函数模式+原型模式)
说明: 对象的属性使用构造函数模式,对象的方法使用原型模式(完美)
优点: 可批量创建对象,拥有自己的原型,方法不会再实例上创建,能够自定义对象的属性
缺点: 需要理解前五种创建对象的方法才能理解这种模式的优点

function Parson6(name, age) {
  this.name = name
  this.age = age
}
Parson6.prototype.show = function () {
  console.log(this.name)
}
var parson6 = new Parson6('佩奇', 1)
parson6.show()
console.log('parson6', parson6)

第七种: ES6提供的class关键字创建对象
说明: 感觉像是组合方式的语法糖,优缺点一致
优点: 组合方式的优点全都有
缺点: 需要对ES6有一定程度的了解,对浏览器的兼容不好,一般配合Babel一起使用

class Parson7 {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  show() {
    console.log(this.name)
  }
}
var parson7 = new Parson7('小猪猪', 3)
parson7.show()
console.log('parson7', parson7)

[测试代码]