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.
2.
var sub = function(number){
alert(number);
}
It is some kind of hard to regard the function as an object.
Q:
1) We may also wonder when we instantialized this object?
2) What's the type of this function object?
A:
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/...
相关推荐
oriented programingpowerful aspects of function expressionsBrowser Object Model allowing interaction with the browser itselfdetecting the client and its capabilitiesDocument Object Model (DOM) objects...
- **Description**: This appendix is aimed at programmers transitioning from other object-oriented languages to JavaScript. It covers key concepts and patterns for effective JavaScript programming. Key...
1. **DOM操作**：JavaScript通过Document Object Model (DOM)来操纵HTML元素。在这个项目中，你需要使用`document.getElementById()`或`querySelector()`等方法来获取页面上的元素，并用`innerHTML`、`style`等属性...
The json module: JavaScript Object Notation The plistlib module: A Property-List Parser ctypes Enhancements Improved SSL Support Deprecations and Removals Build and C API Changes Port-Specific ...
Putting a great looking site together takes a lot of work, and most Java developers are more interested in creating a great looking object interface than a user interface. JavaServer Pages (JSP) ...
在后期，DOM（Document Object Model）操作会成为重点，学习如何通过JavaScript改变HTML元素、监听事件以及响应用户交互。此外，可能还会涵盖AJAX（Asynchronous JavaScript and XML）和Fetch API，用于向服务器发送...