JS入门难点解析10-创建对象

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)
(注2:更多内容请查看我的目录。)

1. 简介

学习JS,对象是一个绕不开的话题。本章将由浅入深探讨对象的创建方法。

2. 创建单个对象的三种简单办法

简单的对象创建方法,主要用于创建单个的对象。但是不适合创建多个对象。就像是手工制品,不适合量产。

2.1 对象字面量

最简单的对象创建方法,莫过于使用对象字面量了。

var doll = {
    name: "Nicholas",
    age: 29,
    sayName: function () {
        console.log(this.name);
    }
};

这种写法简单干净,给人一种数据封装的感觉,是开发人员最青睐的创建对象的方法。要注意,使用对象字面量的方法来定义对象,属性名会自动转换成字符串。另外,一般地,对象字面量的最后一个属性后的逗号将忽略,但在IE7-浏览器中导致错误,所以最后一个属性后面最好不要带逗号。

2.2 new + 内置对象

最常用的就是new操作符后跟Object构造函数。

var doll = new Object();
//如果不给构造函数传递参数可以不加括号 var doll= new Object;
doll.name = 'Nicholas';
doll.age = 29;

当然其他内置对象还有Array,Date,RegExp,Function,基本包装类型等。比如:

var colors = new Array("red", "blue", "green");

2.3 Object.create()

ES5定义了一个名为Object.create()的方法,它创建一个新对象,第一个参数就是这个对象的原型,第二个可选参数用以对对象的属性进行进一步描述。

var o1 = Object.create({x:1,y:1});   // o1继承了属性x和y
console.log(o1.x);  // 1

可以通过传入参数null来创建一个没有原型的新对象,但通过这种方式创建的对象不会继承任何东西,甚至不包括基础方法。比如toString()和valueOf()。

var o2 = Object.create(null); // o2不继承任何属性和方法
var o1 = {};
console.log(Number(o1));  // NaN
console.log(Number(o2));  // Uncaught TypeError: Cannot convert object to primitive value

如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象),需要传入Object.prototype。

var o3 = Object.create(Object.prototype); // o3和{}和new Object()一样
var o1 = {};
console.log(Number(o1));  // NaN
console.log(Number(o3));  // NaN

Object.create()方法的第二个参数是属性描述符

var o1 = Object.create({z:3},{
  x:{value:1,writable: false,enumerable:true,configurable:true},
  y:{value:2,writable: false,enumerable:true,configurable:true}
}); 
console.log(o1.x,o1.y,o1.z);  // 1 2 3

3. 创建多个对象的5种模式

虽然第二节中介绍的三种方法可以方便地创建一个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。例如,要创建10个具有name,age属性和sayName方法的对象。利用对象字面量方法只能如下:

var doll1 = {
    name: "Nicholas",
    age: 29,
    sayName: function () {
        console.log(this.name);
    }
};
var doll2 = {
    name: "Nicholas",
    age: 29,
    sayName: function () {
        console.log(this.name);
    }
};
...
var doll10 = {
    name: "Nicholas",
    age: 29,
    sayName: function () {
        console.log(this.name);
    }
};

为了解决这个问题,人们开始使用工厂模式来创建对象。该模式抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。这就好比原来是手工做一样玩具,而现在你把流程程序化,做成一台机器,用机器代替了人工。

3.1 工厂模式

function createDoll(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function () {
        alert(this.name);
    };
    return o;
}
var doll1 = createDoll("Nicholas", 29);
var doll2 = createDoll("Greg", 27);

createDoll函数能够根据接收的参数来创建一个包含所有必要信息的Doll对象,可以无数次地调用这个函数,每次都能返回具有name,age属性和sayName方法的对象。
工厂模式虽然解决了创建多个相似对象的问题,但没有解决对象识别的问题,因为使用该模式并没有给出对象的类型。你并不知道doll1和doll2都是createDoll创建出来的对象,你甚至不知道它们是不是一类东西。或者说,你虽然用机器做出了玩具,但是你并不知道这是同一个机器造出的同一类玩具。
那怎么办呢?当然是品牌化了。

3.2 构造函数模式

