JSエンジンは宣言されていない変数をどのように操作しますか？ JS閉鎖の私の研究の間

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta lan="en-us" charset="UTF-8"> 
 
    </head> 
 
    <body> 
 

 
    <p>Counting with a local variable.</p> 
 

 
    <p id="demo"></p> 
 
    <button type="button" onclick="myFunction('+')">Count +</button> 
 
    <button type="button" onclick="myFunction('-')">Count -</button> 
 

 
    <script> 
 
     document.getElementById("demo").innerHTML = 0; 
 
     function add(number){ 
 
     var counter = 0; 
 
     return function() {return counter += number;} 
 
     } 
 
     function sub(number){ 
 
     var counter = 0; 
 
     return function() {return counter -= number;} 
 
     } 
 

 
     var counterIncr = add(1); 
 
     var counterDicr = sub(1); 
 

 
     function myFunction(s){ 
 
     if(s == "+"){ 
 
      /*this.*/counter1 = counterIncr(); 
 
     } 
 
     else if (s == "-"){ 
 
      /*this.*/counter2 = counterDicr(); 
 
     } 
 

 
     if(!counter2 && counter1){ 
 
      document.getElementById("demo").innerHTML = counter1; 
 
     } 
 
     else if(!counter1 && counter2){ 
 
      document.getElementById("demo").innerHTML = counter2; 
 
     } 
 
     else if(counter1 && counter2){ 
 
      document.getElementById("demo").innerHTML = (counter1 + counter2); 
 
     } 
 
     } 
 
    </script> 
 

 
    </body> 
 
</html>

私は2つのボタンを使ってHTMLページを実装する、W3Cの例を拡張しました。この例にはボタンが1つしかありません。最初のボタンはクリックオンを増加させ、2番目のボタンはそのカウンターを減少させます。これらの変数はthis.counter1とthis.counter2として宣言されており、このページの実装は期待どおりに機能します。質問：私は、counter1とcounter2の宣言（...ちょうど楽しみのため）から "this"を省略すると、私のページはまだ動作します（厳密には厳密なモードではありません）が、両方のボタンが1回クリックされたときだけです。？

function myFunction() { 
 
    // explicitly declared variable (local) 
 
    var explitic = "foo"; 
 
    
 
    // implicitly declared variable (global) 
 
    implicit = "bar"; 
 
} 
 
    
 
myFunction(); // call function 
 

 
console.log(typeof explicit); // prints "undefined" since local 
 
console.log(typeof implicit); // prints "string" since global

：エンジンが操作（おやつ）ボンネットの下に宣言されていない変数

出典

2016-12-10 Gfour

明示的に宣言されていない変数は、常に自動的にグローバル変数になります

さらに多くの例here。

厳格なモードが、一方で、暗黙のうちに受け入れていないすべての変数を宣言した：「宣言されていない」ある

"use strict"; 
 

 
var explicitGlobal = "foo"; 
 

 
function myFunction() { 
 
    // works because explicitGlobal is already defined 
 
    explicitGlobal = "foo2"; 
 

 
    // Uncaught ReferenceError: implicit is not defined 
 
    implicit = "bar"; 
 
} 
 
     
 
myFunction();

出典

2016-12-10 23:44:42 Frxstrem

変数は暗黙的にグローバル変数（やプロパティとして割り当てられています大域オブジェクトの）非厳密（「ぎこちなし」）モードで実行されます。あなたはちょっとしたモードになっているので、あなたのコードが動作します。

;(function sloppy() { 
 
    sloppyVar = 'sloppy' 
 
})() 
 

 
console.log(sloppyVar) //=> 'sloppy' 
 

 
;(function strict() { 
 
    "use strict"; 
 
    strictVar = 'strict' //=> throws ReferenceError 
 
})()

ことがstrictモードで廃止されるため、あなたはおそらく、とにかくグローバルオブジェクトを参照するためにthisを使用すべきではありません。

;(function sloppy() { 
 
    console.log(this === window) //=> true 
 
})() 
 

 
;(function strict() { 
 
    "use strict"; 
 
    console.log(this) //=> undefined 
 
})()

あなたのブラウザで作業しているときwindow参照を使用する方が正しいので、代わりに次のように記述します。

window.globalVar = 'stuff'

出典

2016-12-10 23:46:42 gyre

ずさんなモードが何とか理由を説明してもらえ両方のボタンが1回クリックされた後、ページに正しい（クリックに基づいて）カウンタの値が表示されますか？最初のクリックが「気付かない」ようなページの動作はなぜですか？ – Gfour

JSエンジンは宣言されていない変数をどのように操作しますか？ JS閉鎖の私の研究の間

答えて

関連する問題