iT邦幫忙

0

30天不間斷的文章之旅_參數的基本介紹

昨天講了函式,那今天來講講參數吧!
那老樣子若有錯誤或需要補充的地方,也歡迎在下方留言讓我知道喔~~~謝謝大家!!

昨天有提到函式可以傳入參數。那麼什麼是參數呢?
我們先來看一段程式碼:

let globalVariable = '全域變數';
let obj = {
  aFunction (para) {
    let localVariable = '區域變數';
    console.log(para,localVariable,this,arguments,globalVariable)
    // 一個參數,區域變數,window物件,'一個參數',1,2, 全域變數
  }
}
obj.aFunction('一個參數',1,2);

上述函式中包含了哪些值?我們使用 console.log 查看,可以發現:

  1. 我們呼叫函式時所傳入的參數 para 一個參數
  2. 函式裡面宣告的localVariable區域變數
  3. this
  4. arguments 是一個類陣列,接收到的值,就是呼叫函式時傳入的 "所有參數"。 這裡所傳入的參數obj.aFunction(‘一個參數’,1,2),arguments的值 [‘一個參數’,1,2]。
  5. globalVariable 全域變數。

參數的名稱與傳入的值

在我們定義一段函式時,可以決定要不要給定參數。如果要,可以在函式名稱旁的()帶入一個名稱,這個名稱就是參數的名稱,因此給幾個名稱,就表示要傳入幾個參數,否則若參數的數量與傳入參數的數量不同時,會出現 undefined。
我們來看一個範例:

let a = '1';
let b = '2';
let c = '3';

function callMore(b,c,a,d){
  console.log(b,c,a,d); //"1" "2" "3" undefined
}
callMore(a,b,c);

在呼叫 callMore 函式時,傳入三個參數,分別為變數 a、b、c,但在callMore函式接收參數的數量總共是4個參數,而參數的名稱跟傳入的值也不太一樣。因此在這邊可以發現,參數的名稱與傳入的值是沒有關聯性的,我們只重視接收到了幾個值與順序。當參數傳入的數量與預先定義的參數數量不一致的時後,多的會以undefined呈現。

物件被當作參數傳入時,也依然會維持傳參考的特性

let obj = {
  name: '小明'
}
console.log(obj); // { name: '小明' }

function callObj(para){
  para.name='杰倫'
}

callObj(obj);
console.log(obj); // { name: '杰倫' }

在第一個console.log(obj)可以看到obj.name的值為小明。接著在callObj函式把obj物件當成參數傳入並且修改name屬性的值為杰倫。在第二個console.log(obj)可以看到原本name: '小明'被修改成為杰倫了。
所以物件被當成參數傳入時,依然會維持傳參考的特性。所以不要隨便去更改物件的屬性參數,這有可能導致原有的物件受到更動。

函式被當成參數傳入另一個函式,也就是callback function

我之前一直沒辦法理解到底什麼是callback function。在我努力思考中,終於搞清楚了。原來當一段函式被以參數的形式傳入到另一段函式中,就是callback function。
來看一段程式碼:

function callSomeone(name){
  console.log(name + '妳好') //小明你好
}

function functionB(fn){
  fn('小明');
}
functionB(callSomeone);

在呼叫functionB函式時,帶入的參數為callSomeone這個函式。
運作邏輯如下:
https://i.imgur.com/56efREy.png
因為callSomeone被當然參數傳到了functionB裡面,被functionB的參數fn接收,在functionB裡面執行callSomeone的函式,參數名稱是fn,就會寫成fn();再帶入參數進去,因此callSomeone印出來的直就會是 小明你好。我當初一看完這張圖我就懂什麼是callback function了。

當然callback function也還應用在其他地方,例如事件監聽addEventListener('click',send); function send() { console.log('送出') }
又或是

var funcA = function(){
  var i = Math.random() + 1;

  window.setTimeout(function(){
    console.log('function A');
  }, i * 1000);
};


var funcB = function(){
  var i = Math.random() + 1;

  window.setTimeout(function(){
    console.log('function B');
  }, i * 1000);
};

funcA();
funcB();

沒辦法確定funcA()還是funcB()誰會先執行的時候,就會利用到callback function來確保執行的順序。

// 為了確保先執行 funcA 再執行 funcB
// 我們在 funcA 加上 callback 參數
var funcA = function(callback){
  var i = Math.random() + 1;

  window.setTimeout(function(){
    console.log('function A');

    // 如果 callback 是個函式就呼叫它
    if( typeof callback === 'function' ){
      callback();
    }

  }, i * 1000);
};

var funcB = function(){
  var i = Math.random() + 1;

  window.setTimeout(function(){
    console.log('function B');
  }, i * 1000);
};

// 將 funcB 作為參數帶入 funcA()
funcA( funcB );

不過當程式碼一多時,會延伸出callback hell,這時就需要使用Promise來解決這個問題。

以上是今天介紹的參數的基本觀念。
如果我有寫不對的地方,如果我有寫錯或是有需要補充的,都歡迎大家跟我說喔~
如果覺得我寫得不錯,很清楚的話也歡迎讓我知道喔~
謝謝大家觀看 /images/emoticon/emoticon07.gif


尚未有邦友留言

立即登入留言