JavaScript对象创建的七种方式
方式一:简单的对象创建。
<script type="text/javascript"> /** * 在js中并不存在类,所以可以直接通过Object来创建对象 * 但是使用如下方式创建,带来最大的问题是,由于没有类的约束 * 无法实现对象的重复利用,并且没有一种约定,在操作时会带来问题 */ var person = new Object(); person.name = "Leon"; person.age = 33; person.say = function() { alert(this.name+","+this.age); } </script>
在很多时候,如果在网络中传递,不能直接传递对象,在网络中传字符串比较好传,那么能不能通过字符串的方式创建对象?我们可以想到用xml来表示我们的对象。例如:
<person> <id>1</id> <username>zhangsan</userame> <nickname>昵称</nickname> <age>23</age> </person>
通过这样的字符串可以转化成Person对象,里面有Id属性,username属性等等。但是可以看出上面要传递的内容内容并不是很多,里面充斥着大量的标签,传输效率不高。我们希望用另外一种字符串传递方式来替代xml。于是有了新的传递方式json(JavaScript Object Notation)。
方式二:json
json就是js的对象,但是它省去了xml中标签,而是通过{}来完成对象的说明。
<script type="text/javascript"> var person = { name:"张三",//通过属性名:属性值来表示,不同的属性通过,来间隔 age:23, say:function() { alert(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++) { alert(ps[i].name); } /** * 创建一组用户,用户的属性有 * name:string,age:int,friends:array * java中的写法: * 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>
由于没有类的概念,这两种方式最大的问题是对象不能重用。可以通过工厂方式来创建对象。
方式三:工厂
<script type="text/javascript"> /** * 通过工厂的方式来创建Person对象 * 在createPerson中创建一个对象 * 然后为这个对象设置相应的属性和方法 * 之后返回这个对象 */ function createPerson(name,age) { var o = new Object(); o.name = name; o.age = age; o.say = function() { alert(this.name+","+this.age); } return o; } /** * 使用工厂的方式,虽然有效的解决了类的问题,但是依然存在另外一个问题 * 我们无法检测对象p1和p2的数据类型 */ var p1 = createPerson("Leon",22); var p2 = createPerson("Ada",33); p1.say(); p2.say(); //alert(typeof p1);//返回object //alert(p1 instanceof ?);//没有person类,instanceof不能用。 </script>
工厂方式无法检测p1和p2的数据类型,我们可以通过构造函数来创建
方式四:通过构造函数(constructor)
<script type="text/javascript"> /** * 通过构造函数的方式创建,和基于工厂的创建类似 * 最大的区别就是函数的名称就是类的名称,按照java的约定,第一个 * 字母大写。使用构造函数创建时,在函数内部是通过this关键字来 * 完成属性的定义 */ function Person(name,age) { this.name = name; this.age = age; //以下方式带来的问题是所有的对象都会为该行为分配空间 this.say = function() { alert(this.name+","+this.age); } } /* * 通过new Person来创建对象 */ var p1 = new Person("Leon",22); var p2 = new Person("Ada",32); p1.say(); p2.say(); /** * 使用构造函数的方式可以通过以下方式来检测 * 对象的类型 */ alert(p1 instanceof Person); /** * 使用构造函数创建所带来的第一个问题就是每一个对象中 * 都会存在一个方法的拷贝,如果对象的行为很多的话 * 空间的占用率就会大大增加 */ alert(p1.say==p2.say);//false,说明不是同一个say </script>
修改say方法位置,其他不动。将行为设置为全局的行为可以解决空间占用率的问题。
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; this.say = say; } /** * 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候 * 这个函数就可以被window调用,此时就破坏对象的封装性 * 而且如果某个对象有大量的方法,就会导致整个代码中充斥着大量的全局函数 * 这样将不利于开发 */ function say() { alert(this.name+","+this.age); } /* * 通过new Person来创建对象 */ var p1 = new Person("Leon",22); var p2 = new Person("Ada",32); p1.say(); p2.say(); /** * 使用构造函数的方式可以通过以下方式来检测 * 对象的类型 */ alert(p1 instanceof Person); alert(p1.say==p2.say);//true,说明是同一个say </script>
将行为设置为全局行为,函数就可以被window调用,破坏了对象的封装性,不利于开发。我们可以用下一种方式,基于原型。
方式五:基于原型(prototype)的创建方式
基于原型的创建可以将属性和方法,设置为Person专有的,不能再通过window来调用
<script type="text/javascript"> function Person(){ } Person.prototype.name = "Leon"; Person.prototype.age = 23; Person.prototype.say = function() { alert(this.name+","+this.age); } var p1 = new Person(); p1.say(); //通过window没有办法调用say方法,如此就完成了封装 // say();//报错,say is not defined </script>
基于原型的创建虽然可以有效的完成封装,但是依然有一些问题
1、无法通过构造函数来设置属性值
2、当属性中有引用类型变量是,可能存在变量值重复
<script type="text/javascript"> function Person(){ } Person.prototype = { constructor:Person, name:"Leon", age:30, friends:["Ada","Chris"], say:function() { alert(this.name+"["+this.friends+"]"); } } var p1 = new Person(); p1.name = "John"; p1.say();//john[ada,chris] //会在原型中找friends,所以Mike是在原型中增加的 p1.friends.push("Mike");//为p1增加了一个朋友 var p2 = new Person(); //此时原型中就多了一个Mike,这就是原型所带来的第二个问题 p2.say();//leon ada chris mike </script>
方式六: 原型(prototype)和构造(constructor)混合模式
<script type="text/javascript"> /** * 为了解决原型所带来的问题,此处需要通过组合构造函数和原型来实现对象的创建 * 将属性在构造函数中定义,将方法在原型中定义 * 这种有效集合了两者的优点,是目前最为常用的一种方式 */ function Person(name,age,friends){ //属性在构造函数中定义 this.name = name; this.age = age; this.friends = friends; } Person.prototype = { constructor:Person, //方法在原型中定义 say:function() { alert(this.name+"["+this.friends+"]"); } } //此时所有的属性都是保存在自己的空间中的 var p1 = new Person("Leon",23,["Ada","Chris"]); p1.name = "John"; p1.friends.push("Mike"); p1.say(); var p2 = new Person("Ada",33,["Leon"]); p2.say(); </script>
第七种方式 动态原型的方式
<script type="text/javascript"> /** * 为了让定义的方式更加符合java的需求,就把定义方法的原型代码放置到Person这个构造函数中 */ function Person(name,age,friends){ //属性在构造函数中定义 this.name = name; this.age = age; this.friends = friends; //不能使用重写的方式定义,因为重写会改变引用 /*Person.prototype = { constructor:Person, //方法在原型中定义 say:function() { alert(this.name+"["+this.friends+"]"); } }*/ /** * 判断Person.prototype.say是否存在,如果不存在就表示需要创建 * 当存在之后就不会在创建了 */ if(!Person.prototype.say) {//每new一次都会定义一次,所以需要判断。 Person.prototype.say = function() { alert(this.name+"["+this.friends+"]"); } } } //此时所有的属性都是保存在自己的空间中的 var p1 = new Person("Leon",23,["Ada","Chris"]); p1.name = "John"; p1.friends.push("Mike"); p1.say(); var p2 = new Person("Ada",33,["Leon"]); p2.say(); </script>