JavaScript 学习笔记（六）
更新时间：2009年12月31日 23:19:18 作者：
JavaScript 定义类或对象,javascript步入高手行列必须要了解的。
一、 工厂方式
自己的理解：要创建很多个对象的实例，这些实例有相同的属性，但是有不同的属性值。这个时候就需要创个工厂函数（factory function）。
工厂函数（factory function）：创建并返回特定类型的对象。
工厂函数中如果一个属性是方法的话，可以在工厂函数的外面定义对象的方法，然后通过属性指向该方法，从而可以避开每次都调用自己的属性方法，这样做使得每个对象都共享了同一个函数。
示例：
<script type="text/javascript">
//工厂函数外面定义对象的方法
function ShowNameFn() {
alert(this.Name);
}
//工厂方式创建对象
function CreatBOFn(sName, iAge, bSex) {
var BO = new Object();
BO.Name = sName;
BO.Age = iAge;
BO.Sex = bSex;
BO.ShowName = ShowNameFn; //该属性实际上是指向函数的指针，是一个方法
return BO;
}
//按钮测试调用
function FactoryCreateFn() {
var oPerson1 = CreatBOFn("张三", 18, true); //创建实例实际上是直接调用方法
oPerson1.ShowName();
}
</script>
总结：工厂函数这种方式定义类或对象，他在创建实例的时候就调用这个工厂函数。
二、 构造函数方式
第一步选择类名，即构造函数的名字，BO名首字母大写，看下面代码发现跟上面的工厂函数类似。
示例：
//------第二种：构造函数方式--------------------------------
function Car(color, money) {
this.Color = color;
this.Money = money;
this.ShowMoney = function() {
alert(this.Money);
}
}
//按钮调用测试
function NewCarFn() {
var Car1 = new Car("红色", "23万RMB");
Car1.ShowMoney();
}
//----------------------------------------------------------
比较上一种工厂函数方式的区别：
① 构造函数内部没有创建对象，而是使用this关键字。
② 使用new运算符调用构造函数。
三、 原型方式
利用对象的prototype属性，可以把他看成创建新对象所依赖的原型，用空构造函数来设置类名，然后所有的属性和方法都被直接赋予prototype属性。
原型方式的问题：
首先，这个构造函数没有参数，使用原型方式时，不能通过给构造函数传递参数初始化属性的值。必须在对象创建后才能改变属性的默认值。
其次，当属性指向的是对象，而不是函数时，对象却被多个实例共享的，其中一个改变将引起其他对象的改变。
示例：
//先定义一个空的构造函数
function Car() {
}
//属性和方法直接赋予prototype属性
Car.prototype.Color = "红色，";
Car.prototype.Money = "20万";
Car.prototype.Drivers = new Array("小三", "小四");
var Car1 = new Car();
Car1.Drivers.push("小五"); //实例1中给对象Drivers新增了值(实际上就是在原型里面加了多了个“小五”,所以当new第二个对象的时候读属性Drivers也出现了小五)
alert(Car1.Drivers);
var Car2 = new Car();
alert(Car2.Drivers); //实例2中，对象中的值改变了！输出“小三，小四，小五”
四、 混合的构造函数/原型方式
联合使用构造函数和原型方式，就可以像其他语言一样的创建对象。
构造函数定义对象的所有非函数属性，原型方式定义对象的函数属性（方法）。
示例：
function BOStudent(name,age) {
this.姓名 = name;
this.年龄 = age;
this.课程 = new Array("语文","数学");
}
BOStudent.prototype.ShowName = function() {
alert(this.姓名);
};
//点击按钮调试
function Admixture() {
var stu1 = new BOStudent("张三", 20); //new第一个BO
var stu2 = new BOStudent("李四", 22); //new第二个BO
stu1.课程.push("物理"); //给对象1 添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
混合的构造函数/原型方式是ECMAScript采用的主要方式，他具有其他方式的特性，却没有他们的副作用。
五、 动态原型方法
大多数的面向对象语言，定义类时，属性和方法都打包在一起。而上面的混合构造函数/原型方式属性和方法是分开的，有些人认为在构造函数内部找属性，在外面找方法的做法不合逻辑，因此也就产生了动态原型方法。
区别在于：赋予对象的方法的位置不同。动态原型方法是在构造函数的内部，而上面的第四种是在构造函数外部。
示例：
function BODynamicPrototype(name, age) {
this.姓名 = name;
this.年龄 = age;
this.课程 = new Array("111", "222");
//_initialized标识判断是否已经初始化过，即是否已给原型赋予了任何方法，该方法只创建并赋值一次
if (typeof BODynamicPrototype._initialized == "undefined") {
BODynamicPrototype.prototype.ShowName = function() {
alert(this.姓名);
};
BODynamicPrototype._initialized = true;
}
}
//点击按钮调试
function DynamicPrototype() {
var stu1 = new BODynamicPrototype("aaa", 20); //new第一个BO
var stu2 = new BODynamicPrototype("bbb", 22); //new第二个BO
stu1.课程.push("333"); //给对象1 添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
六、 混合工厂方式
目的是创建假构造函数，只返回另一种对象的新实例。这种方式在对象方法内部管理方面与经典方式有着相同的问题。强烈建议：除非万不得已避免使用！
自己的理解：要创建很多个对象的实例，这些实例有相同的属性，但是有不同的属性值。这个时候就需要创个工厂函数（factory function）。
工厂函数（factory function）：创建并返回特定类型的对象。
工厂函数中如果一个属性是方法的话，可以在工厂函数的外面定义对象的方法，然后通过属性指向该方法，从而可以避开每次都调用自己的属性方法，这样做使得每个对象都共享了同一个函数。
示例：
复制代码 代码如下:
<script type="text/javascript">
//工厂函数外面定义对象的方法
function ShowNameFn() {
alert(this.Name);
}
//工厂方式创建对象
function CreatBOFn(sName, iAge, bSex) {
var BO = new Object();
BO.Name = sName;
BO.Age = iAge;
BO.Sex = bSex;
BO.ShowName = ShowNameFn; //该属性实际上是指向函数的指针，是一个方法
return BO;
}
//按钮测试调用
function FactoryCreateFn() {
var oPerson1 = CreatBOFn("张三", 18, true); //创建实例实际上是直接调用方法
oPerson1.ShowName();
}
</script>
总结：工厂函数这种方式定义类或对象，他在创建实例的时候就调用这个工厂函数。
二、 构造函数方式
第一步选择类名，即构造函数的名字，BO名首字母大写，看下面代码发现跟上面的工厂函数类似。
示例：
复制代码 代码如下:
//------第二种：构造函数方式--------------------------------
function Car(color, money) {
this.Color = color;
this.Money = money;
this.ShowMoney = function() {
alert(this.Money);
}
}
//按钮调用测试
function NewCarFn() {
var Car1 = new Car("红色", "23万RMB");
Car1.ShowMoney();
}
//----------------------------------------------------------
比较上一种工厂函数方式的区别：
① 构造函数内部没有创建对象，而是使用this关键字。
② 使用new运算符调用构造函数。
三、 原型方式
利用对象的prototype属性，可以把他看成创建新对象所依赖的原型，用空构造函数来设置类名，然后所有的属性和方法都被直接赋予prototype属性。
原型方式的问题：
首先，这个构造函数没有参数，使用原型方式时，不能通过给构造函数传递参数初始化属性的值。必须在对象创建后才能改变属性的默认值。
其次，当属性指向的是对象，而不是函数时，对象却被多个实例共享的，其中一个改变将引起其他对象的改变。
示例：
复制代码 代码如下:
//先定义一个空的构造函数
function Car() {
}
//属性和方法直接赋予prototype属性
Car.prototype.Color = "红色，";
Car.prototype.Money = "20万";
Car.prototype.Drivers = new Array("小三", "小四");
var Car1 = new Car();
Car1.Drivers.push("小五"); //实例1中给对象Drivers新增了值(实际上就是在原型里面加了多了个“小五”,所以当new第二个对象的时候读属性Drivers也出现了小五)
alert(Car1.Drivers);
var Car2 = new Car();
alert(Car2.Drivers); //实例2中，对象中的值改变了！输出“小三，小四，小五”
四、 混合的构造函数/原型方式
联合使用构造函数和原型方式，就可以像其他语言一样的创建对象。
构造函数定义对象的所有非函数属性，原型方式定义对象的函数属性（方法）。
示例：
复制代码 代码如下:
function BOStudent(name,age) {
this.姓名 = name;
this.年龄 = age;
this.课程 = new Array("语文","数学");
}
BOStudent.prototype.ShowName = function() {
alert(this.姓名);
};
//点击按钮调试
function Admixture() {
var stu1 = new BOStudent("张三", 20); //new第一个BO
var stu2 = new BOStudent("李四", 22); //new第二个BO
stu1.课程.push("物理"); //给对象1 添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
混合的构造函数/原型方式是ECMAScript采用的主要方式，他具有其他方式的特性，却没有他们的副作用。
五、 动态原型方法
大多数的面向对象语言，定义类时，属性和方法都打包在一起。而上面的混合构造函数/原型方式属性和方法是分开的，有些人认为在构造函数内部找属性，在外面找方法的做法不合逻辑，因此也就产生了动态原型方法。
区别在于：赋予对象的方法的位置不同。动态原型方法是在构造函数的内部，而上面的第四种是在构造函数外部。
示例：
复制代码 代码如下:
function BODynamicPrototype(name, age) {
this.姓名 = name;
this.年龄 = age;
this.课程 = new Array("111", "222");
//_initialized标识判断是否已经初始化过，即是否已给原型赋予了任何方法，该方法只创建并赋值一次
if (typeof BODynamicPrototype._initialized == "undefined") {
BODynamicPrototype.prototype.ShowName = function() {
alert(this.姓名);
};
BODynamicPrototype._initialized = true;
}
}
//点击按钮调试
function DynamicPrototype() {
var stu1 = new BODynamicPrototype("aaa", 20); //new第一个BO
var stu2 = new BODynamicPrototype("bbb", 22); //new第二个BO
stu1.课程.push("333"); //给对象1 添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
六、 混合工厂方式
目的是创建假构造函数，只返回另一种对象的新实例。这种方式在对象方法内部管理方面与经典方式有着相同的问题。强烈建议：除非万不得已避免使用！
相关文章
这篇文章主要介绍了JS实现滑动拼图验证功能,结合完整实例形式分析了JS滑动拼图验证相关原理、实现步骤与操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了原生js实现移动端Touch轮播图的方法步骤，touch轮播图其实就是通过手指的滑动，来左右切换轮播图，touch轮播图其实就是通过手指的滑动，来左右切换轮播图，2019-01-01
这篇文章主要介绍了JS控制只能输入数字并且最多允许小数点两位,本文给大家提到js如何限制input输入框只能输入数字问题，需要的朋友可以参考下2019-11-11
echarts柱状图是用柱状图的形式展示数据,这样看起来比较直观,下面这篇文章主要给大家介绍了关于Echart Bar双柱状图样式的相关资料,需要的朋友可以参考下2021-08-08
chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket
项目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并实时显示,在JavaScript中,使用Stream流通常指的是处理数据流的一种方式,它们允许数据被处理成块,而不是一次性处理整个数据集,这对于处理大量数据或者来自网络请求的数据非常有用,2024-07-07
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下2022-09-09
查询条件清空将input、select的值清空，下面有个不错的示例，需要的朋友可以了解下2014-01-01
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
今天小编就为大家分享一篇layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了js实现input的赋值问题小结,在实际的开发中,为了页面的美观,可能用到一些框架,比如EasyUI框架,文中介绍了easyui的input框赋值代码,感兴趣的朋友一起看看吧2023-12-12
在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如事件绑定、事件监听、事件委托（事件代理）等,这篇文章主要给大家介绍了关于JS绑定事件的3种方法,需要的朋友可以参考下2023-11-11
最新评论