一、函数
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 3function 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 3alert(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 undefindvar 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 aalert(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 aalert(b); //output bfunction n(){var c = "c";alert(a); //output aalert(b); //output balert(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 aalert(b); //output b//变量定义,初始化n = function(){var c = "c";alert(a); //output aalert(b); //output balert(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 2function f(){var a = [];var i;for(i = 0; i < 3; i++){a[i] = i;}return a;}var fun = f();alert(fun[0]); //output 0alert(fun[1]); //output 1alert(fun[2]); //output 2</script>
</html>