整理Javascript函數學習筆記_javascript技巧
- WBOY原創
- 2016-05-16 15:28:321308瀏覽
1、什麼是函數
如果需要多次使用同一段程式碼，可以把它們封裝成一個函數。函數（function）就是一組允許在你的程式碼裡隨時呼叫的語句。每個函數實際上是一個短小的腳本。
如:要完成多組數和的功能。
var sum; sum = 3+2; alear(sum); sum = 7+8; alear(sum); ......//不停的重复两行代码
如果要實現8組數的和，就需要16行程式碼，實現的越多，程式碼行也就越多。所以我們可以把完成特定功能的程式碼區塊放到一個函數裡，直接呼叫這個函數，就省去重複輸入大量程式碼的麻煩。使用函數完成：
function add(a,b){
sum = a+b;//只需要写一次就可以
};
add2(3,2);
add2(7,8);
......//只需要调用函数就可以
2、定義函數
定義函數語法
function 函数名(参数argument){
函数体statements;
}
//function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
function shout(){
var beatles = Array("John","Paul","George","Ringo");
for (var count = 0; count < beatles.length; count++){
alert(beatles[count]);
}
}
//这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。
shout();调用函数，执行脚本里的动作
完成對兩個數求和並顯示結果的功能：
<script type="text/javascript">
function add2(){
sum = 3+2;
alert()sum;
}
add2();
</script>
3、函數呼叫
函數定義好後，是不能自動執行的，需要呼叫它,直接在需要的位置寫函數名。
第一種情況:在<script>標籤內呼叫。 <br />
</script>
<script type="text/javascript">
function add(){
sum = 1+1;
alert(sum);
}
add();//调用函数，直接写函数名。
</script>
第二種情況:在HTML檔案中調用，如透過點擊按鈕後調用定義好的函數。
<html>
<head>
<script type="text/javascript">
function add2(){
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>
4、有參數的函數
其實，定義函數還可以如下格式：
function 函數名(參數1，參數2){
函數程式碼
}
在定義函數時，你可以為它宣告任意多個參數，只要用逗號把它們分隔開來就好。在函數內部，你可以像使用普通變數一樣使用它的任何一個參數。
依照這個格式，函數實作任兩個數的和應該寫成：
function add2(x,y){
sum = x + y;
document.write(sum);
}
//x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
實作以下功能:
定義函數實現三個數的和，函數名為add3。
計算5、8、3/7、1、4兩組三個數的和。
<script type="text/JavaScript">
function add3(x,y,z) {
sum = x + y +z;
document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
}
add3(5,8,3);
add3(7,1,4);
</script>
5、回傳值的函數
函數不僅能夠(以參數的形式)接收數據，也能夠傳回數據。我們完全可以建立一個函數並讓它傳回一個值、一個字串、一個陣列或是一個布林值。這是需要用到return語句。
function multiply(num1,num2){
var total = num1*num2;
return total;
}
之前透過"document.write"把結果輸出來，現在使用函數輸出
我們只要把"document.write(sum)"這行改成如下程式碼：
function add2(x,y){
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}
//还可以通过变量存储调用函数的返回值：
result = add2(3,4);//语句执行后，result变量中的值为7。
例：下面這個函數只有一個參數（一個華氏溫度值），它將傳回一個數值（同一溫度的攝氏溫度值）：
<script type="text/javascript">
function convertToCelsius (temp) {
var result = temp - 32;
result = result / 1.8;
return result;
}
//函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
</script>
在這個例子裡，變數temp_celsius的值將會是35，這個數值由convertToCelsius函數傳回。
在命名變數時，我用底線來分隔各個單字；在命名函數時，我從第二個字開始把每個單字的第一個字母寫成大寫形式（也就是駝峰命名法）。
1）、變數的作用域
變數既可以是全域的，也可以是局部的。
全域變數（global variable）可以在腳本中的任何位置被引用。一旦你在某個腳本裡聲明了一個全域變量，就可以從這個腳本中的任何位置------包括函數內部------引用它。全域變數的作用域是整個腳本。
局部變數（local variable）只存在於宣告它的那個函數的內部，在那個函數的外部是無法引用它的。局部變數的作用域僅限於某個特定的函數。
可以用var關鍵字明確地為函數變數設定作用域。
如果在某個函數中使用了var，那個變數就將被視為一個局部變量，它只存在於這個函數的上下文中；反之，如果沒有使用var，那個變數就將被視為一個全域變量，如果腳本裡已經存在一個與之同名的全域變量，這個函數就會改變那個全域變數值。
例：
function square(num){
total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
这是错误的，number的值为400，但是这里alert弹出的是total的值，应该是50.
这些代码将不可避免地导致全局变量total的值发生变化。
全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number，但因为未把这个函数内部total变量明确地声明为局部变量，这个函数把名字同样是total的那个全局变量的值也改变了。
把这个函数写成如下的样子才是正确的：
function square(num){
var total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
</script>
正确结果：
以上就是关于Javascript函数的学习笔记，还涉及到了一些变量的知识点，希望对大家的学习有所帮助。