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这个函式。
运作逻辑如下：

因为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来解决这个问题。

以上是今天介绍的参数的基本观念。
如果我有写不对的地方，如果我有写错或是有需要补充的，都欢迎大家跟我说喔～
如果觉得我写得不错，很清楚的话也欢迎让我知道喔～
谢谢大家观看