js创建对象的7种模式

其实我们在新建一个对象的时候,通常会用什么方法呢?我觉得,大多数的人都会这样新建,简单直接:

var myObject = {
  name:'test',
  content:'hello world',
  do:function(){console.log('nothing')}
}

在这里,以上面例子来详细说说js创建对象的7种模式:

第一种:工厂模式

function createObject(name, content){
  return {
    name,
    content,
    do:function(){console.log('nothing')}
  }
}

var myObject = createObject('test', 'hello world')

这种模式非常直观,丢进去,丢出来。

第二种:构造函数模式

function createObject(name, content){
  this.name = name
  this.content = content
  this.do = function(){console.log('nothing')}
}

var myObject = new createObject('test', 'hello world')

这种模式也很常用,定义了一个构造函数,然后对象都是new出来的。

第三种:原型模式

function createObject(){
}
createObject.prototype.name = 'test'
createObject.prototype.content = 'hello world'
createObject.do = function(){console.log('nothing')}
var myObject = new createObject()

这种模式相对构造函数模式,是在它的原型上直接创建属性,后面new出来的对象就会继承下来这些属性和方法。

第四种:构造函数模式和原型模型组合

function createObject(name, content){
  this.name = name
  this.content = content
}
createObject.prototype = {
  constructor: createObject,
  do:function(){console.log('nothing')}
}
var myObject = new createObject('test', 'hello world')

构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性,结果,每个实例都会有一个自己的一份实例属性和方法,但同时共享着对方法的引用,最大限度地节省了内存,是目前使用最广泛的一种创建自定义类型的方法。

第五种:动态原型模式

function createObject(name, content){
  this.name = name
  this.content = content
  if(typeof this.do != "function"){
    createObject.prototype.do = function(){console.log('nothing')}
  }
}

var myObject = new createObject('test', 'hello world')

这里就是判断是否存在do这个方法前提下动态在原型上添加,而且只在调用函数的时候才会执行,可以说是非常好的一种模式。

第六种:寄生构造函数模式

function SpectialArray(){
  var values = new Array()
  values.push().apply(values, arguments)
  values.toPipedString = function(){
    return this.join('|')
  }
  return values
}

var colors = new SpecialArray('red', 'blue', 'green')
alert(colors.toPipedString())  //"red|blue|green"

其实这种模式也很容易理解,我们不能直接修改Array构造函数,就借用来寄生一下,添加我们需要的属性。

第七种:稳妥构造函数模式

function createObject(name){
  var o = new Object()
  o.do = function(){console.log(name)}
  return o
}
var myObject = createObject('name')

看起来有点熟对吧,其实不完全熟,它其实是通过myObject的方法才能访问到数据成员的这样一种方式,没有其他方式能够访问,myObject就是保存着一个稳妥的对象。

好了,关于js创建对象的7种模式,大抵如上。

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据