一、函數
1、如何定義函數
<!DOCTYPE html>
<html>
<head>
<title>01_如何定義函數.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//1 普通方式
function add(a,b){
return a + b;
}
//2 直接量方式
var add = function(a,b){
return a + b;
}
//3 構造函數方式(在javascript裏,底層提供Function對象)
var add = new Function('a','b','return a+b;');
//javascript中不存在類的概念,只有對象的概念
</script>
</html>
2、Arguments對象
<!DOCTYPE html>
<html>
<head>
<title>02_Arguments 對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* Java中具有函數重載:
* * 節省了函數的命名空間
* * 代碼更加簡單
* * 重載的性能更好
*
* javascript也想實現函數的重載?沒有
* * 在javascript中定義多個同名的函數,只有最後一個定義的函數起作用
* * NaN:表示不是一個數值的內容(不存在的值)
* Arguments對象:
* * Arguments對象是數組對象
* * 利用Arguments對象的length屬性,獲取參數的個數
* * 利用Arguments對象的特性,模擬函數重載的效果?可以
*/
// function add(a,b){
// return a+b;
// }
// function add(a,b,c){
// return a+b+c;
// }
//
// alert(add(1,2)); //output 3 NaN
// alert(add(1,2,3)); //output 6
// function fn(){
// alert(arguments.length);
// }
//
// fn(); //output 0
// fn("a"); //output 1
// fn("a","b"); //output 2
// fn("a","b","c"); //output 3
function add(){
if(arguments.length==2){
return arguments[0] + arguments[1];
}else if(arguments.length==3){
return arguments[0] + arguments[1] + arguments[2];
}
}
alert(add(1,2)); //output 3
alert(add(1,2,3)); //output 6
</script>
</html>
3、變量的作用域
<!DOCTYPE html>
<html>
<head>
<title>03_變量的作用域.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* 變量的作用域:
* * javascript中存在(變量)
* * 全局變量:全局域
* * 局部變量:當前局部域(函數域)
* * javascript中存在(域)
* * 全局域
* * 函數域(局部域)
*/
// var a = "a";
//
// function fn(){
// var b = "b";
//
// alert(a); //output a
// alert(b); //output b
// }
//
// fn();
// alert(a); //output a
// alert(b); //output undefind
/*
* 定義局部變量時,不使用"var"修飾符:
* * javascript語法上支持這種寫法
* * 局部變量b被定義出來
* * javascript會自動將局部變量b定義爲全局變量
* 在實際開發中,不建議這樣編寫:
* * 編碼不規範
*/
// var a = "a";
//
// function fn(){
// b = "b";
//
// alert(a); //output a
// alert(b); //output b
// }
//
// fn();
// alert(a); //output a
// alert(b); //output b
/*
* 在javascript中,定義全局變量與局部變量同名時:
* * 在函數域中,只能訪問到局部變量
*
* 解讀代碼(代碼的執行情況):
* * 定義一個全局變量a,並初始化爲a(存在並且有值)
* * 定義一個函數fn()(而不執行的時候)
* * 局部變量a被定義,並沒有初始化(存在但是沒值)
* * 調用函數fn()
* * 第一次打印變量a,是局部變量a,結果爲undefind
* * 第二次打印變量a,是局部變量a,結果爲b
* * 在全局域中,訪問變量a,只能是全局變量a
*/
var a = "a";
function fn(){
alert(a); //output undefind
var a = "b";
alert(a); //output b
}
fn();
alert(a); //output a
</script>
<h3></html></h3>
4、幾種特殊的函數
<!DOCTYPE html>
<html>
<head>
<title>04_幾種特殊的函數.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* 1 匿名函數:沒有名的函數
* * (匿名回調函數)可以將匿名函數作爲參數傳遞給其他函數。這樣，接收方函數就能利用所傳遞的函數來完成某些事情。
* * (自調函數)可以定義某個匿名函數來執行某些一次性任務。
*/
//function(){}
/*
* 這種情況下,函數one和two,稱之爲叫做回調函數
* * 定義:將一個函數作爲另一個函數的參數,而作爲參數的函數就叫做回調函數
* 將匿名函數作爲參數:匿名回調函數
* * 定義: 將一個匿名函數作爲另一個函數的參數,而作爲參數的匿名函數就叫做匿名回調函數
*/
// var one = function(){return 1;}
// var two = function(){return 2;}
//函數fn()的參數a,b是參數函數
// function fn(a,b){
// return a() + b();
// }
//
// //alert(fn(one,two)); //output 3
// //以上寫法是否可以改寫?
// alert(fn(function(){return 1;},function(){return 2;})); //output 3
/*
* 一次性任務:函數只被調用一次
* * 實現頁面初始化工作的函數(不嚴格)
* * 定義即調用的函數(不嚴格)
* * 自調函數:自己調用自己
* * 第一個小括號:封裝函數
* * 第二個小括號:調用函數(傳參)
*/
// (
// function(){
// alert("javascript");
// }
// )();
// (
// function(str){
// alert(str+" javascript");
// }
// )("hello");
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>04_幾種特殊函數.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* 內部(私有)函數(Java裏內部類)
* * 保證了私有性 —— 外部不能訪問不到(提供了安全性)
*/
// function fn(){
// var a = "a";
//
// function n(){
// var b = "b";
//
// alert(a+b); //output ab
// }
//
// return n();
// }
//
// fn(); //output ab
/*
* (瞭解)返回函數的函數(內部函數的一種特殊用法)
* * 可以在全局域中,訪問到局部變量的值
* * 定義一個函數時,最終執行兩個邏輯代碼塊
*/
function fn(){
//邏輯代碼塊
var a = "a";
return function(){
//邏輯代碼塊
return a;
}
}
alert(fn()); //output function(){return a;}
//var fun = fn();
//var fun = function(){return a;}
//alert(fun()); //output a
alert(fn()()); //output a
/*
* javascript中的特殊函數,不是必要使用的內容
* * 第一次完成實現邏輯內容時,很少會用到特殊函數
* * 在做代碼優化的時候,會使用特殊函數
*
* 代碼實現:一次性做到代碼最優
* * 實現邏輯內容
* * 代碼優化
*/
</script>
</html>
二、閉包
1、作用域鏈
<!DOCTYPE html>
<html>
<head>
<title>01_作用域鏈.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
var a = "a";
function fn(){
var b = "b";
alert(a); //output a
alert(b); //output b
function n(){
var c = "c";
alert(a); //output a
alert(b); //output b
alert(c); //output c
}
return n();
}
fn();
</script>
</html>
2、閉包
<!DOCTYPE html>
<html>
<head>
<title>02_閉包.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
var a = "a";
var n;
function fn(){
var b = "b";
alert(a); //output a
alert(b); //output b
//變量定義,初始化
n = function(){
var c = "c";
alert(a); //output a
alert(b); //output b
alert(c); //output c
}
return n();
}
//fn();
n();
</script>
</html>
3、循環中的閉包結構
<!DOCTYPE html>
<html>
<head>
<title>03_循環中的閉包結構.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* * 定義了一個函數f()
* * 定義了一個空的數組a
* * 定義了一個局部變量i,沒有初始化
* * 遍歷:
* * 初始化局部變量i:0,1,2,3
* * 初始化數組a:a[0],a[1],a[2] - function(){return i;}
* * 返回值爲數組a
* * 定義一個全局變量fun,初始化爲函數f()的調用(數組a)
* * 調用全局變量fun
*/
// function f(){
// var a = [];
// var i;
// for(i = 0; i < 3; i++){
// a[i] = function(){
// return i;
// }
// }
// return a;
// }
//
// var fun = f();
//
// alert(fun[0]()); //output 3
// alert(fun[1]()); //output 3
// alert(fun[2]()); //output 3
// function f(){
// var a = [];
// var i;
// for(i = 0; i < 3; i++){
// a[i] = (
// function(x){
// return x;
// }
// )(i);
// }
// return a;
// }
//
// var fun = f();
//
// alert(fun[0]); //output 0
// alert(fun[1]); //output 1
// alert(fun[2]); //output 2
// function f(){
// var a = [];
// var i;
// function n(x){
// return x;
// }
// for(i = 0; i < 3; i++){
// a[i] = n(i);
// }
// return a;
// }
//
// var fun = f();
//
// alert(fun[0]); //output 0
// alert(fun[1]); //output 1
// alert(fun[2]); //output 2
function f(){
var a = [];
var i;
for(i = 0; i < 3; i++){
a[i] = i;
}
return a;
}
var fun = f();
alert(fun[0]); //output 0
alert(fun[1]); //output 1
alert(fun[2]); //output 2
</script>
</html>
