对象随笔（一）
程序员文章站
2022-04-10 14:53:32
...
创建对象的几种方式
字面值式
工厂模式
构造模式
原型模式
混合模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label for="txtLength">长</label>
<input type="text" id="txtLength">
</div>
<div>
<label for="txtWidth">宽</label>
<input type="text" id="txtWidth">
</div>
<button class="btnArea">面积</button>
<button class="btnCol">周长</button>
<script>
/*字面值*/
var p2=new Object({
width:50,
height:50,
area:function (){return this.width*this.height},
chang:function(){return 2*(parseFloat(this.width)+parseFloat(this.height))}
})
/*工厂模式*/
function factory(width,height) {
return{
width:width,
height:height,
area:function () {
return this.width*this.height
},
chang:function(){
return 2*(parseFloat(this.width)+parseFloat(this.height))
}
}
}
/*构造模式*/
function constor(width,height) {
this.width=width;
this.height=height;
this.area=function () {
return this.width*this.height
}
this.circum=function () {
return 2*(parseFloat(this.width)+parseFloat(this.height))
}
}
/*原型模式*/
function Rectangle() {
}
Rectangle.prototype.width=0;
Rectangle.prototype.height=0;
Rectangle.prototype.area=function () {
return this.width*this.height
}
Rectangle.prototype.circum=function () {
return 2*(parseFloat(this.width)+parseFloat(this.height))
}
/*混合模式*/
function Hcal(width,height) {
this.width=width;
this.height=height;
}
Hcal.prototype.area=function () {
return this.width*this.height
}
Hcal.prototype.circum=function () {
return 2*(parseFloat(this.width)+parseFloat(this.height))
}
var btnArea=document.querySelector('.btnArea')
var btnCol=document.querySelector('.btnCol')
var txtLength=document.querySelector('#txtLength')
var txtWidth=document.querySelector('#txtWidth')
btnArea.onclick=function (e) {
/*字面值*/
// p2.height=txtLength.value;
// p2.width=txtWidth.value;
// alert('面积'+p2.area())
/*工厂模式*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=factory(h,w);
// alert('面积'+rect.area())
/*构造函数*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=new constor(h,w);
// alert('面积'+rect.area())
/*原型函数*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=new Rectangle();
// rect.width=w;
// rect.height=h;
// alert('面积'+rect.area())
/*混合模式*/
var h=txtLength.value;
var w=txtWidth.value;
var rect=new Hcal();
rect.width=w;
rect.height=h;
alert('面积'+rect.area())
}
btnCol.onclick=function (e) {
/*字面值*/
// p2.height=txtLength.value;
// p2.width=txtWidth.value;
// alert('周长'+p2.chang())
/*工厂模式*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=factory(h,w);
// alert('周长'+rect.chang())
/*构造函数*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=new constor(h,w);
// alert('周长'+rect.circum())
/*原型函数*/
// var h=txtLength.value;
// var w=txtWidth.value;
// var rect=new Rectangle();
// rect.width=w;
// rect.height=h;
// alert('周长'+rect.circum())
/*混合模式*/
var h=txtLength.value;
var w=txtWidth.value;
var rect=new Hcal();
rect.width=w;
rect.height=h;
alert('周长'+rect.circum())
}
</script>
</body>
</html>