js 中使用工厂方法和构造器方法

时间:2023-11-23 22:50:14

1 直接创建对象

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 在js中并不存在类,所以可以直接通过Object来创建
* 但是使用如下方式创建,带来最大的问题:由于没有类的约束
* 无法实现对象的重复利用,并且没有一种约束,在操作时会带来问题
*/
var person = new Object();
person.name = "Leon";
person.age = 33;
person.say = function(){
console.info(this.name + " , " + this.age);
}
</script> </head>
<body> </body>
</html>

2  使用json的方式创建对象

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* json的意思就是javascript simple object notation
* json就是js的对象,但是他省去了xml中便签,而是通过{}来完成对象的说明
*/
var person = {
name : "张三",
age :23 ,
say : function(){
console.info(this.name + " , " + this.age);
}
}
person.say(); /**
* 通过json依然可以创建对象数组,创建的方式饿js的数组一样
*/
var ps = [
{
name : "Leon",
age : 22
},{
name : "Ada",
age : 33
}
];
for(var i = 0 ; i < ps.length ; i ++){
console.info(ps[i].name);
} /**
* 创建一组用户,用户的属性有
* name : string
* age : int
* friends : array
* List<Person> ps = new ArrayList<Person>();
* ps.add(new Person("Leon" , 22 , ["Ada","Alice"]));
* ps.add(new Person("John" , 33 , ["Ada","Chris"]));
* 把ps转换为json
*/
ps = [
{
name : "Leon",
age : 22,
friends:["Ada" , "Alice"]
},{
name : "John",
age : 33,
friends : ["Ada","Chris"]
}
]; </script> </head>
<body> </body>
</html>

3  使用工厂方式创建

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 通过工厂的方式来创建Person对象
* 在createPerson中创建一个对象
* 然后为这个对象设置相应的属性和方法
* 之后返回这个对象
*/
function createPerson( name , age ){
var o = new Object();
o.name = name ;
o.age = age ;
o.say = function(){
console.info(this.name + " , " + this.age);
}
return o ;
}
/**
* 使用工厂的方式,虽然有效的解决了类的问题,
* 但是依然存在另外一个问题:无法获取对象的数据类型,即:
* 通过p1 instanceof ? 无法获取对象p1 和p2 的数据类型,
* 通过typeof仅仅只能检测出object类型,如果希望使用instanceof来检测的话,无法确定检测的类型
* 解决方式:使用构造函数的方式解决问题
*/
var p1 = createPerson("Leon" , 22);
var p2 = createPerson("Ada" , 33);
p1.say();
p2.say();
console.info(p1 + " " + p1 instanceof ? ); </script> </head>
<body> </body>
</html>

4 使用构造器创建

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 通过构造函数的方式创建,和基于工厂的创建类似
* 最大的区别就是函数的名称就是类的名称,按照java的约定,第一个字母大写。
* 使用构造函数创建时,在函数内部是通过this关键字来完成属性的定义
*/
function Person(name , age){
this.name = name;
this.age = age ;
//以下方式带来的问题就是所有的对象都会为该行为分配控件
this.say = function(){
console.info(this.name + " , " + this.age);
}
} //通过new Person来创建对象
var p1 = new Person("Jhon" , 22);
var p2 = new Person("Ada" , 32);
p1.say(); //Jhon , 22
p2.say(); //Ada , 32
//使用构造函数的方式可以通过以下方恨死来检测对象的类型
console.info( p1 instanceof Person) ;//true /**
* 使用构造函数穿件带来的问题
* 在java中:
* class Person{
* int id ;
* String name ;
* public void say(){
*
* }
* }
* Person p1 = new Person();
* Person p2 = new Person();
* person的say方法里面的变量在栈中分配,在调用say方式的时候才分配空间,
* 而内存堆中只会存放id和name,不管创建多少个Person对象,say方法只会调用一块空间,在调用的时候才创建,
* 所有say是不占用空间的
*
* 在js中使用构造函数:
* 带来的问题就是每一个对象中都会存放一个方法的拷贝,如果对象的行为很多的话,
* 控件的占用率就会大大增加,即每创建一个person对象就分配一个say空间
*
* 解决方法:
* 可以将函数放到全局变量中定义,这样就可以让所有的类中的行为指向同一个函数
*/
console.info(p1.say == p2.say); //false //以下内容为解决方法: function Person2(name , age){
this.name = name;
this.age = age ;
this.say = say;
}
/**
* 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候,
* 这个函数就可以被window调用,此时就破坏了对象了封装性,
* 而且如果某个对象有大量的方法,就会导致整个代码充斥着大量的全局函数
* 这样将不利于开发
*/
function say(){
console.info(this.name + " , " + this.age);
} var p1 = new Person2("Jhon" , 22);
var p2 = new Person2("Ada" , 32);
p1.say(); //Jhon , 22
p2.say(); //Ada , 32
console.info(p1.say == p2.say); // true </script> </head>
<body> </body>
</html>

相关文章