JavaScript对象创建

这几天花时间好好把js中的对象创建整理了一下,这块也是我之前比较薄弱的环节。

创建对象

在js中对于如下代码,有这样的引用关系

var Person = function(name) {
  this.name = name;
}

var person1 = new Person();
var person2 = new Person();

alert(Person == person1.constructor);  // true
alert(Person == person2.constructor);  // true
alert(Person.prototype.constructor == Person);  // true

也就是这样的引用关系


JS Objects references 引用自《JavaScript高级程序设计》

一般模式

这是用的最多的,也是最简单的方式。

var person = new Object();
person.name = 'Lilei';
person.age = 18;

alert(person.name);
alert(person.age);

或者简单点的方法就是

var person = {
  name: 'Lilei',
  age: 18
}

alert(person.name);
alert(person.age);

构造函数模式

先看代码

var Person = function(name) {
  this.name = name;
  this.age = 18;

  this.myName = function() {
    return this.name;
  }
}

var person = new Person('Lilei');
alert(person.myName());  // Lilei
alert(person.age);  // 18

new出person的过程中,实际上执行了一下这些操作:

  1. 创建一个新的Object对象;
  2. 将构造函数的作用域赋值给对象;(这时,this指针就指向了这个对象)
  3. 执行构造函数中的代码;(这就为对象中添加了属性和方法)
  4. 返回对象。

因此,构造函数方式创建的对象,他的所有属性和方法都是在新对象上的,而不定义在prototype上,所以同一个构造函数创建出来的对象,他们之间不会share相同的属性或方法。
这种方式有一个不足之处,就是构造函数中对this定义的函数也会有两个备份。

原型模式

var Person = function() {}

Person.prototype.name = 'Lilei';
Person.prototype.age = 18;

Person.prototype.myName = function() {
  return this.name;
}

var person = new Person();
alert(person.myName());
alert(person.age);

这种方式是直接把属性和方法都定义在了prototype上。这样,所有new出来的对象都会从prototype上继承到这些东西,他们share这些属性和方法。
这种方法解决了方法的share问题。
而属性的share问题呢?

var Person = function() {}

Person.prototype.name = 'Lilei';

var personA = new Person();
var personB = new Person();

personA.name = 'HanMeimei'  // 会在personA对象上创建name属性,因此不会去访问prototype上的name

alert(personA.name);  // HanMeimei
alert(personB.name);  // Lilei
alert(Person.prototype.name)  // Lilei

因为属性的查找链中,会先在当前对象上查找属性,如果没有就会去prototype上查找。而当修改personA的name时,会在personA上添加一个name属性。因此不会访问到share的name属性。而直接修改引用类型的属性呢。。。呵呵

var Person = function() {}

Person.prototype.addresses = ['addrA', 'addrB'];
Person.prototype.relationships = ['father', 'mother'];

var personA = new Person();
var personB = new Person();

personA.addresses.push('addrC');  // 会修改prototype上share的属性
personB.relationships = ['grandpa', 'grandma'];  // 会在对象上创建新的属性

alert(Person.prototype.addresses)  // addrA,addrB,addrC
alert(personA.addresses);  // addrA,addrB,addrC
alert(personB.addresses);  // addrA,addrB,addrC

alert(Person.prototype.relationships )  // father,mother
alert(personA.relationships );  // father,mother
alert(personB.relationships );  // grandpa,grandma

其实这个现象还是好理解的,也比较“合理”。
另外一个要注意的。如果想直接用json的方式对prototype赋值,以达到定义对象的作用时,一定要修改constructor,保证行为的一致:

var Person = function() {}

Person.prototype = {
  name: 'Lilei'
}

alert(Person.prototype.constructor == Person);  // false, 这时候constructor是Object

Person.prototype = {
  name: 'Lilei',
  constructor: Person  // 指向Person
}

alert(Person.prototype.constructor == Person);  // true

组合构造模式

就是对于share的属性或方法,通过原型模式定义,对于不share的,通过构造函数方式定义。

var Person = function(addresses) {
  this.addresses = addresses;  // no shared
}

// shared
Person.prototype.myAddresses = function() {
  return this.addresses;
}

getter&setter

var person = {
  _age: 18,
  isAdult: false
}

Object.defineProperty(person, 'age', {
  get: function() {
    return this._age;
  },
  set: function(age) {
    this._age = age;
    if (this._age > 18) {
      this.isAdult = true;
    }
  }
})

person.age = 25;
alert(person.isAdult);  // true

这里为person定义一个属性age。在操作age时,实际上会调用他的getter和setter,去操作age属性。
当然,这里直接调用_age也是可以的- -!

寄生构造模式

长这样的

var Person = function(name) {
  var person = new Object();
  person.name = name;

  return person;  // return重写了new的操作
}

var person = new Person('Lilei');  // 这里还是用new,但是return的是构造函数里创建的对象
alert(person.name);  // Lilei
alert(person.constructor);  // 他已经是Object的实例了

这个其实就是和工厂模式一样。实际上,构造函数在不返回值的时候会默认返回新对象实例。而这里return重写了new的返回值,就是person对象,因此name属性是不share的。
值得注意的是,这时person已经是Object的实例了

闭包模式

这样的

var Person = function(name) {
  var person = new Object();

  person.getName = function() {
    return name;
  }

  person.setName = function(newName) {
    this.name = newName;
  }

  return person;
}

var lilei = Person('Lilei');  // 可以不使用new,使用new效果一样
var han = Person('HanMeimei');

lilei.setName('Lilei Gates');

alert(lilei.getName());  // Lilei
alert(han.getName());  // HanMeimei
alert(lilei.constructor);  // 这时他也是Object的实例了

这种模式可以提供非常安全的访问方式
这里和寄生构造一样,对象已经是Object的实例了,跟Person没啥关系

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容