JavaScript "käytä tiukkaa"

Sisällysluettelo

Näytä sisällysluettelo

"use range"; Määrittää tämän JavaScript-koodi tulee suorittaa sisään "tiukka tila".

"Käytä tiukkaa" -direktiivi

"use strict" -direktiivi oli uusi ECMAScriptin versiossa 5.

Se ei ole lausunto, vaan kirjaimellinen ilmaus, jota aikaisemmat versiot ovat jättäneet huomioimatta JavaScriptistä.

"käytä tiukkaa":n tarkoitus on osoittaa, että koodi tulee suorittaa "tiukassa tilassa".

Tiukalla tilassa et voi käyttää esimerkiksi ilmoittamattomia muuttujia.

Kaikki nykyaikaiset selaimet tukevat "käytä tiukkaa" paitsi Internet Explorer 9 ja vanhempi:

Directive
"use strict"	13.0	10.0	4.0	6.0	12.1

Taulukon numerot osoittavat ensimmäisen selainversion, joka tukee täysin direktiiviä.

Voit käyttää tiukkaa tilaa kaikissa ohjelmissasi. Se auttaa sinua kirjoittamaan puhtaamman koodin, kuten estää sinua käyttämästä ilmoittamattomia muuttujia.

"use range" on vain merkkijono, joten IE 9 ei anna virhettä, vaikka se ei ymmärtäisi sitä.

Tiukan tilan ilmoittaminen

Tiukka tila ilmoitetaan lisäämällä "use range"; komentosarja tai funktio.

Ilmoitettu komentosarjan alussa, sillä on yleinen laajuus (kaikki koodi komentosarjassa suoritetaan tiukassa tilassa):

Esimerkki

"use strict";
x = 3.14;       // This will cause an error 
 because x is not declared

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
</script>

</body>
</html>

Esimerkki

"use strict";
myFunction();

