Javascript: Object Model & Define Object Using Factory Method

DavyJones2010

浏览: 154288 次
性别:
来自: 杭州

最近访客更多访客>>

zhihaoma

xiaoji123pt

dingdaxin

vv404725784

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Javasrcipt Object Model Factory Method Create Object

1. One major difference between dynamic language and static language is that:

Dynamic language can add attributes/methods for a predefined type.

But static language can not realize this, or else we have to change the bean.

<html>
	<head>
		<script type="text/javascript">
		var object = new Object();
		object.name = "davy";

		for(var v in object){
		document.write(v + " = " + object[v] + "<br/>");
		document.write(v + " = " + object.name + "<br/>");
		}

		</script>
	</head>
</html>

The result is "name = davy".

Thess two different ways to represent the attributes.

But the first one is a more dynamic approach.

2. There are two different ways to define attributes for an object.

1. The first one is: <Just the same code as above>

<html>
	<head>
		<script type="text/javascript">
		var object = new Object();
		object.name = "davy";

		for(var v in object){
		document.write(v + " = " + object[v] + "<br/>");
		document.write(v + " = " + object.name + "<br/>");
		}

		</script>
	</head>
</html>

2. The second one is:

<html>
	<head>
		<script type="text/javascript">
		var object = new Object();
		object["name"] = "davy";

		for(var v in object){
		document.write(v + " = " + object[v] + "<br/>");
		document.write(v + " = " + object.name + "<br/>");
		}

		</script>
	</head>
</html>

3. We can even delete attributes from object.

Use uniary operator 'delete'

<html>
	<head>
		<script type="text/javascript">
		var object = new Object();
		object.name = "davy";

		for(var v in object){
		document.write(v + " = " + object[v] + "<br/>");
		document.write(v + " = " + object.name + "<br/>");
		}

		delete object.name;

		for(var v in object){
		document.write(v);
		}

		</script>
	</head>
</html>

4. Create an object with customized attribtes & values.

<html>
	<head>
		<script type="text/javascript">
		var person = {name:"davy", gender:"male"};

		for(var a in person){
		document.write(a + " = " + person[a] + "<br/>");
		}

		</script>
	</head>
</html>

Here we created an object called "person" which has properties named "name" and "gender".

This is the most popular way we define a customized object.

The only way we know what attributes an object has provided by third-party lib is refer to the api doc.

This is quite different from that in java.

5. Array

1. There are two ways to define an array object as described before.

<html>
	<head>
		<script type="text/javascript">
		var array = new Array();
		array.push("1");
		array.push(3);

		alert(array.length);
		</script>
	</head>
</html>

<html>
	<head>
		<script type="text/javascript">
		var array = ["1", "3"];

		alert(array.length);
		</script>
	</head>
</html>

The second approach is more frequently used cause it easier.

The size of array in JS is automatically reallocated.

2. There is a method named "sort" in array. By using it, we can sort the array(It directly sorts the datasource, not the copy).

<html>
	<head>
		<script type="text/javascript">
		var array = ["1", "3", "0", "-1", "2"];
		array.sort();
		document.write(array);
		</script>
	</head>
</html>

The result is "-1, 0, 1, 2, 3". The elements are sorted as string.

<html>
	<head>
		<script type="text/javascript">
		var array = [1, 3, 0, -1, 2, 11, 21, 32, 9];
		array.sort();
		document.write(array);
		</script>
	</head>
</html>

The result is "-1,0,1,11,2,21,3,32,9". The elements are sorted as string.

The reason is that in "sort" function,the "toString" method would be invoked for each element before comparing values.

So we have to provide customized sorting strategy for array if we want a different one.

<html>
	<head>
		<script type="text/javascript">
		function compare(num1, num2){
			var temp1 = parseInt(num1);
			var temp2 = parseInt(num2);
			if(temp1 < temp2){
				return -1;
			}else if(temp1 == temp2){
				return 0;
			}else{
				return 1;
			}
		}
		var array = [1, 3, 0, -1, 2, 11, 21, 32, 9];
		array.sort(compare);
		document.write(array);
		</script>
	</head>
</html>

This is quite the same with that in JAVA.

The result is "-1, 0, 1, 2, 3, 9, 11, 21, 32".

The function "compare" is actually a reference to an object as explained before.

We can use anonymous inner function(Just the same representation as that in JAVA) to write the compare function.

<html>
	<head>
		<script type="text/javascript">
		var array = [1, 3, 0, -1, 2, 11, 21, 32, 9];
		array.sort(function (num1, num2){
			var temp1 = parseInt(num1);
			var temp2 = parseInt(num2);
			if(temp1 < temp2){
				return -1;
			}else if(temp1 == temp2){
				return 0;
			}else{
				return 1;
			}
		});
		document.write(array);
		</script>
	</head>
</html>

This kind of representation is quite frequently used in JQuery.

<html>
	<head>
		<script type="text/javascript">
		var person = {name:"davy", gender:"male", 
			display:function(){
			document.write("name = " + this.name + ",gender = " + this.gender + "<br/>");
			}, 
			reverseDisplay:function(){
			document.write("gender = " + this.gender + ",name = " + this.name + "<br/>");
			}};
		person.display();
		person.reverseDisplay();
		</script>
	</head>
</html>

The result is "name=davy, gender=male" and "gender=male, name=davy"

So we can define the attribute as well as the operation.

6. Ways to define an object.

1. Extend operations and attributes based on already instantiated object.

