JavaScript创建对象的几种模式

面向对象编程

面向对象的基本方式

JavaScript是一种面向对象的编程语言,其基本标志就是类(class)的概念,如图所示,可以通过类创建一系列有相同属性和方法的对象。
对于JavaScript,创建对象一般有四种模式:

-构造函数
-工厂模式
-原型模式
-动态原型模式

工厂模式

最简单直接,构造一个函数,在函数内部创建一个空对象,标出各项参数,然后在创建对象的时候直接将单个对象对应的参数进行输入。(可以想象成在一个工厂,内部创造框架,然后根据个体再来个性化配置)
例子如下:

var peopleFactory = function(name,age,state){
  var temp = {};

  temp.age = age;
  temp.name = name;
  temp.state = state;

  temp.printPerson = function(){

    console.log(this.name + ',' + this.age + ',' +this.state);
  };

  return temp;
};

var person1 = peopleFactory('john',23,'CA');
var person2 = peopleFactory('kim',27,'SA');

工厂模式的好处在于,他解决了实例化对象大量重复创建的问题,但他的缺点在于,无法进行对象识别(指的是,无法表示出实例跟原型的关系,比如实例中使用temp对象创建后来的person等,但这样创建出来的结果,person并没有原型,可以说是量产没有生产厂家)。

alert(person1 instanceof Object); //true
alert(person1 instanceof peopleFactory);//false

person1是Object,但没办法体现寄生关系,而寄生关系的体现一般需要new函数来实现。

构造函数模式

使用构造函数的方法,用构造函数本身作为框架,构建对象时需要将单个对象的属性分别装配,可以理解为,出厂一个带场标的车架,再根据你的个人需求配置属性。

var peopleConstructor = function(name,age,state){
  this.age = age;
  this.name = name;
  this.state = state;

  this.printPerson = function(){
    console.log(this.name + ',' + this.age + ',' +this.state);
  };
};

var person1 = new peopleConstructor('john',23,'CA');
var person2 = new peopleConstructor('kim',27,'SC');

person1.printPerson();
person2.printPerson();

运用new的方法创建函数的同时,也为函数添加了寄生关系,即:
peopleConstructor作为构造函数,person1,person2分别为这个构造函数的两个实例。
在这种时候,对实例进行对象检测:

alert(person1 instanceof Object); //true
alert(person1 instanceof peopleConstructor);//true

可以证明构造函数模式可以成功的进行对象识别。

但是,构造函数的问题在于,每次创建一个新的实例,不仅是语句,连构造函数内部的方法都要全部重新执行一遍,这样在处理大量数据的时候会明显的降低效率。
并且注意,此时不同实例的同名方法,并没有任何关系:

person1.printPerson == person2.printPerson; //false

原型模式

这种模式里,当我们使用构造函数创建新对象时,它所有的属性都被直接添加到了这个对象实例的原型里。同时,所有的方法也都被添加在了原型里,新的对象实例就不需要
当实例的某项属性不存在时,他此项属性的属性值将会从其原型中继承。

var peopleProto = function(){
  
};
peopleProto.prototype.age = 0;
peopleProto.prototype.name = 'no name';
peopleProto.prototype.city = 'no city';

peopleProto.prototype.printPerson = function(){
  console.log(this.name + ',' + this.age + ',' + this.city);
};

var person1 = new peopleProto();
person1.name = 'john';
person1.age = 23;
person1.city = 'CA';

person1.printPerson();

但是必须注意一些特殊点:

在不给person1单独赋予某项属性时,他会从原型中继承,显示时也会直接显示此默认值。
然而当使用hasOwnProperty属性时,会报false。
表示此属性并非person1独有,而是继承自原型。

原型模式的问题则在于,你要提前建立一个空对象,且创建新对象时不能一步到位把各项属性输入,而是要一个一个单独进行。 为了解决这个问题,我们提出了动态原型模式。

动态原型

var peopleDynamicProto = function(name,age,state){

  this.age = age;
  this.name = name;
  this.state = state;

  if(typeof this.printPerson !== 'function'){
    peopleDynamicProto.prototype.printPerson = function(){
      console.log(this.name + ',' + this.age + ',' + this.state);
    };
  }
};
var person1 = new peopleDynamicProto('john',23,'CA');
person1.printPerson();

这样,将普通属性全部用构造函数方法添加,即能批量产生又能体现继承关系。对于函数方法则使用原型模式添加,这样就可以使实例的方法属性直接从其原型中继承。

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

推荐阅读更多精彩内容