JavaScript中对象的7种创建方式

本文详细介绍了JavaScript中的七种设计模式,包括工厂模式、构造函数模式、原型模式等,每种模式都附带了示例代码,有助于理解不同模式的特点及应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.工厂模式

  • 套路: 通过工厂函数动态创建对象并返回
  • 适用场景: 需要创建多个对象
  • 问题: 对象没有一个具体的类型, 都是Object类型
//返回一个对象的函数===>工厂函数
function createPerson(name, age) { 
 var obj = {
   name: name,
   age: age,
   setName: function (name) {
     this.name = name
   }
 }
 return obj
}

// 创建2个人
var p1 = createPerson('Tom', 12)
var p2 = createPerson('Bob', 13)

// p1/p2是Object类型

function createStudent(name, price) {
 var obj = {
   name: name,
   price: price
 }
 return obj
}
var s = createStudent('张三', 12000)
// s也是Object

缺点:

  1. 无法通过constructor识别对象,以为都是来自Object,无法得知来自Person
  2. 每次通过Person创建对象的时候,所有的say方法都是一样的,但是却存储了多次,浪费资源。

2.构造函数模式

  • 套路: 自定义构造函数, 通过new创建对象
  • 适用场景: 需要创建多个类型确定的对象,与上方工厂模式有所对比
  • 问题: 每个对象都有相同的数据, 浪费内存
//定义类型
function Person(name, age) {
 this.name = name
 this.age = age
 this.setName = function (name) {
   this.name = name
 }
}
var p1 = new Person('Tom', 12)
p1.setName('Jack')
console.log(p1.name, p1.age)
console.log(p1 instanceof Person)

function Student (name, price) {
 this.name = name
 this.price = price
}
var s = new Student('Bob', 13000)
console.log(s instanceof Student)

var p2 = new Person('JACK', 23)
console.log(p1, p2)

优点:

  1. 通过constructor或者instanceof可以识别对象实例的类别

缺点:

  1. 多个实例的say方法都是实现一样的效果,但是却存储了很多次(两个对象实例的say方法是不同的,因为存放的地址不同)

3.原型模式

function Person() {}
	Person.prototype.name = 'lisi';
	Person.prototype.say = function() {
  	alert(this.name);
}
Person.prototype.friends = ['xiaofeixa'];
var person1 = new Person();

优点:

  1. say方法是共享的了,所有的实例的say方法都指向同一个。

  2. 可以动态的添加原型对象的方法和属性,并直接反映在对象实例上。

    var person1 = new Person()
    Person.prototype.showFriends = function() {
      console.log(this.friends)
    }
    person1.showFriends()  //['xiaofeixia']
    

缺点:

  1. 出现引用的情况下会出现问题具体见下面代码:

    var person1 = new Person();
    var person2 = new Person();
    person1.friends.push('zhangsan');
    console.log(person2.friends)  //['xiaofeixia', 'zhangsan']
    

    因为js对引用类型的赋值都是将地址存储在变量中,所以person1和person2的friends属性指向的是同一块存储区域。

  2. 第一次调用say方法或者name属性的时候会搜索两次,第一次是在实例上寻找say方法,没有找到就去原型对象(Person.prototype)上找say方法,找到后就会在实力上添加这些方法or属性。

  3. 所有的方法都是共享的,没有办法创建实例自己的属性和方法,也没有办法像构造函数那样传递参数。

注意:

  1. 优点②中存在一个问题就是直接通过对象字面量给Person.prototype进行赋值的时候会导致constructor改变,所以需要手动设置,其次就是通过对象字面量给Person.prototype进行赋值,会无法作用在之前创建的对象实例上

    var person1 = new Person()
    Person.prototype = {
    	name: 'Pan',
      	setName: function(name){
          this.name = name
      	}
    }
    
    person1.setName()   //Uncaught TypeError: person1.set is not a function(…)
    

    这是因为对象实例和对象原型直接是通过一个指针链接的,这个指针是一个内部属性[[Prototype]],可以通过__proto__访问。我们通过对象字面量修改了Person.prototype指向的地址,然而对象实例的__proto__,并没有跟着一起更新,所以这就导致,实例还访问着原来的Person.prototype,所以建议不要通过这种方式去改变Person.prototype属性

4.构造函数和原型组合模式

  • 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
  • 适用场景: 需要创建多个类型确定的对象
  • 放在原型上可以节省空间(只需要加载一遍方法)
//在构造函数中只初始化一般函数
function Person(name, age) { 
 this.name = name
 this.age = age
}
Person.prototype.setName = function (name) {
 this.name = name
}

var p1 = new Person('Tom', 23)
var p2 = new Person('Jack', 24)
console.log(p1, p2)

优点:

  1. 解决了原型模式对于引用对象的缺点()
  2. 解决了原型模式没有办法传递参数的缺点
  3. 解决了构造函数模式不能共享方法的缺点

5.动态原型模式

function Person(name) {
  this.name = name
  if(typeof this.say != 'function') {
    Person.prototype.say = function(
    alert(this.name)
  }
}

优点:

  1. 可以在初次调用构造函数的时候就完成原型对象的修改
  2. 修改能体现在所有的实例中

6.寄生构造函数模式

function Person(name) {
  var o = new Object()
  o.name = name
  o.say = function() {
    alert(this.name)
  }
  return o
}

var peron1 = new Person('xiaofeixia')

优点:

  1. 和工厂模式基本一样,除了多了个new操作符

缺点:

  1. 和工厂模式一样,不能区分实例的类别

7.稳妥构造模式

function Person(name) {
  var o = new Object()
  o.say = function() {
    alert(name)
  }
}

var person1 = new Person('xiaofeixia');
person1.name  // undefined
person1.say() //xiaofeixia

优点:

  1. 安全,name好像成为了私有变量,只能通过say方法去访问

缺点:

  1. 不能区分实例的类别
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛小y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值