谈谈Js对象的那些事儿

今天，我们来谈谈关于JS对象的那些事儿。

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

对象包含了方法和属性，那有人会问方法和属性又是什么鬼？

其实方法和属性就是常见的函数和变量，只是在平常这些函数和变量是没有“主人的”，而当它们从属于一个主人（对象）后，我们就改称它们为方法与属性，只是名称发生了变化，而本质是没有变的。

知道了对象是什么后，那有人就会问了，在JS中怎样创建对象了，不要急，且听我慢慢道来！

创建一个对象的方法，大概可以分为以下的4种：

1. 工厂模式

var createFn = function(name,email){
	var obj = new Object();                   //原料
	obj.name = name;                          //加工
	obj.email = email;  
	obj.showInfo = function(){
           alert('姓名：'+ obj.name +'\n邮箱：'+ obj.email);
	}
        return obj;                               //出厂
}
var test1 = createFn('oxygen','iamyangqi@sina.com');
test1.showInfo();
var test2 = createFn('yq','iamyq@sina.com');
test2.showInfo();

说明：

所谓原料，就是创建一个空白对象，Object就是Js为我们提供的一个空白对象；

            所谓加工，就是我们给上面创建的空白对象添加各种属性和方法；

            所谓出厂，就是我们将加工好的Object作为函数的返回值，以便我们通过函数的调用，来创建一个新的对象。

这种方法创建对象思路是一目了然，很好理解，但也有着其缺点：

1) 没有使用我们常见创建Object的new方法，总感觉少了点什么。。。（略微有点强迫症，呵呵。。。）；

2) 函数重复，造成资源浪费。我们可以知道，test1和test2中均具有showInfo这一函数，实际上他们的功能一样，我们没有必要在每次创建新对象时，都创建它们。我们可以测试一下，它们是否是相等的： test1.showInfo==test2.showInfo，很明显不相等，因为它们属于不同的实例。

2.构造函数方式

为了解决工厂模式中的第一个问题，即没有new操作符的问题，我们又提供一个新的方法：构造函数方式。

var createFn = function(name,email){                  
	this.name = name;                          
	this.email = email;  
	this.showInfo = function(){
           alert('姓名：'+ this.name +'\n邮箱：'+ this.email);
	}                             
}
var test1 = new createFn('oxygen','iamyangqi@sina.com');
test1.showInfo();
var test2 = new createFn('yq','iamyq@sina.com');
test2.showInfo();

说明：在构造函数方式中，我们使用了new这一操作符，而使用这一操作符的前提就是将obj换成了this，而这里的this是什么，new又做了什么呢，我将上述代码改写成

var createFn = function(name,email){   
        //this = new Object();    使用new后，环境会自动将this隐式地指向一个新创的对象      
        this.name = name;                          
        this.email = email;  
        this.showInfo = function(){
           alert('姓名：'+ this.name +'\n邮箱：'+ this.email);
        }
        //return this;            最后再返回this对象给我们                            
}

可以看到，尽管我们解决了new的问题，但函数重复的问题还是没有解决；

3.原型模式

什么是原型？原型通俗地讲就是一个对象与生俱来的东西，就好比做蛋糕的模子，它只定义了一些基本的东西，例如形状，大小等等，但口味、颜色等东西，可以由我们自定义，具体的原型概念，我会在另一篇博文中介绍。使用原型，就是使用js对象的prototype这一属性。

var createFn = function(){                                    
}
createFn.prototype.name = 'oxygen';
createFn.prototype.email = 'iamyangqi@sina.com';
createFn.prototype.showInfo = function(){
     alert('姓名：'+ this.name +'\n邮箱：'+ this.email);
};
var test1 = new createFn();
test1.showInfo();

说明：采用原型模式，看似解决了上述的所有问题，解决函数重复的问题，但还有问题就是属性不能通过传参直接修改，这不利于我们修改，因此我们最后会推荐一种混合模式来彻底解决这一问题。

4.混合模式

混合模式就是将构造函数模式和原型模式相结合的一种模式。

var createFn = function(name,email){                  
        this.name = name;                          
        this.email = email;                  
}
 
createFn.prototype.showInfo = function(){
        alert('姓名：'+ this.name +'\n邮箱：'+ this.email);
};
var test1 = new createFn('oxygen','iamyangqi@sina.com');
test1.showInfo();
var test2 = new createFn('yq','iamyq@sina.com');
test2.showInfo();

具体而言，就是将属性放在构造函数中，方法则放在原型中，它们合起来就是整个原型对象中所含有的全部属性和方法。

以上就是，创建对象的几种常见方法。