JavaScript 创建对象

工厂模式


工厂模式抽象了创建具体对象的过程,能够快速创建大量具有相似属性及方法的对象。

function createPerson(name, age, job) {
  var obj = {};
  obj.name = name;
  obj.age = age;
  obj.job = job;
  obj.sayName = function() {
    alert(this.name);
  };
  return obj;
}

var person1 = createPerson('paper_crane', 22, 'student');
var person2 = createPerson('crane', 22, 'Software Engineer');
person1.sayName();
person2.sayName();

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题,即创建出来的对象都是无类型的,无法使用instanceof操作符区别。

构造函数模式


构造函数名称以大写字母开头(建议但不强制),使用new操作符来调用构造函数。

function Person(name, age, job) {
  this.name = name;
  this.job = job;
  this.sayName = function() {
    alert(this.name);
  };
}

var person = new Person('paper_crane', 22, 'student');
person.sayName();        // paper_crane

上述的过程经历的四个步骤:

1.创建一个新的对象;

2.将构造函数的作用域赋给新对象(因此this对象指向了这个新的对象);

3.执行构造函数中的代码(为这个新对象添加属性);

4.返回新对象。

这种方式创建对象能够通过instanceof操作符检测实例是那个构造函数的对象,但是,这种方式的一个缺点就是每个方法都会在每个实例上重新创建一遍,当实例过多的时候,实际上会消耗较多的内存。

原型模式


我们创建的每个函数都有一个prototype属性,这个属性就是一个指针,指向一个对象;而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person() {}

Person.prototype.name = 'paper_crane';
Person.prototype.age = 22;
Person.prototype.job = 'student';
Person.prototype.sayName = function() {
  alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
person1.sayName();                            // paper_crane
person2.sayName();                            // paper_crane
alert(person1.sayName === person2.sayName);   // true

原型模式的缺点是:省略了为构造函数传递初始化参数这一环节,所有的属性和方法都共享,无法区分差别。

使用组合构造函数模式和原型模式


这是创建对象的最常见模式,能有效解决上述方式的缺点。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.colors = ['red', 'blue'];
}

Person.prototype = {
  constructor : Person,
  sayName : function() {
    alert(this.name);
  }
}

var person1 = new Person('paper_crane', 22, 'student');
var person2 = new Person('crane', 22, 'Software Engineer');

person1.colors.push('black');
alert(person1.colors);                       // red,blue,black
alert(person2.colors);                       // red,blue
alert(person1.colors === person2.colors);    // false
alert(person1.sayName === person2.sayName);  // true

此方式可以在创建实例的时候传入参数,同时共享方法。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值