2016-12-24 7 views
7

はい、これはおそらく非常にばかげた質問ですが、これはしばらく私を悩ませています。機能パラメータを使用する理由グローバル変数?

私は今JavaScriptをしばらく学習しており、すべてを完全に理解しています。 。 。関数 "パラメータ"を除いて(私は彼らが呼ばれていると信じています)。

私は、彼らがそうのように働くことを教えられた。

function test(number) { 
 
    document.write(number); 
 
    }; 
 

 
test(1); 
 
test(12);

これは私には完璧な意味があります。しかし、最近、私は少し違ったものを見つけました。私は真剣に理解していない何

var counterDays = document.getElementById('days'); 
 
var counterHours = document.getElementById('hours'); 
 
var counterMinutes = document.getElementById('minutes'); 
 
var counterSeconds = document.getElementById('seconds'); 
 

 

 
var date = new Date('December 28, 2016 00:00:00'); 
 

 
function updateTimer(date) { 
 
    
 
    var time = date - new Date(); 
 
    
 
    return { 
 
     'days': Math.floor(time/(1000 * 60 * 60 * 24)), 
 
     'hours': Math.floor((time/(1000 * 60 * 60)) % 24), 
 
     'minutes': Math.floor((time/1000/60) % 60), 
 
     'seconds': Math.floor((time/1000) % 60), 
 
     'total': time 
 
    }; 
 
}; 
 

 
function startTimer(counterDays, counterHours, counterMinutes, counterSeconds, date) { 
 
    
 
    var timerInterval = setInterval(function() { 
 
     var timer = updateTimer(date); 
 
     
 
     //Changes the text of the 'counter' 
 
     counterDays.innerHTML = timer.days; 
 
     counterHours.innerHTML = timer.hours; 
 
     counterMinutes.innerHTML = timer.minutes; 
 
     counterSeconds.innerHTML = timer.seconds; 
 
     
 
     window.onload = function() { 
 
    
 
    startTimer(counterDays, counterHours, counterMinutes, counterSeconds, date); 
 
     };
<span id="days">&nbsp;</span> 
 
<span id="hours">&nbsp;</span> 
 
<span id="minutes">&nbsp;</span> 
 
<span id="seconds">&nbsp;</span>

変数dateがグローバルスコープ内の既存の変数であるときupdateTimerは常に、括弧内のdateを必要とする理由です。 startTimerと同じです。私はなぜそれを渡す必要があるのか​​理解できません。関数内の変数にアクセスするだけでなく、グローバルスコープを持つので、その変数にアクセスするのはなぜでしょうか。その代わりに、変数を関数として渡す必要があります。

私は試してみましたが、機能を動作させる唯一の方法は、変数を渡すことです。何故ですか???

私はまだ学んでいますが、インターネットで関数とそのパラメータの詳細を検索しましたが、すべて私の最初の例に似ています。私はこれがおそらくすべて頭を上回っていることは分かっていますが、私の人生にとっては理解できません。

注:私はまだ学んでいますので、申し訳ありませんが、この全体の質問は単純なばかです。

また、問題が発生しているJSのコードは実際には実行されません。これは、私のコードをすべて入れたくないのではなく、問題を抱えているコードだからです。

+0

のスタイルで書かれたコードを通読し、維持する方がはるかに簡単です)最初の例

3の出力を確認することができ、一方、「なぜ、ちょうど変数にアクセスしません彼らはグローバルスコープを持っているので、関数内で実行してください。 "プログラムのサイズが10倍または100倍大きくなったとします。それは管理不能になるでしょう。 –

+0

申し訳ありませんが、なぜパラメータを削除するとプログラムのサイズが大きくなるのか分かりません。 。 。 – BZCC

+1

パラメータとして渡す必要はありません。しかし、それはプログラムをより管理しやすくします。 "カプセル化"と "抽象化"という言葉を参照してください。あなたは一度にあなたの頭の中でシステムの構造全体を保持しようとは思わない。おそらくあなたはそれを行うことができますが、あなたのコードで働く誰もが(そして何かを変えると、あなたの精神モデルを破壊します)ことはできません。 – Kittsil

答えて

8

なります代わりに私が仕事をする 機能のために、パラメータとして変数に渡す必要があります。

パラメータを使用して関数を定義する必要はありません。あなたは、彼らが高いスコープ変数

https://developer.mozilla.org/en-US/docs/Glossary/Scope

を活用して呼び出すことができますこの:

var x = 'baz'; 
function foo(x) { 
    return x; 
} 
foo(x); 

と同じことを行います:入力が保つことができますようにパラメータを取る

var x = 'baz'; 
function foo() { 
    return x; 
} 
foo(); 

ライティング機能あなたコードモジュラと副作用のない他の多くの利点を...

1.)2番目の例では、xが上位のスコープでアクセスできない場合は常にエラーがスローされます。

2)別の関数がxの値を変更した場合、2番目の例の出力に影響し、予期しない可能性があります。私はいつも最初の例

+1

良い答え。あなたがなぜモジュラー化するのが良いアイデアであるかについてもっと詳しく説明したら、本当に素晴らしいことでしょう。 – Kittsil

+0

ありがとうございました!今私は知っている! – BZCC

2

私はあなたのコード

var timer = updateTimer(date); 

を参照してください親切に呼び出された関数で、ここで日付パラメータを削除するだけでなく、見ての通り。これで、日付変数はグローバルスコープと同じように動作します。 だから、

function updateTimer() 
{ 
//date variable will be present here as global variable  
} 
var timer = updateTimer(); 
+0

申し訳ありませんが、あなたは本当に私の質問に答えていません。 – BZCC

+0

単純なことですが、呼び出し元の関数で引数の日付を渡さず、呼び出された関数でパラメータを受け取らないようにしてください。したがって、宣言した日付はグローバルスコープとして扱われます。とった? –

+0

わかりました、私は理解して、私は普通のばかなと聞いて申し訳ありませんが、私はそれらのパラメータを削除するよりも、その目的が何であるかをもっと知りたいと思っていました。残念ながら、すでにこの質問に回答している別の回答がありました。とにかく助けてくれてありがとう:) – BZCC

関連する問題