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原型一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容