<html>
	<head>
		<script type="text/javascript">
		var person = {name:"davy", gender:"male"};
		person.score = "test";
		person.reverseDisplay = function (){
			document.write("gender = " + this.gender + ", name = " + this.name + ", score = " + this.score);
		}
		person.reverseDisplay();
		</script>
	</head>
</html>

The defect is that if we want to create thousands of this kind of person object which has the attribute of name, gender and score, and has operation of reverseDisplay.

It would be a lot of code copy.

2.Use factory method.

<html>
	<head>
		<script type="text/javascript">
		function createPerson(){
			var person = {name:"davy", gender:"male"};
			person.score = "test";
			person.reverseDisplay = function (){
				document.write("gender = " + this.gender + ", name = " + this.name + ", score = " + this.score + "<br/>");
			}
			return person;
		}

		var p1 = createPerson();
		var p2 = createPerson();

		p1.name = "jones";
		p1.reverseDisplay();
		p2.reverseDisplay();

		p2.name = "calypso";
		p2.gender = "female";
		p1.reverseDisplay();
		p2.reverseDisplay();

		</script>
	</head>
</html>

It turned out that the two persons are totally isolated objects. And one's change won't impact another.

We can even pass params to create object that satisfy our needs.

<html>
	<head>
		<script type="text/javascript">
		function createPerson(name, gender){
			var person = {name:name, gender:gender};
			person.score = "100";
			person.reverseDisplay = function (){
				document.write("gender = " + this.gender + ", name = " + this.name + ", score = " + this.score + "<br/>");
			}
			return person;
		}

		var p1 = createPerson("davy", "male");
		var p2 = createPerson("calypso", "female");

		p1.reverseDisplay();
		p2.reverseDisplay();
		</script>
	</head>
</html>

The result is "gender=male, name=male" and "gender=female, name=calypso".

Still there are some defacts when using this kind of instination.

When using java, the function defined in class are shared by all the objects.

But when using this kind of instiantion, every object has its own function and don't share with other.

That would be high cost.

<html>
	<head>
		<script type="text/javascript">
		var reverseDisplay = function (){
			document.write("gender = " + this.gender + ", name = " + this.name + ", score = " + this.score + "<br/>");
		};
		function createPerson(name, gender){
			var person = {name:name, gender:gender};
			person.score = "100";
			person.reverseDisplay = reverseDisplay;
			return person;
		};

		var p1 = createPerson("davy", "male");
		var p2 = createPerson("calypso", "female");

		p1.reverseDisplay();
		p2.reverseDisplay();
		</script>
	</head>
</html>

This is an optimized solution.

Good practice: Share methods.

3. Using constructor.

<html>
	<head>
		<script type="text/javascript">
		var reverseDisplay = function (){
			document.write("gender = " + this.gender + ", name = " + this.name + ", score = " + this.score + "<br/>");
		};
		function Person(name, gender, score){
			// Before executing first line, js engine(browser) will create an inner object called "this"
			this.name = name;
			this.gender = gender;
			this.score = score;
			this.reverseDisplay = reverseDisplay;
			// After executing the last line, js engine(browser) will return the object called "this"
		};

		var p1 = new Person("davy", "male", "100");
		var p2 = new Person("calypso", "female", "99");

		p1.reverseDisplay();
		p2.reverseDisplay();
		</script>
	</head>
</html>

4. Using prototype create object

We have to discriminate "prototype" from that of a lib of js which is called "prototype".

As there is an attribute called "prototype", so every object in js has the attribute called "prototype".

<html>
	<head>
		<script type="text/javascript">
		function Person(){
		};
		
		Person.prototype.username = "davy";
		Person.prototype.password = "hello";

		Person.prototype.showPerson = function (){
			document.write(this.username + ", " + this.password + "<br/>");
		}

		var person1 = new Person();
		var person2 = new Person();

		person1.username = "jones";
		person1.showPerson();
		person2.showPerson();

		</script>
	</head>
</html>

Still, there are some defects using this.

1) We cannot pass params into constructor to instantiate attributes.

We have to modify the attribute only after we have instantiated the object.

2) It is just conincidence that when we change one username, the other one is not affected.

It just not the case when it comes into reference type/object type.

<html>
	<head>
		<script type="text/javascript">
		function Person(){
		};
		
		Person.prototype.username = new Array();
		Person.prototype.username.push("aaa");
		Person.prototype.username.push("bbb");
		Person.prototype.password = "hello";

		Person.prototype.showPerson = function (){
			document.write(this.username + ", " + this.password + "<br/>");
		}

		var person1 = new Person();
		var person2 = new Person();

		person1.username.push("davy");
		person1.username.push("jones");
		person1.password = "world";

		person1.showPerson();
		person2.showPerson();
		</script>
	</head>
</html>

The expected output is "davy,jones,world" and "aaa,bbb,hello".

The actual output is "aaa,bbb,davy,jones, world" and "aaa,bbb,davy,jones,hello".

Q: Why?

A: We can think of "aaa" as static/const just like that in java.

We should regard username as reference type.

When we push data into username, we didn't change the pointer actually.

When we change the password, we changed the pointer actually.

Good To Know:

When we are using prototype to generate object, all the object of this kind will share the attributes in prototype.

The change of attribute by one object will impact all other objects.

查看图片附件

分享到：

Linux: Basic Command Introduction | Javascript: Object Model & Function Mode ...

2013-08-17 14:32
浏览 922
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论