前面说过,你可以用原生构造函数来创建对象。同样,你也可以通过创建自定义的构造函数,来定义自定义对象类型的属性和方法。创建自定义的构造函数意味着可以将它的实例标识为一种特定的类型,而这正是构造函数模式胜过工厂模式的地方。该模式没有显式地创建对象,直接将属性和方法赋给了this对象,且没有return语句。

function Doll(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
    };
}
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);

利用这种方法,我们给Doll定义了品牌‘Doll’,doll1和doll2都是Doll对象的实例,当然其本身也是Object的实例,Object本身就是最大的品牌。如下:

alert(doll1 instanceof Object);  // true
alert(doll1 instanceof Doll);  // true
alert(doll2 instanceof Object);  // true
alert(doll2 instanceof Doll);  // true

注意,构造函数模式与工厂模式的区别:

  1. 没有显示地创建对象。
  2. 直接将属性和方法赋给了this对象。
  3. 没有return。

此外,要使用构造函数模式创建对象,必须使用new操作符。以这种方式调用构造函数实际会经历以下步骤:

  1. 创建一个新对象。
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)(参考JS入门难点解析7-this)。
  3. 执行函数中的代码(为这个新对象添加属性)。
  4. 返回新对象。

那么构造函数模式的缺点是什么呢?使用构造函数的主要问题是每个方法都要在每个实例上重新创建一遍,创建多个完成相同任务的方法完全没有必要,浪费内存空间。那么,最简单的办法,把函数方法定义在外部不就行了么。

3.2.1 构造函数拓展模式

在构造函数模式的基础上,把方法定义转移到构造函数外部,可以解决方法被重复创建的问题。

function Doll(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = sayName;
}
function sayName() {
    alert(this.name);
};
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);

但是,问题又来了。在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。而且,如果对象需要定义很多方法,就要定义很多全局函数,严重污染全局空间,这个自定义的引用类型没有封装性可言了。

当然构造函数不止前述所说,还有以下两个变种。

3.2.2 寄生构造函数模式

该模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。该模式是工厂模式和构造函数模式的结合。

寄生构造函数模式与构造函数模式有相同的问题,每个方法都要在每个实例上重新创建一遍,创建多个完成相同任务的方法完全没有必要,浪费内存空间。另外,使用该模式返回的对象与构造函数或者与构造函数的原型属性之间没有任何关系。因此,使用instanceof运算符和prototype属性都没有意义。所以,该模式要尽量避免使用。这种模式有点类似于你借别人的工厂生产的产品,无法贴上他们品牌的标识。你借用的是工厂,但不是品牌。

function Doll(name,age){
    // 这里也可以是new Array或者其他构造函数,用于寄生
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var doll1 = new Doll("Nicholas",29);
var doll2 = new Doll("Greg",25);
//具有相同作用的sayName()方法在doll1和doll2这两个实例中却占用了不同的内存空间
console.log(doll1.sayName === doll2.sayName);  // false
console.log(doll1 instanceof Doll);  // false
console.log(doll1.__proto__ === Doll.prototype);  // false
3.2.3 稳妥构造函数模式

所谓稳妥对象指没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)或者在防止数据被其他应用程序改动时使用。

稳妥构造函数与寄生构造函数模式相似,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new操作符调用构造函数。

function Doll(name,age){
    //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName = function(){
        console.log(name);
    };
    //返回对象
    return o;
}
//在稳妥模式创建的对象中,除了使用sayName()方法之外,没有其他方法访问name的值
var doll = Person("Nicholas",29);
doll.sayName();//"Nicholas"

与寄生构造函数模式相似,使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系,因此instanceof操作符对这种对象也没有什么意义。好像是工厂针对客户的定制生产一样。

3.3 原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。就好像做了一个模具,直接把信息刻在模具,就可以利用该模具实现复制量产了。

function Doll() {
}
Doll.prototype.name = "Nicholas";
Doll.prototype.age = 29;
Doll.prototype.job = "Software Engineer";
Doll.prototype.sayName = function () {
    alert(this.name);
};
var doll1 = new Doll();
doll1.sayName();   //"Nicholas"
var doll2 = new Doll();
doll2.sayName(); //"Nicholas"
alert(doll1.sayName == doll2.sayName);  //true

