JS创建对象的几种方式

JS创建对象的几种方式

一. 直接创建Object实例

方式一：

var person = new Object();
person.name = 'zzx';
person.age = 20;
person.job = 'Programmer';

person.sayName = function(){
    console.log(this.name);
};

方式二：

var person = {
    name: 'zzx';
    age: 20;
    job: 'Programmer';
    
    sayName: function(){
        console.log(this.name);
    }
}

这种方式的缺点显而易见，每次创建一个对象就需要手动设置它的每一个属性，造成大量代码重复，JS可以使用工厂模式的变体解决这个问题

二. 工厂模式

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}

var person1 = createPerson('zzx', 22, 'Programmer');
var person2 = createPerson('yzy', 20, 'Teacher');

console.log(person1);
//{ name: 'zzx', age: 20, job: 'Programmer', sayName: [Function] }

这种模式解决了创建多个相似对象的问题，但是却不知道当前创建的对象是什么类型，即是Person还是Robot不能判断出来

三. 构造函数模式

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

function Robot(name, age){
    this.name = name;
    this.age = age;
}

var person1 = new Person('zzx', 22, 'Programmer');
var person2 = new Person('yzy', 20, 'Teacher');

console.log(person1 instanceof Person); //true
console.log(person2 instanceof Robot); //false

构造函数名开头大写借鉴了其他面向对象语言，是为了区别普通函数。任何一个函数不通过new操作符调用，就是一个普通函数：

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

Person('zzx', 22, 'Programmer');
sayName(); //zzx

构造函数仍然存在缺点，就是其中的每个方法例如sayName()，在每次实例化时都会自动重新创建一遍，产生不同的作用域链，因此即使是同名函数也是不相等的，下面利用上述代码创建两个实例：

var person1 = new Person('zzx', 22, 'Programmer');
var person2 = new Person('yzy', 20, 'Teacher');

console.log(person1.sayName == person2.sayName); //flase

四. 原型模式

使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person(){
}

Person.prototype.name = 'zzx';
Person.prototype.age = 22;
Person.prototype.job = 'Programmer';
Person.prototype.sayName = function(){
    console.log(this.name);
}

var person1 = new Person();
person1.sayName(); //zzx
var person2 = new Person();
console.log(person1.sayName == person2.sayName); //true

这里将sayName()方法和所有的属性直接添加到了Person 的prototype属性中，构造函数就成了空函数，但是也能调用构造函数创建新对象。新队先后的属性和方法是所有实例共享的，person1和person2访问的都是同一组属性和同一个sayName()函数。

要理解原型模式工作原理，先要理解原型对象。

[原型对象]https://www.jianshu.com/p/b958bfd92a41

上述方式每添加一个属性和方法都要输入Person.prototype，因此还有更简单的方式是以对象字面量形式创建：

function Person(){
}

Person.prototype = {
    name: 'zzx',
    age: '22',
    job: 'Programmer',
    sayName: function(){
        console.log(this.name);
    }
};

var person1 = new Person();
console.log(person1 instanceof Person); //true
console.log(person1.constrcutor == Person); //false

但这里使用的语法本质上完全重写了默认的prototype对象（原型对象），因此本来会自动获得的constructor属性变成了新对象的constructor属性（指向Object构造函数），不再指向Person函数，此时instanceof能返回正确的结果，但是constructor已经无法确定对象类型了

如果constructor值真的很重要，可以通过下面这样特意将它设置回适当的值

function Person(){
}

Person.prototype = {
    constructor: Person,
    name: 'zzx',
    age: '22',
    job: 'Programmer',
    sayName: function(){
        console.log(this.name);
    }
};

原型模式也有缺点，当其中包含引用类型值属性时会出现问题：

function Person(){
}

Person.prototype = {
    constructor: Person,
    name: 'zzx',
    age: '22',
    job: 'Programmer',
    friends: ['wc', 'rt'],
    sayName: function(){
        console.log(this.name);
    }
};

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

person1.friends.push('lol');
console.log(person1.friends); //[ 'wc', 'rt', 'lol' ]
console.log(person2.friends); //[ 'wc', 'rt', 'lol' ]

由于数组存在于Person.prototype中，当向数组中添加了一个字符串时，所有的实例都会共享这个数组（基本值可以被实例屏蔽）

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

创建自定义类型的常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['wc', 'rt'];
}

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

六. 动态原型模式

这里只在 sayName()方法不存在的情况下，才会将它添加到原型中。

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

    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    }
}

var person1 = new Person('zzx', 22, 'Programmer');
person1.sayName();

七. 寄生构造函数模式

这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象；但从表面上看，这个函数又很像是典型的构造函数。

function Person(name, age, job){
    var o = new Object()
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}

var person1 = new Person('zzx', 22, 'Programmer');
person1.sayName();

这个例子中，除了使用 new 操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350