文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js 创建对象的多种方式与优缺点小结

2024-04-02 19:55

关注

早期创建方式


var obj = new Object()
obj.name ='xxx'
obj.age = 18
或使用对象字面量
var o1 = {
  name: 'xxx',
  say: () => {}
}
var o2 = {
  name: 'xxx',
  say: () => {}
}

缺点:使用同一个接口创建很多对象,会产生大量重复代码

工厂模式


function factory(name,age) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  return obj
}
var o1 = factory(1, 11)
var o2 = factory(2, 22)

优点:解决了创建多个相似对象代码重复问题
缺点:无法识别对象是什么类型

构造函数模式

ECMAScript中可以使用构造函数创建特定类型的对象,如Object,Array这种原生构造函数。此外,也可以创建自定义构造函数,从而定义自定义对象的属性和方法。


function Person(name, age) {
  this.name = name
  this.age = age
  this.sayName = function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点:构造函数模式创建的实例可以区分类型标识(instanceof 判断)
缺点:每个方法都需要在实例上重新创建,如 两个实例的sayName方法任务相同,但是实际创建了两个Function实例

构造函数模式优化


function Person(name, age) {
  this.name = name
  this.age = age
}
function sayName () {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点:多个实例共享在全局作用域中定义的函数,解决了两个函数做同一件事的问题
缺点:全局作用域定义的函数实际上只能被某个对象调用,全局作用域名不副实,而且如果对象需要定义很多方法,需要创建很多个全局函数,这让自定义的对象类型没有封装特性。

原型模式

我们创建的每个函数都有一个protoype属性,这个属性是一个指针,指向一个对象。这个对象的用途是包含了可以由特定类型的所有实例共享的属性和方法。即prototype就是由构造函数创建的那个对象实例的原型对象。


function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 123
o2.sayName() // 123

优点:解决了实例共享属性或事件的问题
缺点:因为实例共享属性的原因,对于值为引用类型的属性来说,一个实例的修改会导致其他实例访问值更改。如:


function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.friends = ['a', 'b']
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.friends.push('c')
console.log(o2.friends) // ['a', 'b', 'c']

构造函数和原型模式组合


function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
}
Person.prototype = {
  constructor: Person,
  sayName: function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点:每个实例有自己的属性,同时又共享着方法的引用,还支持传参数

动态原型模式


function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
  if(typeof this.sayName != 'function') {
    Person.prototype.sayName = function() {
      console.log(this.name)
    }
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点:仅在方法不存在的时候创建一次,避免重复创建

寄生构造函数模式


function SpecialArray() {
  var o = new Array()
  // 添加值
  o.push.apply(o, arguments)
  // 添加方法
  o.toPipedString = function(){
    return this.join('|')
  }
  return o
}
var o1 = new SpecialArray(1,11)
o1.toPipedString() // 1|11

优点:在不更改原始构造函数的情况下为对象添加特殊方法
缺点:返回的对象与构造函数以及构造函数的原型没有任何关系,该方法与在构造函数外部创建的对象没有什么不同

稳妥构造函数模式


function Person(name) {
  var o = new Object()
  // 添加方法
  o.getName = function(){
    return name
  }
  return o
}
var o1 = new Person(1)
o1.getName() // 1

与寄生构造函数不同在于,不使用this,不使用new调用
优点:除了使用getName外没有任何方法能够访问name,在一些安全的环境使用
缺点:与工厂模式相似,无法识别对象所属类型

以上就是js 创建对象的多种方式与优缺点小结的详细内容,更多关于js 创建对象的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