1 直接创建对象
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 /** 10 * 在js中并不存在类，所以可以直接通过Object来创建 11 * 但是使用如下方式创建，带来最大的问题：由于没有类的约束 12 * 无法实现对象的重复利用，并且没有一种约束，在操作时会带来问题 13 */ 14 var person = new Object(); 15 person.name = "Leon"; 16 person.age = 33; 17 person.say = function(){ 18 console.info(this.name + " , " + this.age); 19 } 20 </script> 21 22 </head> 23 <body> 24 25 </body> 26 </html>
2 使用json的方式创建对象
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 /** 10 * json的意思就是javascript simple object notation 11 * json就是js的对象，但是他省去了xml中便签，而是通过｛｝来完成对象的说明 12 */ 13 var person = { 14 name : "张三", 15 age :23 , 16 say : function(){ 17 console.info(this.name + " , " + this.age); 18 } 19 } 20 person.say(); 21 22 /** 23 * 通过json依然可以创建对象数组，创建的方式饿js的数组一样 24 */ 25 var ps = [ 26 { 27 name : "Leon", 28 age : 22 29 },{ 30 name : "Ada", 31 age : 33 32 } 33 ]; 34 for(var i = 0 ; i < ps.length ; i ++){ 35 console.info(ps[i].name); 36 } 37 38 /** 39 * 创建一组用户，用户的属性有 40 * name : string 41 * age : int 42 * friends : array 43 * List<Person> ps = new ArrayList<Person>(); 44 * ps.add(new Person("Leon" , 22 , ["Ada","Alice"])); 45 * ps.add(new Person("John" , 33 , ["Ada","Chris"])); 46 * 把ps转换为json 47 */ 48 ps = [ 49 { 50 name : "Leon", 51 age : 22, 52 friends:["Ada" , "Alice"] 53 },{ 54 name : "John", 55 age : 33, 56 friends : ["Ada","Chris"] 57 } 58 ]; 59 60 </script> 61 62 </head> 63 <body> 64 65 </body> 66 </html>
3 使用工厂方式创建
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 /** 10 * 通过工厂的方式来创建Person对象 11 * 在createPerson中创建一个对象 12 * 然后为这个对象设置相应的属性和方法 13 * 之后返回这个对象 14 */ 15 function createPerson( name , age ){ 16 var o = new Object(); 17 o.name = name ; 18 o.age = age ; 19 o.say = function(){ 20 console.info(this.name + " , " + this.age); 21 } 22 return o ; 23 } 24 /** 25 * 使用工厂的方式，虽然有效的解决了类的问题， 26 * 但是依然存在另外一个问题:无法获取对象的数据类型,即： 27 * 通过p1 instanceof ？ 无法获取对象p1 和p2 的数据类型, 28 * 通过typeof仅仅只能检测出object类型，如果希望使用instanceof来检测的话，无法确定检测的类型 29 * 解决方式：使用构造函数的方式解决问题 30 */ 31 var p1 = createPerson("Leon" , 22); 32 var p2 = createPerson("Ada" , 33); 33 p1.say(); 34 p2.say(); 35 console.info(p1 + " " + p1 instanceof ? ); 36 37 </script> 38 39 </head> 40 <body> 41 42 </body> 43 </html>
4 使用构造器创建
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 /** 10 * 通过构造函数的方式创建，和基于工厂的创建类似 11 * 最大的区别就是函数的名称就是类的名称，按照java的约定，第一个字母大写。 12 * 使用构造函数创建时,在函数内部是通过this关键字来完成属性的定义 13 */ 14 function Person(name , age){ 15 this.name = name; 16 this.age = age ; 17 //以下方式带来的问题就是所有的对象都会为该行为分配控件 18 this.say = function(){ 19 console.info(this.name + " , " + this.age); 20 } 21 } 22 23 //通过new Person来创建对象 24 var p1 = new Person("Jhon" , 22); 25 var p2 = new Person("Ada" , 32); 26 p1.say(); //Jhon , 22 27 p2.say(); //Ada , 32 28 //使用构造函数的方式可以通过以下方恨死来检测对象的类型 29 console.info( p1 instanceof Person) ;//true 30 31 /** 32 * 使用构造函数穿件带来的问题 33 * 在java中: 34 * class Person{ 35 * int id ; 36 * String name ; 37 * public void say(){ 38 * 39 * } 40 * } 41 * Person p1 = new Person(); 42 * Person p2 = new Person(); 43 * person的say方法里面的变量在栈中分配，在调用say方式的时候才分配空间， 44 * 而内存堆中只会存放id和name,不管创建多少个Person对象，say方法只会调用一块空间，在调用的时候才创建， 45 * 所有say是不占用空间的 46 * 47 * 在js中使用构造函数： 48 * 带来的问题就是每一个对象中都会存放一个方法的拷贝，如果对象的行为很多的话， 49 * 控件的占用率就会大大增加，即每创建一个person对象就分配一个say空间 50 * 51 * 解决方法： 52 * 可以将函数放到全局变量中定义，这样就可以让所有的类中的行为指向同一个函数 53 */ 54 console.info(p1.say == p2.say); //false 55 56 57 //以下内容为解决方法： 58 59 function Person2(name , age){ 60 this.name = name; 61 this.age = age ; 62 this.say = say; 63 } 64 /** 65 * 将行为设置为全局的行为，如果将所有的方法都设计为全局函数的时候， 66 * 这个函数就可以被window调用,此时就破坏了对象了封装性, 67 * 而且如果某个对象有大量的方法，就会导致整个代码充斥着大量的全局函数 68 * 这样将不利于开发 69 */ 70 function say(){ 71 console.info(this.name + " , " + this.age); 72 } 73 74 var p1 = new Person2("Jhon" , 22); 75 var p2 = new Person2("Ada" , 32); 76 p1.say(); //Jhon , 22 77 p2.say(); //Ada , 32 78 console.info(p1.say == p2.say); // true 79 80 </script> 81 82 </head> 83 <body> 84 85 </body> 86 </html>