function myFunction() {
   y = 3.14;   // This will also cause an error 
 because y is not declared
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Global "use strict" declaration.</h2>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
myFunction();

function myFunction() {
  y = 3.14;   // This will cause an error (y is not defined)
}
</script>

</body>
</html>

Ilmoitettuna funktion sisällä, sillä on paikallinen laajuus (vain funktion sisällä oleva koodi on tiukassa tilassa):

x = 3.14;       // This will not cause an error.
 
myFunction();
function 
 myFunction() {
  "use strict";
    y = 3.14;   // This will cause an error
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<p>"use strict" in a function will only cause errors in that function.</p>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
x = 3.14;    // This will not cause an error.
myFunction();

function myFunction() {
  "use strict";
  y = 3.14;  // This will cause an error (y is not defined).
}
</script>

</body>
</html>

"Käytä tiukkaa"; Syntaksi

Tiukan tilan ilmoittamisen syntaksi on suunniteltu yhteensopivaksi JavaScriptin vanhemmat versiot.

Numeerisen literaalin (4 + 5;) tai merkkijonoliteraalin ("John Doe";) kääntäminen JavaScript-ohjelmalla ei ole sivuvaikutuksia. Se yksinkertaisesti käännetään ei-olemaan muuttuja ja kuolee.

Joten "käytä tiukkaa"; on merkitystä vain uusille kääntäjille, jotka "ymmärtävät" merkityksen siitä.

Miksi tiukka tila?

Tiukka tila helpottaa "suojatun" JavaScriptin kirjoittamista.

Tiukka tila muuttaa aiemmin hyväksytyn "huonon syntaksin" todellisiksi virheiksi.

Esimerkiksi tavallisessa JavaScriptissä muuttujan nimen virheellinen kirjoittaminen luo uuden globaali muuttuja. Tiukassa tilassa tämä aiheuttaa virheen, mikä tekee sen mahdottomaksi luodaksesi vahingossa globaalin muuttujan.

Normaalissa JavaScriptissä kehittäjä ei saa virhepalautetta arvojen määrittäminen ei-kirjoitettaville ominaisuuksille.

Tiukassa tilassa mikä tahansa määritys ei-kirjoitettavaan omaisuuteen, vain getter ominaisuus, ei-olemassa oleva ominaisuus, ei-olemassa oleva muuttuja tai ei-olemassa oleva objekti, antaa virheen.

Ei sallittu tiukassa tilassa

Muuttujan käyttäminen ilmoittamatta sitä ei ole sallittua:

"use strict";
 x = 3.14;                // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
</script>

</body>
</html>

Objektit ovat myös muuttujia.

Objektin käyttäminen ilmoittamatta sitä ei ole sallittua:

"use strict";
 x = {p1:10, p2:20};      // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using an object without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = {p1:10, p2:20};   // This will cause an error (x is not defined).
</script>

</body>
</html>

Muuttujan (tai objektin) poistaminen ei ole sallittua.

"use strict";
let x = 3.14;
delete x;                // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With &quot;use strict&quot;:</h2>
<h3>Deleting a variable (or object) is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = 3.14;
delete x;     // This will cause an error 
</script>

</body>
</html>

Toiminnon poistaminen ei ole sallittua.

"use strict";
function x(p1, p2) {}; 
delete x;                
 // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Deleting a function is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
function x(p1, p2) {}; 
delete x;        // This will cause an error 
</script>

</body>
</html>

Parametrin nimen kopioiminen ei ole sallittua:

"use strict";
function x(p1, p1) {};   // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Duplicating a parameter name is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
function x(p1, p1) {};   // This will cause an error 
</script>

</body>
</html>

Numeeriset oktaalilitraalit eivät ole sallittuja:

"use strict";
let x = 010;             // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Octal numeric literals are not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = 010;   // This will cause an error 
</script>

</body>
</html>

Kahdeksantaalimerkit eivät ole sallittuja:

"use strict";
let x = "\010";            // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Octal escape characters are not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = "\010";   // This will cause an error 
</script>

</body>
</html>

Kirjoittaminen vain luku -ominaisuuteen ei ole sallittua:

"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Writing to a read-only property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;   // This will cause an error
</script>

</body>
</html>

Kirjoittaminen vain saatavaan omaisuuteen ei ole sallittua:

"use strict";
const obj = {get x() 
{return 0} };
obj.x = 3.14;            // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Writing to a get-only property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
const obj = {get x() {return 0} };

obj.x = 3.14;   // This will cause an error
</script>

</body>
</html>

Ei-poistamattoman ominaisuuden poistaminen ei ole sallittua:

"use strict";
delete Object.prototype; // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Deleting an udeletable property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
delete Object.prototype;   // This will cause an error 
</script>

</body>
</html>

Sanaa eval ei voi käyttää muuttujana:

"use strict";
let eval = 3.14;         // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The string "eval" cannot be used as a variable.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let eval = 3.14;   // This will cause an error 
</script>

</body>
</html>

Sanaa argumentit ei voi käyttää muuttujana:

"use strict";
let arguments = 3.14;    // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The string "arguments" cannot be used as a variable.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let arguments = 3.14;   // This will cause an error 
</script>

</body>
</html>

with-käsky ei ole sallittu:

"use strict";
with (Math){x = cos(2)}; // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The with statement is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
with (Math){x = cos(2)};   // This will cause an error 
</script>

</body>
</html>

Turvallisuussyistä eval() ei saa luoda muuttujat laajuudessa, josta se kutsuttiin.

Tiukassa tilassa muuttujaa ei voi käyttää ennen kuin se on ilmoitettu:

"use strict";
eval ("x = 2");
alert (x);      // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
eval ("x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

Tiukassa tilassa eval() ei voi ilmoittaa muuttujaa käyttämällä var-avainsanaa:

"use strict";
eval ("var x = 2");
alert (x);    // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
eval ("var x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

eval() ei voi ilmoittaa muuttujaa let-avainsanalla:

eval ("let x = 2");
alert (x);        // This 
will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Using eval()</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
eval ("let x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

tämä-avainsana funktioissa käyttäytyy eri tavalla tiukassa tilassa.

tämä-avainsana viittaa objektiin, joka kutsutaan funktioksi.

Jos objektia ei ole määritetty, toimii tiukassa tilassa palauttaa määrittämättömän ja toimii normaalisti tila palauttaa globaalin objektin (ikkunan):

"use strict";
function myFunction() {
  
  alert(this); // will alert "undefined"
}
myFunction();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Inside functions, the "this" keyword is no longer the global object if not specified:</h3>

<script>
"use strict";
function myFunction() {
  alert(this);
}
myFunction();
</script>

</body>
</html>

Tulevaisuuden todiste!

Tuleville JavaScript-versioille varattuja avainsanoja EI voi käyttää muuttujina nimet tiukassa tilassa.

Nämä ovat:


  implements
  interface
  let
    package
  private
  protected
  public
  static
  yield

"use strict";
let public = 1500;      // This will cause an error

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Future reserved keywords are not allowed in strict mode.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let public = 1500;   // This will cause an error 
</script>

</body>
</html>

Varo!

Käytä tiukkaa ohjetta tunnistetaan vain skriptin alkussa tai toiminto.