Javascript: Object Model & Function Model Introduction

DavyJones2010

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

最近访客更多访客>>

zhihaoma

xiaoji123pt

dingdaxin

vv404725784

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Javascript Object Model Function Model

1. An example.

<html>
	<head>
		<script type="text/javascript">
		function add(number){
			alert(number + 20);
		}
		function add(number){
			alert(number + 30);
		}
		add(1);
		</script>
	</head>
	<body></body>
</html>

Above result woluld be 31.

<html>
	<head>
		<script type="text/javascript">
		function add(number){
			alert(number + 20);
		}
		function add(number1, number2){
			alert(number1 + 30);
		}
		add(1);
		</script>
	</head>
	<body></body>
</html>

Above result would be 31 and NOT 21!

So, what's the reason? It's quite different with that in JAVA.

<html>
	<head>
		<script type="text/javascript">
		function add(number1, number2){
			alert(number1 + 30);
		}
		function add(number){
			alert(number + 20);
		}
		add(1);
		</script>
	</head>
	<body></body>
</html>

Above result would be 21.

Comments:

1. The "function" in JS is an object. There is NO concept of CLASS in JS!

The two representations below are the SAME! The first representation will be compiled into the second format.

function add(number){
	alert(number + 20);
}

var add = function(number){
	alert(number + 20);
};

Thus, we can find out the answer to the question raised at the beginning.

Think of "add" as cursor/pointer that points the the mem-block of function.

<html>
	<head>
		<script type="text/javascript">
		var add = function(number){
			alert(number + 20);
		};
		add(1, 2, 3);

		var sub = function(number1, number2){
			alert(number1 - 1);
		}
		sub(1);
		</script>
	</head>
	<body></body>
</html>

Result would be 21 and 0.

So we don't have to care about the number of params in function declaration block and function execution block.

<html>
	<head>
		<script type="text/javascript">
		var sub = function(number1, number2){
			alert(number1);
			alert(number2);
		}
		sub(1);
		</script>
	</head>
	<body></body>
</html>

Result would be 0 and undefined.

The "undefined" actually is the value of a TYPE named Undefined.

var sub = function(number){
	alert(number);
}

It is some kind of hard to regard the function as an object.

1) We may also wonder when we instantialized this object?

2) What's the type of this function object?

1) All the function object in JS is an instance of the type "Function".

2) We can also instance the function using its type Function.

<html>
	<head>
		<script type="text/javascript">
		var sub = new Function("number","alert(number);");
		sub(1);
		</script>
	</head>
	<body></body>
</html>

"Function" in details:

1) Function receives all params with the type of String.

2) No matter how many params it would receive, the last param would always be the content of the function.

<html>
	<head>
		<script type="text/javascript">
		// var sub = new Function("number","alert(number);");
		function sub(number){
			alert(number);
		}
		sub(1);
		</script>
	</head>
	<body></body>
</html>

Example for multi-params function.

<html>
	<head>
		<script type="text/javascript">
		var sub = new Function("number1", "number2", "alert(number1 - number2);");
		sub(10, 2);
		</script>
	</head>
	<body></body>
</html>

3. As there is no strict constraint of number of params for function in JS.

It provides some other ways for us to enhance this.

Every function object has an predefined attribute called "arguments" that represents the params that actually passed in.

Eg1:

<html>
	<head>
		<script type="text/javascript">
		function sub(number1, number2){
			alert(arguments[0]);
			alert(arguments[1]);
			alert(arguments[2]);
		}
		sub(10, 2, 3);
		</script>
	</head>
	<body></body>
</html>

The result would be "10", "2" and "3". And has nothing to do with the arguments declaration.

Arguments also has an attribute named "length" that represents the numbers of arguments that actually passed in.

So we can use this to realize the mocked function overload.

<html>
	<head>
		<script type="text/javascript">
		function sub(number1, number2){
			if(1 == arguments.length){
				alert(number1);
			}else if(2 == arguments.length){
				alert(number1 - number2);
			} else{
				alert("ERROR");
			}
		}
		sub(10, 2);
		</script>
	</head>
	<body></body>
</html>

4. A small test for function pointer.

<html>
	<head>
		<script type="text/javascript">
		var sub1 = function (number1, number2){
			alert(number1 - number2);
		};

		var sub2 = sub1;

		sub2 = function(number1, number2){
			alert(number1 + number2);
		}

		sub1(10, 2);
		sub2(10, 2);
		</script>
	</head>
	<body></body>
</html>

The result is "8" and "12".

5. The relationship between 'undefined' and 'null'

<html>
	<head>
		<script type="text/javascript">
		alert(undefined == null);
		</script>
	</head>
</html>

The result is 'true'. Cause 'undefined' is actually derived from 'null'.

6. Object type cast:

There are actually three kind of object type cast in JS.

1. Boolean(value)

2. Number(value)

3. String(value)

<html>
	<head>
		<script type="text/javascript">
		var s = String(3);
		alert(typeof s);
		</script>
	</head>
</html>

Result is 'string'.

<html>
	<head>
		<script type="text/javascript">
		var s = new String(3);
		alert(typeof s);
		</script>
	</head>
</html>

Result is 'object'.

<html>
	<head>
		<script type="text/javascript">
		var s = new String(3);
		alert(s instanceof String);
		</script>
	</head>
</html>

Result is 'true'.

<html>
	<head>
		<script type="text/javascript">
		var s = Number(3);
		alert(typeof s);
		</script>
	</head>
</html>

Result is 'number'

<html>
	<head>
		<script type="text/javascript">
		var s = new Number(3);
		alert(typeof s);
		</script>
	</head>
</html>

Result is 'object'

<html>
	<head>
		<script type="text/javascript">
		var s = new Number(3);
		alert(s instanceof Number);
		</script>
	</head>
</html>

Result is 'true'

1) TYPE CAST

<html>
	<head>
		<script type="text/javascript">
		var s = Boolean("3");
		alert(typeof s);
		</script>
	</head>
</html>

Result is 'boolean'.

2) OBJECT NEW

<html>
	<head>
		<script type="text/javascript">
		var b = new Boolean(false);
		alert(b);
		</script>
	</head>
</html>

Result is false.

<html>
	<head>
		<script type="text/javascript">
		var b = new Boolean("false");
		alert(b);
		</script>
	</head>
</html>

Result is true.

7. In JS, all objects(exclude primitive type) are derived from 'Object'.

We use 'new xxx()' to create an object(exclude primitive type).

As this object is dynamic, it is hard to know all the properties in this object.,

We can use for...in... to traverse all the attributes in this object.

<html>
	<head>
		<script type="text/javascript">
		var o = new Object();
		for(var j in o){
			alert(j);
		}
		</script>
	</head>
</html>

There is no alert. It DOESN'T represent that there is no attribute in Object.

Cause some attributes are iteratorable and some are not.

All attributes in Object are not itertorable.

<html>
	<head>
		<script type="text/javascript">
		var o = new Object();
		alert(o.propertyIsEnumerable("prototype"))
		</script>
	</head>
</html>

The result is 'false'.

We can use propertyIsEnumerable("propertyName") to find out that.

There is an important attribute in Object called "prototype".

<html>
	<head>
		<script type="text/javascript">
		for(var v in window){
		document.write(v + "<br/>");
		}
		</script>
	</head>
</html>

There would be a lot of attributes shown.

Cause there is an imbeded object called window/document/...

分享到：

Javascript: Object Model & Define Object ... | Javascript: Event Binding Model Introduc ...

2013-08-10 13:08
浏览 826
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论