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 查看，可以发现：

我们呼叫函式时所传入的参数 para 一个参数函式里面宣告的localVariable区域变数thisarguments 是一个类阵列，接收到的值，就是呼叫函式时传入的 "所有参数"。 这里所传入的参数obj.aFunction(‘一个参数’,1,2)，arguments的值 [‘一个参数’,1,2]。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来解决这个问题。

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