为原型一个个添加属性和方法太慢反,我们可以考虑使用字面量来创建原型对象。

function Doll(){};
Doll.prototype = {
    name: "Nicholas",
    age: 29,
    sayName : function(){
        console.log(this.name);
    }
};
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//false
console.log(doll1.constructor === Object);//true

但是,经过对象字面量的改写后,constructor不再指向Doll了。因为此方法完全重写了默认的prototype对象,使得Doll.prototype的自有属性constructor属性不存在,只有从原型链中找到Object.prototype中的constructor属性。
所以,可以显式地设置原型对象的constructor属性。

function Doll(){};
Doll.prototype = {
    constructor:Doll,
    name: "Nicholas",
    age: 29,
    sayName : function(){
        console.log(this.name);
    }
};
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//true
console.log(doll1.constructor === Object);//false

由于默认情况下,原生的constructor属性是不可枚举的,更妥善的解决方法是使用Object.defineProperty()方法,改变其属性描述符中的枚举性enumerable。

function Doll(){};
Doll.prototype = {
    name: "Nicholas",
    age: 29,
    sayName : function(){
        console.log(this.name);
    }
};
Object.defineProperty(Doll.prototype,'constructor',{
    enumerable: false,
    value: Doll
});
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//true
console.log(doll1.constructor === Object);//false

原型模式问题在于引用类型值属性会被所有的实例对象共享并修改,这也是很少有人单独使用原型模式的原因。

function Doll(){};
Doll.prototype = {
    constructor:Doll,
    name: "Nicholas",
    age: 29,
    colors: ['blue', 'green'],
    sayName : function(){
        console.log(this.name);
    }
};
var doll1 = new Doll();
var doll2 = new Doll();
doll1.colors.push('red');
console.log(doll1.colors);//['blue', 'green','red']
console.log(doll2.colors);//['blue', 'green','red']
console.log(doll1.colors === doll2.colors);//true

3.4 组合模式(使用最广泛)

组合使用构造函数模式和原型模式是创建自定义类型的最常见方式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本,同时又共享对方法的引用,最大限度地节省了内存。该模式是目前使用最广泛、认同度最高的一种创建自定义对象的模式。

function Doll(name, age) {
    this.name = name;
    this.age = age;
    this.colors = ['blue','green'];
}
Doll.prototype = {
    constructor:Doll,
    sayName : function(){
        console.log(this.name);
    }
};
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);
doll1.colors.push('red');
console.log(doll1.colors);//['blue', 'green','red']
console.log(doll2.colors);//['blue', 'green']
console.log(doll1.colors === doll2.colors);//false
console.log(doll1.sayName === doll2.sayName);//true

3.5 动态原型模式

动态原型模式将组合模式中分开使用的构造函数和原型对象都封装到了构造函数中,然后通过检查方法是否被创建,来决定是否初始化原型对象。

function Doll(name, age) {
//属性
    this.name = name;
    this.age = age;
    this.colors = ['blue','green'];
}
//方法
    if(typeof this.sayName != "function"){
        Doll.prototype.sayName = function(){
            console.log(this.name);
        };
        Doll.prototype.sayColors = function(){
            console.log(this.colors);
        };
    }
};
var doll1 = new Doll("Nicholas", 29);
doll1.sayName();//"Nicholas"

这里,只有在sayName和sayColors方法不存在的情况下,才会将它们添加到原型中。这段代码只会在初次调用构造函数时才执行。此后,原型已经初始化,不需要再做修改。另外,这里对原型所做的修改,能够立即在所有实例中得到反映。因此,除了不能使用对象字面量重写原型外,这种方法可谓相当完美。
注意,使用动态原型模式时:

  1. 如果原型对象中包含多个语句,只需要检测其中一个语句即可。
  2. 不能使用对象字面量重写原型。因为在已经创建了实例的情况下重写原型,就会切断现有实例与新原型的联系。

参考

javascript面向对象系列第二篇——创建对象的5种模式
深入理解javascript对象系列第一篇——初识对象
JavaScript构造函数及原型对象
BOOK-《JavaScript高级程序设计(第3版)》第6章

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

推荐阅读更多精彩内容