javascript面向对象的封装简单介绍

虽然是一门基于对象的语言，虽然基本可以说任何东西都是对象，但是它又不是c#或者java那样典型的面向对象的语言，在当前的ES版本中，还没有类（class）这个概念，当然后续的版本可能会添加。

下面就介绍一下在javascript中如何将属性和方法封装成一个对象，需要的朋友可以做一下参考。

一.创建对象最为原始的方式:

假定把网站看成一个对象，那么它具有的基本属性就是网站名称和网址。

代码演示如下:

var Web = {
  webName : "",
  url : ""
}

下面就根据上面的对象结构创建两个实例对象，代码如下:

var antzone={};
antzone.webName="前端教程网";
antzone.url="pipipi.net";
var sina={};
sina.webName="新浪";
sina.url="sina.com";

上面创建了两个网站的对象实例，非常的简单，但是有个缺陷，就是两个对象之间没有任何的联系，如果要创建多个对象，那么在代码量上将是一个麻烦，当然理解上非常的简单。

二.对上面创建方式的改进:

下面我们创建一个函数，可以有效的减少代码量，提高效率。

代码实例如下:

function Web(webName,url){
  return {
　  webName:webName,
　　url:url
  }
}

通过上面的函数，创建对象就可以简单很多了，代码如此下:

var antzone=Web("前端教程网","pipipi.net");
var sina=Web("新浪","sina.com");

上面的方式虽然简单了，但是两个对象之间其实仍然没有任何联系。

三.使用构造函数创建:

javascript中，构造函数就是一个普通函数，只是使用方式不同而已。

关于构造函数的更多内容可以参阅javascript构造函数简单介一章节。

这个时候两个对象已经产生某种内在的联系，比如constructor属性都会指向构造函数Web。

代码实例如下:

function Web(webName,url){
  this.webName=webName;
　this.url=url;
}
 
var antzone=new Web("前端教程网","pipipi.net");
var sina=new Web("新浪","sina.com");
console.log(antzone.constructor==Web);
console.log(sina.constructor==Web);

关于constructor属性可以参阅javascript constructor一章节。

当然还有其他存在内在联系的属性，这里就不一一列举了。

四.完善构造函数方式:

上面的构造函数方式还是存在着一定的问题，比如我们再网站添加几个属性的话，那么代码就会变成如下:

function Web(webName,url){
  this.webName=webName;
　this.url=url;
  this.target="用户访问";
}

上面又增加了一个网站共同的属性，每次创建实例对象，都会开辟一个空间来存储这个共同的属性，对于效率和内存都是一种消耗，那么使用prototype原型就可以解决此问题，代码修改如下:

function Web(webName,url){
  this.webName=webName;
　this.url=url;
}
Web.prototype.target="用户访问";
 
var antzone=new Web("前端教程网","pipipi.net");
var sina=new Web("新浪","sina.com");
console.log(antzone.target);
console.log(sina.target);

关于prototype的更多内容可以参阅javascript prototype原型一章节。