Web-Lesson07-JS的函数及作用域
一、函数
1.有名函数和匿名函数
函数：是由事件驱动的或者当它被调用时执行的可重复使用的代码块，包裹在花括号中，前面使用了关键词 function：
有名函数：有名字的函数
函数名加括号执行 / 充当事件函数执行
function fn() {
alert(1);
}
fn();
匿名函数：没有名字的函数
匿名函数不能单独出现 一般充当事件函数，匿名函数的作用是避免全局变量的污染以及函数名的冲突
匿名函数主要三种写法：
1)使用()将函数及函数后的括号包裹
(function(){}());
注：此方式把（）换成[]也可以
2)使用()值包裹函数值
(function(){})();
注：此方式把（）换成[]不可以
！function(形参列表){}(实参列表)
1)能够将匿名函数与调用的()为一个整体，官方推荐使用；
2)无法表明函数与之后的()的整体性，不推荐使用。
//方式1，调用函数，得到返回值。强制运算符使函数调用执行 (function(x,y){ alert(x+y); return x+y; }(3,4)); //方式2，调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用再去调用执行(效果和方式一一样) (function(x,y){ alert(x+y); return x+y; })(3,4); //这种方式也是很多库爱用的调用方式，如jQuery，Mootools。 //方式3，使用void void function(x) { x = x-1; alert(x); }(9); //方式4，使用-/+运算符 -function(x,y){ alert(x+y); return x+y; }(3,4); +function(x,y){ alert(x+y); return x+y; }(3,4); --function(x,y){ alert(x+y); return x+y; }(3,4); ++function(x,y){ alert(x+y); return x+y; }(3,4); //方式5，使用波浪符(~) ~function(x, y) { alert(x+y); return x+y; }(3, 4); //方式6，匿名函数执行放在中括号内 [function(){ console.log(this) // 浏览器得控制台输出window }(this)] //方式7，匿名函数前加typeof typeof function(){ console.log(this) // 浏览器得控制台输出window }(this) //方式8，匿名函数前加delete delete function(){ console.log(this) // 浏览器得控制台输出window }(this) 方式9，匿名函数前加void void function(){ console.log(this) // 浏览器得控制台输出window }(this) //方式10，使用new方式，传参 new function(win){ console.log(win) // window }(this) //方式11，使用new，不传参 new function(){ console.log(this) // 这里的this就不是window了 } //方式12，逗号运算符
//(逗号运算符的特性及作用：逗号运算符的作用是将若干表达式连接起来。它的优先级是所有运算符中最低的，结合方向是自左至右。) function(){ console.log(this) // window }(); //方式13，按位异或运算符 ^function(){ console.log(this) // window }(); //方式14，比较运算符 function(){ console.log(this) // window }(); //最后看看错误的调用方式 function(x,y){ alert(x+y); return x+y; }(3,4); /*匿名函数的N种写法如下所示 匿名函数没有实际名字，也没有指针，怎么执行？ 关于匿名函数写法，很发散~ +号是让函数声明转换为函数表达式。汇总一下 最常见的用法： 代码如下:*/ (function() { alert('water'); })(); /*当然也可以带参数： 代码如下:*/ (function(o) { alert(o); })('water'); /*想用匿名函数的链式调用？很简单： 代码如下:*/ (function(o) { console.log(o); return arguments.callee; })('water')('down'); /*常见的匿名函数都知道了，看看不常见的： 代码如下:*/ ~(function(){ alert('water'); })();//写法有点酷~ //代码如下: void function(){ alert('water'); }();//据说效率最高~ //代码如下: +function(){ alert('water'); }(); //代码如下: -function(){ alert('water'); }(); //代码如下: ~function(){ alert('water'); }(); //代码如下: !function(){ alert('water'); }(); //代码如下: (function(){ alert('water'); }());//有点强制执行的味道~
2.函数定义和函数表达式
1）函数定义 可以在定义前加括号执行，也可以在定义后加括号执行 fn(1,2);
function fn(x,y){
alert(x+y);
return x+y;
}
fn(3,4);
2）通过var 的函数，只能在后面运行
//fn(1,2);
var fn = function(x,y){
alert(x+y);
return x+y;
};
fn(3,4);3.形参、实参和不定参
1）实参：执行函数时 可以传递 (用已知的变量 / 具体的数据)；
2）形参：相当于函数局部的变量，命名规则和var相同；定义，无中生有
var s = 5; fn(s);//实参 function fn(x) {//形参 // var x; alert(x) }
//形参 / 实参都可以有多个，用 , 隔开 sum(2,4); function sum(a,b) { alert(a+b) } //实参和形参个数不一定非得一样，但是不一样的时候要注意一一对应的关系 sum(1,2,3,4); function sum(a,b,c) { alert(a+b+c); }
//形参多了的话，没有对应的那些形参，值就是undefined sum(1,2,3); function sum(a,b,c,d) { // var a,b,c,d; alert(a+b+c+d); alert(d); } sum(1,2,3); function sum(a,b,c,d) { // 给形参添加默认值 a = a || 0; b = b || 0; c = c || 0; d = d || 0; alert(a+b+c+d); }
3）不定参：arguments,存储着所有 实参 的集合
注：无论有没有形参，实参都会被存在 不定参 里面
sum(1,2,3,4,5,6,7,8,9); function sum() { alert(arguments.length); alert(arguments[8]); var x = 0; for(var i = 0 ,len = arguments.length; i < len; i ++){ x += arguments[i]; } alert(x); }
4.函数中return的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: red;
}
.box{
font-size: 18px;
color: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
每个函数默认返回 return undefined
*/
var oBox = document.getElementById("box");
function fn() {
oBox.innerHTML = "hahahah";//过程
// return "bear";//结果
return oBox;
}
var x = fn();
alert(x);
fn();
fn().className = "box";//效果相当于oBox.className = "box";
</script> </body> </html>
一、作用域
javascript解析顺序 1.（定义）先解析var function 参数 a.该步骤的var只定义变量，后面的=赋值不解析 b.该步骤的函数只定义函数，函数的执行不解析 c.重名的只留一个，var 和函数重名 函数优先 2.（执行）再从上至下执行其他代码 作用：读写 域：范围，区域 解析：从上至下 1 找 var 定义函数 参数 2 执行var a = 1; function fn( a ) { alert(2); a = 3; alert(a); } fn( a ); alert( a ); /* 1 找 a = und;==》a = 1; fn = function fn( a ) { // var a = 1; alert(2); a = 3; } 2 执行 a = 1; fn( a );=》fn(1) 1 找 a = und;==>a = 1;==>a = 3; 2 执行 a = 1; alert(2);==>2 a = 3; alert( a ); ==>1 */
一、常用方法
1.关于数字的方法
1）js的六大数据类型：
number，string，boolean，function，undefined，object
2）number数字方法
在js里面的小数和整数统一都是数字，-2^53-2^53，超出范围之后精度就会不准确
Number()——参数中必须能被转换成数字，否则返回NaN:
parseInt(解析的参数)——将参数转换为数字，整数部分遇到不是数字就停
parseFloat()——将参数转换为数字，不是数字就停，否则直到小数部分遇到不是数字就停
Num.toFixed(n)——四舍五入保留n位小数
NaN（Not a Number） NaN 不等于自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var x = "hah";
alert(typeof x);//string
alert(Number(x));//NaN
alert(typeof Number(x));//number
var x = "78.25";
alert(parseInt(x));
alert(typeof parseInt(x));
alert(parseFloat(x));
alert(typeof parseFloat(x));
var x = 25.88254;
alert(x.toFixed(3));
</script>
</body>
</html>
2.数学方法
Math 数学函数
Math.pow(16, 2)——十六的平方 256
Math.round(5.5)——四舍五入（整数）
Math.ceil(0.2)——向上取整
Math.floor(0.9)——向下取整
Math.max()——取参数中最大的值
Math.min()——取参数中最小的值
Math.random()——0-1的随机数 (小数点后15位)
Math.random()*m+n 生成 n ~ (m+n)之间的数
Math.PI——π=3.141592653589793
Math.abs()——求绝对值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
alert(Math.pow(3,4));
alert(Math.round(25.99));
alert(Math.ceil(0.1));
alert(Math.floor(0.99));
var x = Math.max(12,0,2,-5);
var y = Math.min(12,0,2,-5);
alert(x);
alert(y);
alert(Math.random());//[0,1)
alert(Math.random()*20 + 10);
alert(Math.PI);
alert(Math.abs(-10));
</script>
</body>
</html>
