`

<JavaScript类定义的几种方式>

 
阅读更多

先写一个函数,下面几个方式会用到

 

function showSalary(){
	alert(this.salary);
}

 

 

1. 工厂方式
先创建对象,然后添加属性和方法,不需要用NEW创建对象,
如果把函数写在内部,每次调用都会创建新的函数,放在外面,封装性不好

function createWorker(sAage,sSalary,sDepartment){

  var oWorker=new Object();
  
  oWorker.age=sAage;
  
  oWorker.salary=sSalary;
  
  oWorker.department=sDepartment;
//创建函数的方式一,指向我们文章开头写好的函数名,缺点是函数在对象的外部,封装性不好
  oWorker.tellSalary=showSalary;
//创建函数的方式二,在对象内部声明匿名函数,虽然封装在对象内部了,但没个对象会有不同的函数版本,浪费内存
  oWorker.tellSalary=function(){
  	alert(this.salary);
  }
  
  return oWorker;
}

var worker1=createWorker(24,1000,"Dev");
worker1.tellSalary();

var worker2=createWorker(24,3000,"Dev");
worker2.tellSalary();

 

2. 构造函数方式
在构造函数内部不创建对象,使用this关键字,创建时候用new操作符,如果把函数声明在内部,存在和工厂方式相同的问题,重复创建函数。为每个对象都创建独立的函数版本。放在外部,封装性不好

 

function Worker(sAage,sSalary,sDepartment){
	
  this.age=sAage;
  
  this.salary=sSalary;
  
  this.department=sDepartment;
  
  //同工厂方式
  this.tellSalary=showSalary;
  //同工厂方式
  this.tellSalary=function(){
  	alert(this.salary);
  }

}

var worker3=new Worker(24,1000,"Dev");
worker3.tellSalary();

var worker4=new Worker(24,3000,"Dev");
worker4.tellSalary();

 

3. 原型方式

创建对象时不能使用构造传递参数,必须先创建对象,然后改变属性的值

function Worker(){
}


Worker.prototype.age=24;

Worker.prototype.salary=1000;

Worker.prototype.department="Dev";

Worker.prototype.homeaddress=new Array("www","dd");

// 创建多个对象时,要想一想此处为什么不会和构造函数方式及工厂方式一样,创建多个函数的实例

//要理解prototype的概念,prototype是父对象的一个实例

Worker.prototype.tellSalary=function(){
	alert(this.age);
}

var worker5=new Worker();

var worker6=new Worker();

worker5.tellSalary();

alert(worker5.homeaddress)

//修改原型中引用类型的值,会影响到所有已经实例化的对象
worker6.homeaddress.push("gg") 

alert(worker5.homeaddress)

 

4. 混合原型和构造函数方式
可以传递参数构造对象,多个实例对象共享一个函数

function Worker(sAage,sSalary,sDepartment){
	
  this.age=sAage;
  
  this.salary=sSalary;
  
  this.department=sDepartment;
  
  this.homeaddress=new Array("www","dd");
  
}

//只创建tellSalary函数一个实例,没有内存浪费
Worker.prototype.tellSalary=function(){
	alert(this.age);
}

var worker7=new Worker(23,3000,"Dev");

var worker8=new Worker(43,1000,"Dev");

worker7.tellSalary();

alert(worker7.homeaddress) // ww dd

worker8.homeaddress.push("gg")

alert(worker7.homeaddress) //www dd

alert(worker8.homeaddress) // www dd gg

 

第四种的方式看上去也很散落,可以改进一下

 

 

var person=function(sname,sage){
   this.name=sname;
   this.age=sage;
};

person.prototype={
   tellName:function(){
         alert(this.name);
   },
   
   tellAge:function(){
         alert(this.age);
   }
};

 

优点:
  1. 可以传参数构造一个新对象
  2. 当有多个对象产生时,不会创建多个函数实体,没有内存浪费
  3. 封装想很好,属性和方法分开,

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式包括工厂方式、构造函数和原型方式,每种方法都有其特点和适用场景,接下来我们将详细探讨。 工厂方式是最早期的面向对象编程在JavaScript中的实践之一。使用工厂方式定义类,本质上就是...

    html、css、javascript语法手册(版).pdf

    JavaScript可以通过以下几种方式嵌入到HTML文档中: - **内联脚本**: 直接写在HTML元素的事件属性中,如onclick。 - **内部脚本**: 在`&lt;head&gt;`或`&lt;body&gt;`标签中使用`&lt;script&gt;`标签定义脚本。 - **外部脚本**: 使用...

    多功能脚本虚拟机1.3

    &lt;br/&gt;&lt;br/&gt;·支持资源文件的使用,可以定义资源文件包括字符串(可以写出多语言特征的程序)、图片、文件等&lt;br/&gt;&lt;br/&gt;·支持包含源文件,可以将一个大程序分成几个小模块&lt;br/&gt;&lt;br/&gt;·支持面向对象(指VBS的类和JS的...

    Javascript对象定义的几种方式

    Javascript对象定义的几种方式

    javaScript

    &lt;script type="text/javascript"&gt; window.onload = function() { var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ull'); oBtn.onclick = function() { if (oUl.style.display...

    多功能脚本虚拟机

    &lt;br/&gt;&lt;br/&gt;·支持资源文件的使用,可以定义资源文件包括字符串(可以写出多语言特征的程序)、图片、文件等&lt;br/&gt;&lt;br/&gt;·支持包含源文件,可以将一个大程序分成几个小模块&lt;br/&gt;&lt;br/&gt;·支持面向对象(指VBS的类和JS的...

    java远程调用kettle说明与代码.docx

    Kettle 主要提供了以下的几种基于 servlet 的服务: * `GetRootServlet`:获得 Carte 的根目录。 * `GetSlaveServlet`:获得子服务器的列表。 * `RegisterServlet`:注册子服务器。 * `GetJobStatusServlet`:获得...

    javascript经典特效---多层下拉菜单.rar

    本文将详细解析基于JavaScript实现的多层下拉菜单的原理、实现方式以及相关知识点。 首先,我们要理解JavaScript在网页中的角色。JavaScript是一种解释型的、面向对象的、动态类型的脚本语言,常用于网页和网络应用...

    学习web前端开发html必备的开发文档

    - **`&lt;script&gt;`**:嵌入或引用JavaScript代码。 - **`&lt;style&gt;`**:定义内联样式。 这些元素都在`&lt;head&gt;`标签内使用,帮助定义页面的元信息。 #### DIV布局原理 - **布局原则**:通常按照“从上到下、从左到右、从...

    JavaScript定义类或函数的几种方式小结

    JavaScript中定义类或函数,主要有以下几种方式: 1. 工厂方式 工厂方式是JavaScript中创建对象的一种模式,它通过一个工厂函数来封装创建对象的代码。通过工厂函数,我们可以创建多个具有相同属性和方法的对象实例...

    HTML5无序列表案例.pdf

    HTML5无序列表可以分为以下几种类型: * disc类型:使用实心圆作为项目符号。 * circle类型:使用空心圆作为项目符号。 * square类型:使用方形作为项目符号。 三、HTML5无序列表的应用 HTML5无序列表广泛应用...

    侧导航栏 JS书写( 简单实用 )

    JavaScript是一种广泛使用的客户端脚本语言,主要负责处理网页的动态效果和交互性。在我们的侧导航栏中,JavaScript将用于控制导航项的展开和收起,以及可能的其他交互功能。 1. HTML结构: 创建侧导航栏的第一步是...

    CSS打造的极酷漂亮滑动菜单

    &lt;li&gt;&lt;a href="#"&gt;子菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt; &lt;ul class="submenu"&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单4&lt;/a&gt;&lt;/li&gt; ...

    javascript实现日期选择

    &lt;li&gt;三&lt;/li&gt; &lt;li&gt;四&lt;/li&gt; &lt;li&gt;五&lt;/li&gt; &lt;li&gt;六&lt;/li&gt; &lt;li&gt;日&lt;/li&gt; &lt;/ul&gt; &lt;ul class="date"&gt; &lt;!-- 这里动态生成每个日期 --&gt; &lt;/ul&gt; &lt;/div&gt; ``` **总结** 通过上述介绍,我们可以看到 JavaScript 不仅可以...

    JavaScript实现鼠标滑过高亮显示纵向3级米灰色的导航菜单源码

    JavaScript是一种解释型的、轻量级的、基于原型的脚本语言,广泛应用于Web开发,用于处理客户端的动态效果和与用户的交互。ECMAScript是JavaScript的标准化规范,而JavaScript则是它的实现之一。 对于这个特定的...

    表格合并table单元合并

    通过上面的例子可以看到,可以采用以下几种方式: - **使用多维数组**:适用于简单的表格合并场景,易于理解和实现。 - **使用嵌套对象**:更灵活,适合处理复杂表格合并,可以通过递归方式简化代码。 #### 四、...

    CSS+HTML日历制作

    我们可以使用`&lt;th&gt;`元素来定义星期几的头部。例如: ```html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;日&lt;/th&gt; &lt;th&gt;一&lt;/th&gt; &lt;th&gt;二&lt;/th&gt; &lt;th&gt;三&lt;/th&gt; &lt;th&gt;四&lt;/th&gt; &lt;th&gt;五&lt;/th&gt; &lt;th&gt;六&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; ...

    制作一个简单HTML电影网页设计(HTML+CSS)

    部分包含了关于文档的信息,比如字符集设置`&lt;meta charset="UTF-8"&gt;`、视口设置`&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;`等元数据以及链接到外部资源如CSS文件和JavaScript文件。...

    011韩顺平轻松搞定网页设计(html+css+js)之javascript现场授课笔

    在HTML文档中,JavaScript代码可以通过以下几种方式嵌入: - 将代码放在`&lt;script&gt;`标签内部,位于`&lt;head&gt;`标签内。 - 将代码放在`&lt;script&gt;`标签内部,位于`&lt;body&gt;`标签内。 - 将JavaScript代码放在外部文件中,并...

Global site tag (gtag.js) - Google Analytics