JavaScript学习笔记(六)
2023-06-13 09:14:15 时间
一、工厂方式
自己的理解:要创建很多个对象的实例,这些实例有相同的属性,但是有不同的属性值。这个时候就需要创个工厂函数(factoryfunction)。
工厂函数(factoryfunction):创建并返回特定类型的对象。
工厂函数中如果一个属性是方法的话,可以在工厂函数的外面定义对象的方法,然后通过属性指向该方法,从而可以避开每次都调用自己的属性方法,这样做使得每个对象都共享了同一个函数。
示例:
复制代码代码如下:
自己的理解:要创建很多个对象的实例,这些实例有相同的属性,但是有不同的属性值。这个时候就需要创个工厂函数(factoryfunction)。
工厂函数(factoryfunction):创建并返回特定类型的对象。
工厂函数中如果一个属性是方法的话,可以在工厂函数的外面定义对象的方法,然后通过属性指向该方法,从而可以避开每次都调用自己的属性方法,这样做使得每个对象都共享了同一个函数。
示例:
<scripttype="text/javascript">
//工厂函数外面定义对象的方法
functionShowNameFn(){
alert(this.Name);
}
//工厂方式创建对象
functionCreatBOFn(sName,iAge,bSex){
varBO=newObject();
BO.Name=sName;
BO.Age=iAge;
BO.Sex=bSex;
BO.ShowName=ShowNameFn;//该属性实际上是指向函数的指针,是一个方法
returnBO;
}
//按钮测试调用
functionFactoryCreateFn(){
varoPerson1=CreatBOFn("张三",18,true);//创建实例实际上是直接调用方法
oPerson1.ShowName();
}
</script>
总结:工厂函数这种方式定义类或对象,他在创建实例的时候就调用这个工厂函数。
二、构造函数方式
第一步选择类名,即构造函数的名字,BO名首字母大写,看下面代码发现跟上面的工厂函数类似。
示例:
//------第二种:构造函数方式--------------------------------
functionCar(color,money){
this.Color=color;
this.Money=money;
this.ShowMoney=function(){
alert(this.Money);
}
}
//按钮调用测试
functionNewCarFn(){
varCar1=newCar("红色","23万RMB");
Car1.ShowMoney();
}
//----------------------------------------------------------
比较上一种工厂函数方式的区别:
①构造函数内部没有创建对象,而是使用this关键字。
②使用new运算符调用构造函数。
三、原型方式
利用对象的prototype属性,可以把他看成创建新对象所依赖的原型,用空构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性。
原型方式的问题:
首先,这个构造函数没有参数,使用原型方式时,不能通过给构造函数传递参数初始化属性的值。必须在对象创建后才能改变属性的默认值。
其次,当属性指向的是对象,而不是函数时,对象却被多个实例共享的,其中一个改变将引起其他对象的改变。
示例:
//先定义一个空的构造函数
functionCar(){
}
//属性和方法直接赋予prototype属性
Car.prototype.Color="红色,";
Car.prototype.Money="20万";
Car.prototype.Drivers=newArray("小三","小四");
varCar1=newCar();
Car1.Drivers.push("小五");//实例1中给对象Drivers新增了值(实际上就是在原型里面加了多了个“小五”,所以当new第二个对象的时候读属性Drivers也出现了小五)
alert(Car1.Drivers);
varCar2=newCar();
alert(Car2.Drivers);//实例2中,对象中的值改变了!输出“小三,小四,小五”
四、混合的构造函数/原型方式
联合使用构造函数和原型方式,就可以像其他语言一样的创建对象。
构造函数定义对象的所有非函数属性,原型方式定义对象的函数属性(方法)。
示例:
functionBOStudent(name,age){
this.姓名=name;
this.年龄=age;
this.课程=newArray("语文","数学");
}
BOStudent.prototype.ShowName=function(){
alert(this.姓名);
};
//点击按钮调试
functionAdmixture(){
varstu1=newBOStudent("张三",20);//new第一个BO
varstu2=newBOStudent("李四",22);//new第二个BO
stu1.课程.push("物理");//给对象1添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
混合的构造函数/原型方式是ECMAScript采用的主要方式,他具有其他方式的特性,却没有他们的副作用。
五、动态原型方法
大多数的面向对象语言,定义类时,属性和方法都打包在一起。而上面的混合构造函数/原型方式属性和方法是分开的,有些人认为在构造函数内部找属性,在外面找方法的做法不合逻辑,因此也就产生了动态原型方法。
区别在于:赋予对象的方法的位置不同。动态原型方法是在构造函数的内部,而上面的第四种是在构造函数外部。
示例:
functionBODynamicPrototype(name,age){
this.姓名=name;
this.年龄=age;
this.课程=newArray("111","222");
//_initialized标识判断是否已经初始化过,即是否已给原型赋予了任何方法,该方法只创建并赋值一次
if(typeofBODynamicPrototype._initialized=="undefined"){
BODynamicPrototype.prototype.ShowName=function(){
alert(this.姓名);
};
BODynamicPrototype._initialized=true;
}
}
//点击按钮调试
functionDynamicPrototype(){
varstu1=newBODynamicPrototype("aaa",20);//new第一个BO
varstu2=newBODynamicPrototype("bbb",22);//new第二个BO
stu1.课程.push("333");//给对象1添加物理课程项
alert(stu1.课程);
alert(stu2.课程);
}
六、混合工厂方式
目的是创建假构造函数,只返回另一种对象的新实例。这种方式在对象方法内部管理方面与经典方式有着相同的问题。强烈建议:除非万不得已避免使用!
相关文章
- JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
- JavaScript笔记(12)之事件基础
- JavaScript笔记(14)
- JavaScript笔记(16)之事件高级
- JavaScript笔记(21)
- javascript系列学习笔记-this
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- 《JavaScript DOM编程艺术》学习笔记(二)详解编程语言
- JavaScript语言精粹学习笔记
- Javascript学习笔记1数据类型
- JavaScript学习笔记(十六)js事件
- javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
- javascript权威指南学习笔记之变量作用域分享
- JavaScript学习笔记(一)js基本语法
- JavaScript学习笔记记录我的旅程
- javascript学习笔记(五)Array数组类型介绍
- javascript学习笔记(六)Date日期类型
- javascript学习笔记(九)js对象设计模式
- javascript学习笔记(十七)检测浏览器插件代码
- JavaScript高级程序设计阅读笔记(二十)js错误处理
- JavaScript高级程序设计(第3版)学习笔记7js函数(上)
- JavaScript高级程序设计(第3版)学习笔记13ECMAScript5新特性
- Javascript学习笔记之函数篇(四):arguments对象
- Javascript学习笔记之对象篇(一):对象的使用和属性
- JavaScript学习笔记之基础中的基础
- JavaScript学习笔记之操作符
- Javascript中call与apply的学习笔记