函式呼叫與封裝
阿新 • • 發佈：2021-08-11
一、函式呼叫
構成函式的js程式碼在定義的時候，並不會執行，只有呼叫該函式的時候，它們才會執行，呼叫函式有4種方法：
²作為函式呼叫
²作為方法呼叫
²作為建構函式 //最後兩個不做為現階段需要掌握的內容介紹。
²通過它們的call()和apply()方法間接呼叫
1.作為函式呼叫：
呼叫函式表達（或者函式宣告）式可以進行普通的函式呼叫。
var a = 10,b = 20;
var add=function(){
var c = a+b;
return c;
}
console.log(add());
函式宣告：
var a = 10,b = 20;
function add(){
var c = a+b;
return c;
}
2.方法呼叫
函式和方法本質上是一類東西，只不過函式是屬於全域性物件window的方法，他可以直接用函式名進行呼叫；而其它物件的方法，則不可以這樣呼叫，只能被物件進行呼叫。
觀察上面的事例，無論是函式宣告還是函式表示式，都可以被全域性物件window呼叫實現：
console.log(window.add());
console.log(add()); //兩種呼叫方式，展示出的結論是一樣的，充分證明宣告的函式就是window物件的方法。
但是，屬於其它物件的方法，就不能單獨使用名稱呼叫：
var arr = [];
var a = 10,b = 20;
arr.add = function(){//add方法此時屬於arr物件
var c = a+b;
return c;
}
console.log(arr.add());//其它物件的方法，只屬於這個物件，只能被這個物件呼叫
console.log(add());//報錯，單獨呼叫不可以
console.log(window.add());//其它物件也無法呼叫
注意：哪怕生成兩個值一模一樣的物件，但是他們也不是同一個東西，他們的方法不能互相呼叫，只屬於自己。
var arr1 = [];
var arr2 = [];
var a = 10,b = 20;
arr1.add = function(){
var c = a+b;
return c;
}
console.log(arr1.add());
console.log(arr2.add());
3.方法呼叫中的方法鏈
如果一個方法的返回值是物件，那麼這個返回值依然可以呼叫它自己的方法，形成方法的鏈式呼叫。
var jim = {
name:"jim",
age:15,
myName:function (){
return jim.name;
}
}
var student = {
1001:jim,
stu : function(){
return student[1001];
}
}
var obj = student.stu();
console.log(obj.myName());
以上obj就是student.stu()的返回值，也就是物件jim；於是可以修改程式碼為：
console.log(student.stu().myName());
二、函式封裝
1.函式封裝概念
函式封裝是一種函式的功能，它把程式設計師寫的一個或者多個功能通過函式的方式封裝起來，對外只提供一個簡單的函式介面（其實所說介面就是方法）。
比如說，陣列遍歷：
var arr = [1,2,3,4,5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
以上寫法只能實現一個數組的遍歷，當我們有很多陣列需要遍歷的時候，只能複製for迴圈，重寫程式碼來實現。可它們明明是一樣的程式碼，知識陣列不同，這樣會產生很大的冗餘。
於是我們可以將for迴圈封裝到一個函式中，在遇到需要陣列遍歷的時候，只要引入並呼叫這個函式即可實現任何陣列的遍歷。
var arr1 = [1,2,3,4,5];
var arr2 = [9,8,7,6,5,4];
function arrbl(arr){
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
}
//遍歷arr1
arrbl(arr1);
//遍歷arr2
arrbl(arr2);
這個和我們之前使用的陣列方法有異曲同工之妙，但是原理並不相同，不要混為一談。
封裝函式的三個要素；
功能、引數、返回值。
實際在運用函式封裝的過程中，有許多情況我們會設定返回值，這是一種很好的操作，當然如果不需要的話，可以不設定。
2.函式封裝事例
2.1封裝奇偶數判斷方法
function isOuShu(num){
if(num%2==0){
return true;
}else{
return false;
}
2.2自然數之和
function sumfromNToM(n,m){
var sum = 0;
for(var i=n;i<=m;i++){
sum=sum+i;
}
return sum;
}
2.3判斷閏年
function isLeapYear(year){
if((year%4==0 && year%100!=0)||(year%400==0)){
return true;
}
return false;
}
2.4生成4位的驗證碼
function getFourNum(){
var str="";
for(var i=0;i<4;i++){
str += parseInt(Math.random()*10);
}
return str;
}