一、函数
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>