JavaScript中函式,引數,全域性變數
阿新 • • 發佈：2019-01-08
1. 函式的概念
函式就是重複執行的程式碼片。或者說函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。
2. JavaScript 中的函式語法結構
使用關鍵字 function 定義一個函式
Function 函式的名稱(){
函式的主體
}
說明：
定義函式必須使用 function 關鍵字。
函式名必須是唯一的，儘量通俗易懂，並且跟你定義的程式碼有關。
函式可以使用 return 語句將某個值返回，也可以沒有返回值。
引數是可選的，可以不帶引數，也可以帶多個引數。如果是多個引數的話，引數之間要用英文逗號隔開
<body> <!--在點選的時候呼叫一個函式名稱為b_click的函式--> <button onclick="b_click();">點選試試</button> <button onclick="b_click();">第二次點選還是會呼叫函式</button> <!--實現這個函式--> <script type="text/javascript"> function b_click(){ alert('呼叫了一個名為b_click的函式'); } </script> </body>
3. 函式的定義與執行
常用的函式有兩種：
（1）不指定函式的名稱/匿名函式；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> // 由事件驅動onload執行重複的程式碼塊(匿名函式) window.onload=function(){ var myfunction=function(){ alert('呼叫了一個匿名的函式'); } // 呼叫這個匿名函式 alert(myfunction());//先輸出函式中的主體,再輸出undefined myfunction();//這個正確的, 因為不能將函式當做一個值輸出,只有這種形式才可以呼叫函式.從而執行函式體 } </script> </head> <body> </body> </html>
注意：如果我們只定義函式，並沒有呼叫函式，則函式本身是不會執行的。
(2)具備名稱的函式
function myfunction(){
document.write('這是一個有名稱的函式');
}
// 呼叫函式
myfunction();4.函式的呼叫
方法:(1)自己呼叫
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function ku(){ alert('放肆的哭'); } // 呼叫函式(自己呼叫) ku(); </script> </head> <body> <div onclick="ku();">點選試試讓它哭</div> </body> </html>
方法(2)通過事件驅動的方式呼叫函式
<body>
<button id="bot">再點選一下</button>
<script type="text/javascript">
var bot1=document.getElementById('bot');//獲取元素
bot1.onclick=bot; //直接呼叫函式的名稱就行,不需要新增括號
function bot(){ //建立了一個觸發點選事件後要執行的行為(函式)
alert('點選按鈕呼叫了有名稱的函式');
}
</script>
</body>4.帶有引數的函式
語法：
function 函式名(引數 1,引數 2,….,引數 n)
{
函式體語句
}
<script type="text/javascript">
// 定義一個帶有引數的函式function 函式名稱(引數1,引數2....){函式體}
function test1(a){ //形參
document.write(a);
}
// test1()(10); //實參,返回結果為10
function test2(a,b){ //形參
document.write(a+b);
}
test2(4,5); //實參 形參與實參必須一一對應,其返回結果為9
test2('4','5'); //返回結果為45
</script>
案例:使用者手動輸入兩個數字,判斷兩個數字的大小,如果a>b,則返回1,否則返回-1,相等返回0,使用函式解決問題
var mess1=prompt('請輸入第一個數字:');
var mess2=prompt('請輸入第二個數字:');
var num1=parseFloat(mess1);
var num2=parseFloat(mess2);
//傳統方式:
// if(num1>num2){
// document.write(1);
// }else if(num1==num2){
// document.write(0);
// }else{
// document.write(-1);
// }
//常用的方法: 簡化程式碼,提高訪問效果,以及執行時間
function Numberbijiao(num1,num2){
if(num1>num2){
document.write(1);
}else if(num1==num2){
document.write(0);
}else{
document.write(-1);
}
}
// Numberbijiao():這個函式是用來比較兩個數字大小的
NumberBj(num1,num2);
注:定義函式時的引數叫“形參”，呼叫函式時的引數叫“實參”。
5.帶有返回值的函式
通過使用 return 語句就可以實現。
在使用 return 語句時，函式會停止執行，並返回指定的值。
語法：
function myFunction()
{
return
}
函式中'return'關鍵字的作用：
1、返回函式執行的結果
2、結束函式的執行
3、阻止預設行為
<script type="text/javascript">
var a=5,b=10;
function test1(a1,b1){
return a1+b1;
}
// test1(a,b); //傳遞的引數為實參
var num=test1(a,b);
alert(num);
// 比較兩個數的大小,a>b返回1,否則返回-1.相等返回0,
var mess1=prompt('請輸入第一個數字:');
var mess2=prompt('請輸入第二個數字:');
var num1=parseFloat(mess1);
var num2=parseFloat(mess2);
function bijiao(num1,num2){
if(num1>num2){
return 1;
}else if(num1<num2){
return -1;
}else{
return 0;
}
}
var test=bijiao(num1,num2)
alert(test);
6. 全域性變數和區域性變數
1、函式變數的作用域有全域性變數和區域性變數兩種,全域性變數寫在函式的最前面，區域性變數寫在函式體內，區域性變數省略了 var 也就預設成為了全域性變數！
2、函式體內部可以讀取到函式外的變數，而函式外不能讀取到函式內的變數！
全域性變數: 在整個程式中,所有的函式都可以訪問到的變數,或者是寫在物件底下的變數
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 全域性變數:在整個程式中,所有函式都可以訪問到的變數,或者是寫在物件底下的變數
window.onload=function(){
// 變數/欄位:用來儲存資料
var name='小張';
var age=20;
var job='軟體開發';
var money=3000.34;
function mytest1(){
document.write('我是第一個函式呼叫變數='+name);
}
mytest1();
document.write('<br />');
function mytest2(){
document.write('我是第二個函式呼叫變數='+name);
}
mytest2();
document.write('<br />');
注: // 以上兩個函式都可以訪問變數name的值,所以把name 稱之為全域性變
function mytest3(){
document.write('我是第三個函式呼叫變數='+money);
}
mytest3();
}
</script>
</head>
<body>
</body>
</html>
例2:
<script type="text/javascript">
window.onload=function(){
// var num1=20; //定義為全域性變數
function test1(){
// var num1=20;
//轉換為全域性變數:去掉var關鍵字
num1=20;
}
function test2(){
document.write('使用test2函式訪問 test1函式中的變數num1='+num1);
}
test1();
test2(); //在呼叫test2函式的時候,訪問test1中的變數num1無效,原因是num1作用於test1函式
//在一個函式體中如何將一個區域性變數轉換為全域性變數?
//注: 只需要將這個函式體中的定義變臉搞得關鍵字var 去掉
}
</script>