创建对象(一)——工厂模式和构造函数模式

原文地址:创建对象(一)——工厂模式和构造函数模式

对象

我们常听到一句话:“在javascript中,一切皆是对象”。那么对象是什么呢?ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值,对象或者函数”。也就是说对象是一组没有特定顺序的值,它的每个属性或者方法都有一个名字,每个名字都映射到一个值。

创建对象有很多种方法,最原始的方法是这样的:

var person = {
    name: "wanghan",
    age: "20",
    getName: function() {
        console.log(this.name);
    }
}
console.log(person.age);      //20    访问属性的方式一
console.log(person['age']);   //20    访问属性的方式二
person.getName();             //wanghan

也可以这样写:

var person = { };
    person.name= "wanghan",
    person.age= "20",
    person.getName= function() {
        console.log(this.name);
    }

虽然这些方式都可以简单的创建一个对象,但是它们都有明显的弊端。假如说我们要创建一组相似的对象,这些对象拥有相同的属性名,只是属性值各不相同,我们用上面的办法就需要重复很多的代码,这显然是不合理的。还好我们有更机智的办法。

工厂模式

对于上面创建多个相似对象的问题,我们可以用一个函数来封装它所有的属性,这样我们只要给函数传入不同的参数(属性值),就能轻松创建出一个对象。就像工厂里加工产品一样,只要有一个模子,我们就可以复制出来无数个产品。

function person(a,b) {
    var o = {};      //这个对象就相当于模子
    o.name = a;
    o.age = b;
    o.getName=function () {
        console.log(this.name);
    };
    return o;       //函数被调用时就会返回这个对象
}
var fun = person("wanghan",20);
fun.getName();             //wanghan
console.log(fun.age);      //20
console.log(fun instanceof Object);      //true
console.log(fun instanceof person);      //false

简单来说,使用工厂模式创建对象的过程就是,在函数内创建一个对象,赋予属性及方法后再将对象返回。但是工厂模式创建的实例类型全都是Object,却不能识别到底是哪种对象类型。instanceof 用于判断一个变量是否是某个对象的实例,从上例最后两行代码就能看出,工厂模式就像暗箱操作,实例不知道自己是被谁创造的。但是好在“构造函数模式”可以解决这个问题。

构造函数模式

我们用构造函数重写上面的栗子:

function Person(a,b) {
    this.name = a;
    this.age = b;
    this.getName = function () {
        console.log(this.name);
    };
}
var fun = new Person("wanghan",20)
fun.getName();                          //wanghan
console.log(fun.age);                 //20
console.log(fun instanceof Object);   //true
console.log(fun instanceof Person);   //true

最后两行代码可以看出,在这个模式中,可以验证fun是构造函数Person的实例,说明了构造函数可以将它的实例标识为一种特定的类型,这正是胜于工厂模式的地方。
我们仔细观察构造函数与工厂模式创造的函数的不同之处:

  • 没有显式地创建对象;
  • 直接将属性和方法赋值给了this对象;
  • 没有return语句;
  • 函数首字母大写(为了区别于普通函数);
  • 调用函数时用到new操作符。

new操作符

构造函数跟其他函数的唯一区别,就在于调用它们的方式不同,任何函数,只要通过new操作符来调用,那它就可以作为构造函数。通过new调用函数时会经历以下步骤:

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

构造函数的问题

构造函数模式虽然好用,但也并非没有缺点,它的主要问题就是每个方法要在每个实例上创建一遍。在上面的栗子中,实例fun中创建了一个getName方法,但是如果我们再实例化一个对象,会再次创建一个getName方法,并且这两个同名函数是不相等的。

    function Person(a,b) {
        this.name = a;
        this.age = b;
        this.getName = function () {
            console.log(this.name);
        };
    }
    var fun = new Person("wanghan",20);
    var fun2 = new Person("wanghan",20);
    console.log(fun.getName == fun2.getName);  //false

这些getName方法实现的功能是完全一样的,但是由于分别属于不同的实例,就不得不为每个getName分配空间,这显然是不合理的,那要怎么样才能让所有的实例都访问同一个getName方法呢,这就要用到原型模式了。关于原型,且听下回分解

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

推荐阅读更多精彩内容