javascript
Web-Lesson07-JS的函数及作用域
一、函數
1.有名函數和匿名函數
函數：是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊，包裹在花括號中，前面使用了關鍵詞 function：
有名函數：有名字的函數
函數名加括號執行 / 充當事件函數執行
function fn() {
alert(1);
}
fn();
匿名函數：沒有名字的函數
匿名函數不能單獨出現 一般充當事件函數，匿名函數的作用是避免全局變量的污染以及函數名的沖突
匿名函數主要三種寫法：
1)使用()將函數及函數后的括號包裹
(function(){}());
注：此方式把（）換成[]也可以
2)使用()值包裹函數值
(function(){})();
注：此方式把（）換成[]不可以
3)可以使用多種運算符開頭但一般用！！function(形參列表){}(實參列表) 三種寫法特點：
1)能夠將匿名函數與調用的()為一個整體，官方推薦使用；
2)無法表明函數與之后的()的整體性，不推薦使用。 3)使用！開頭，結構清晰，不容易混亂，推薦使用； //方式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);
?
? 結果彈出兩次提示框，分別顯示3和7。fn調用了兩次；?
2）通過var 的函數，只能在后面運行 ???
//fn(1,2);var fn = function(x,y){
alert(x+y);
return x+y;
};
fn(3,4); 在var 之前的fn(1,2);不注掉，運行報錯。注掉后彈出一次提示框，顯示7。
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);}//形參多了的話，沒有對應的那些形參，值就是undefinedsum(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);==>2a = 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);//stringalert(Number(x));//NaNalert(typeof Number(x));//numbervar 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>?
轉載于:https://www.cnblogs.com/bear905695019/p/8339271.html
總結
以上是生活随笔為你收集整理的Web-Lesson07-JS的函数及作用域的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jquery_如何扩展方法
- 下一篇： QT5 QT4--LNK2019 无