先写一个函数,下面几个方式会用到
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文档中: - **内联脚本**: 直接写在HTML元素的事件属性中,如onclick。 - **内部脚本**: 在`<head>`或`<body>`标签中使用`<script>`标签定义脚本。 - **外部脚本**: 使用...
<br/><br/>·支持资源文件的使用,可以定义资源文件包括字符串(可以写出多语言特征的程序)、图片、文件等<br/><br/>·支持包含源文件,可以将一个大程序分成几个小模块<br/><br/>·支持面向对象(指VBS的类和JS的...
Javascript对象定义的几种方式
<script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ull'); oBtn.onclick = function() { if (oUl.style.display...
<br/><br/>·支持资源文件的使用,可以定义资源文件包括字符串(可以写出多语言特征的程序)、图片、文件等<br/><br/>·支持包含源文件,可以将一个大程序分成几个小模块<br/><br/>·支持面向对象(指VBS的类和JS的...
Kettle 主要提供了以下的几种基于 servlet 的服务: * `GetRootServlet`:获得 Carte 的根目录。 * `GetSlaveServlet`:获得子服务器的列表。 * `RegisterServlet`:注册子服务器。 * `GetJobStatusServlet`:获得...
本文将详细解析基于JavaScript实现的多层下拉菜单的原理、实现方式以及相关知识点。 首先,我们要理解JavaScript在网页中的角色。JavaScript是一种解释型的、面向对象的、动态类型的脚本语言,常用于网页和网络应用...
- **`<script>`**:嵌入或引用JavaScript代码。 - **`<style>`**:定义内联样式。 这些元素都在`<head>`标签内使用,帮助定义页面的元信息。 #### DIV布局原理 - **布局原则**:通常按照“从上到下、从左到右、从...
JavaScript中定义类或函数,主要有以下几种方式: 1. 工厂方式 工厂方式是JavaScript中创建对象的一种模式,它通过一个工厂函数来封装创建对象的代码。通过工厂函数,我们可以创建多个具有相同属性和方法的对象实例...
HTML5无序列表可以分为以下几种类型: * disc类型:使用实心圆作为项目符号。 * circle类型:使用空心圆作为项目符号。 * square类型:使用方形作为项目符号。 三、HTML5无序列表的应用 HTML5无序列表广泛应用...
JavaScript是一种广泛使用的客户端脚本语言,主要负责处理网页的动态效果和交互性。在我们的侧导航栏中,JavaScript将用于控制导航项的展开和收起,以及可能的其他交互功能。 1. HTML结构: 创建侧导航栏的第一步是...
<li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul class="submenu"> <li><a href="#">子菜单3</a></li> <li><a href="#">子菜单4</a></li> ...
<li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>日</li> </ul> <ul class="date"> <!-- 这里动态生成每个日期 --> </ul> </div> ``` **总结** 通过上述介绍,我们可以看到 JavaScript 不仅可以...
JavaScript是一种解释型的、轻量级的、基于原型的脚本语言,广泛应用于Web开发,用于处理客户端的动态效果和与用户的交互。ECMAScript是JavaScript的标准化规范,而JavaScript则是它的实现之一。 对于这个特定的...
通过上面的例子可以看到,可以采用以下几种方式: - **使用多维数组**:适用于简单的表格合并场景,易于理解和实现。 - **使用嵌套对象**:更灵活,适合处理复杂表格合并,可以通过递归方式简化代码。 #### 四、...
我们可以使用`<th>`元素来定义星期几的头部。例如: ```html <table> <thead> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody> ...
部分包含了关于文档的信息,比如字符集设置`<meta charset="UTF-8">`、视口设置`<meta name="viewport" content="width=device-width,initial-scale=1">`等元数据以及链接到外部资源如CSS文件和JavaScript文件。...
在HTML文档中,JavaScript代码可以通过以下几种方式嵌入: - 将代码放在`<script>`标签内部,位于`<head>`标签内。 - 将代码放在`<script>`标签内部,位于`<body>`标签内。 - 将JavaScript代码放在外部文件中,并...