JS中类或对象的定义说明
2023-06-13 09:15:19 时间
我们知道,JS是面向对象的。谈到面向对象,就不可避免的要涉及类的概念。一般像c#,java这些强类型语言都有固定的定义类的语法。而JS的不同之处在于它能使用各种方法实现自己的类和对象。一般的实现有以下几种方式:
1.工厂方式
工厂方式是指创建一个返回特定对象类型的工厂函数,示例代码如下:
复制代码代码如下:
1.工厂方式
工厂方式是指创建一个返回特定对象类型的工厂函数,示例代码如下:
functioncreateCar(sColor,iDoors,iMpg)
{
varoTempCar=newObject;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=function()
{
alert(this.color);
}
returnoTempCar;
}
varoCar1=createCar("red",4,23);
varoCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
这种方式每次调用它的工厂函数,都会创建一个新对象。可问题在于每次生成一个新对象,都要创建新函数showColor,这使得每个对象都有自己的showColor版本,而事实上,所有的对象都共享同一个函数.为解决这个问题,开发者在工厂函数的外面定义了对象的方法,然后赋予对象一个指针指向这个这个函数,如下
functionshowColor()
{
alert(this.color);
}
functioncreateCar(sColor,iDoors,iMpg)
{
varoTempCar=newObject;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=showColor;
returnoTempCar;
}
varoCar1=createCar("red",4,23);
varoCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();
这样就不需要为每一个对象都创建自己的showColor函数,而只是创建指向这个函数的指针.这从功能上解决了问题,但是该函数却不像对象的方法。于是,引出了构造函数的方式。
2.构造函数方式
构造函数与工厂函数很相似,示例代码如下:
functionCar(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.showColor=function()
{
alert(this.color);
}
}
varoCar1=newCar("red",4,23);
varoCar2=newCar("blue",3,25);
在构造函数中,内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码之前先创建一个对象,只有用this才能访问这个对象。但是这会遇到什么问题呢,很显然,它的每个对象也都会创建自己的showColor函数版本。为解决这个问题,引出了以下的原型方式.
3.原型方式
该方式利用了对象的prototype属性,可把它看成创建新对象所依赖的原型。这里,用空构造函数来设置类名。然后把所有的方法和属性都直接赋予prototype属性。如下:
functionCar()
{}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.drivers=newArray("Mike","Sue");
Car.prototype.showColor=function()
{
alert(this.color);
}
原型方式只能直接赋值,而不能通过给构造函数传递参数初始化属性的值。在用这种方式时,会遇到两个问题,不知道大家注意到没有。第一问题是采用这种方式必须创建每个对象后才能改变属性的默认值。而不能在创建每个对象时都会直接有自己所需要的属性值。这点很讨厌。第二个问题在于属性所指的是对象的时候。函数共享不会出现任何问题,但是对象共享却会出现问题。因为每个实例一般都要实现自己的对象。
如下面:
varoCar1=newCar();
varoCar2=newCar();
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//输出"Mike,Sue,Matt"
alert(oCar2.drivers);//输出"Mike,Sue,Matt"
因此drivers属性只是指向对象的指针,所以所有的实例事实上共享同一个对象。由于出现这这些问题,我们引出了下面的联合使用构造函数和原型方式。
4.混合的构造函数/原型方式
这种方式的思想是用构造函数定义对象的所有非函数属性(包括普通属性和指向对象的属性),用原型方式定义对象的函数属性(方法)。结果使得所有的函数都只被创建一次,而每个对象都有自己的对象属性实例。示例代码如下:
functionCar(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=newArray("Mike","Sue");
}
Car.prototype.showColor=function()
{
alert(this.color);
}
varoCar1=newCar("red",4,23);
varoCar2=newCar("blue",3,25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//输出"Mike,Sue,Matt"
alert(oCar2.drivers);//输出"Mike,Sue"
由实例代码可知,这种方式同时解决了上一种方式的两个问题。不过,采用这种方式,仍有些开发者觉得不够完美。
5.动态原型方式
我们可知,大多数面向对象语言都对属性和方法进行了视觉上的封装。而上述方式的showColor方法却定义在了类的外面。因此,他们设计了动态原型方法。这种方式的基本思想和混合的构造函数/原型方式相同,唯一不同之处在于对象方法的位置。如下所示:
functionCar(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=newArray("Mike","Sue");
if(typeofCar._initialized=="undefined")
{
Car.prototype.showColor=function()
{
alert(this.color);
}
}
Car._initialized=true;
}
这种方式Car.prototype.showColor只被创建一次。这样依赖,这段代码更像其他语言中的类定义了。
6.混合工厂方式
这种方式通常是不能应该前一种方式的变通方法。它的目的是创建假构造函数,只返回另一种对象的新实例。
functioncreateCar()
{
varoTempCar=newObject;
oTempCar.color=“red”;
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor=function()
{
alert(this.color);
};
returnoTempCar;
}
varcar=newCar();
由于在Car()构造函数内部调用了new运算符,所以自动忽略第二个new运算符。在构造函数内部创建的对象被传递回变量var。这种方式在对象方法的内部管理方面与经典方式有着相同的问题。所以强烈建议:除非万不得已,还是避免使用这种方式。
相关文章
- vue遍历数组对象foreach_js遍历对象数组
- Js生成二维码_js在线生成二维码
- JS对象到原始值的转换
- js中如何复制一个对象,如何获取所有属性和属性对应的值详解编程语言
- JS中获取session中传过来的值对象详解编程语言
- JS的内置对象和方法(允许自定义对象)详解编程语言
- JS valueOf()方法:返回对象的值
- JavaScript实现Oracle数据库连接与操作(js怎么连接oracle)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- 建立完全独立的JS对象
- 用js判断浏览器是否是IE的比较好的办法
- JS控制对象移动效果
- javascriptgetElementsByClassName和js取地址栏参数
- js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
- js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
- JS正则中的match与exec使用说明
- JS正则中的RegExp对象对象
- js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
- js函数获取html中className所在的内容并去除标签
- JS关闭窗口与JS关闭页面的几种方法小结
- js中生成map对象的方法
- 引入JS文件IE6报语法错误或缺少对象问题的解决方法
- js触发selectonchange事件的小技巧
- php,js,css字符串截取的办法集锦