"use strict"; กำหนดสิ่งนั้น โค้ด JavaScript ควรจะดำเนินการใน "โหมดเข้มงวด"
คำสั่ง "use strict" เป็นคำสั่งใหม่ใน ECMAScript เวอร์ชัน 5
ไม่ใช่คำสั่ง แต่เป็นการแสดงออกตามตัวอักษร ซึ่งเวอร์ชันก่อนหน้านี้ละเลย ของจาวาสคริปต์
วัตถุประสงค์ของ "use strict" คือการระบุว่าโค้ดควรถูกเรียกใช้งานใน "โหมดเข้มงวด"
เมื่อใช้โหมดเข้มงวด คุณจะไม่สามารถใช้ตัวแปรที่ไม่ได้ประกาศได้ เช่น
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ "use strict" ยกเว้น Internet Explorer 9 และต่ำกว่า:
| Directive | |||||
|---|---|---|---|---|---|
| "use strict" | 13.0 | 10.0 | 4.0 | 6.0 | 12.1 |
ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคำสั่งนี้โดยสมบูรณ์
คุณสามารถใช้โหมดเข้มงวดในทุกโปรแกรมของคุณ ช่วยให้คุณเขียนโค้ดที่สะอาดยิ่งขึ้น เช่น การป้องกันไม่ให้คุณใช้ตัวแปรที่ไม่ได้ประกาศ
"use strict" เป็นเพียงสตริง ดังนั้น IE 9 จะไม่แสดงข้อผิดพลาดแม้ว่าจะไม่เข้าใจก็ตาม
โหมดเข้มงวดถูกประกาศโดยการเพิ่ม "use strict"; ที่จุดเริ่มต้นของ สคริปต์หรือฟังก์ชัน
ประกาศไว้ตอนต้นของสคริปต์ว่ามีขอบเขตทั่วโลก (โค้ดทั้งหมด ในสคริปต์จะดำเนินการในโหมดเข้มงวด):
"use strict";
x = 3.14; // This will cause an error
because x is not declaredลองด้วยตัวคุณเอง →
<!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>
"use strict";
myFunction();
function myFunction() {
y = 3.14; // This will also cause an error
because y is not declared
}ลองด้วยตัวคุณเอง →
<!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>
ประกาศภายในฟังก์ชัน แต่ก็มีขอบเขตท้องถิ่น (เฉพาะโค้ดภายในฟังก์ชันเท่านั้น) ในโหมดเข้มงวด):
x = 3.14; // This will not cause an error.
myFunction();
function
myFunction() {
"use strict";
y = 3.14; // This will cause an error
}ลองด้วยตัวคุณเอง →
<!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>
ไวยากรณ์สำหรับการประกาศโหมดเข้มงวดได้รับการออกแบบให้เข้ากันได้ JavaScript เวอร์ชันเก่า
รวบรวมตัวอักษรตัวเลข (4 + 5;) หรือตัวอักษรสตริง ("John Doe";) ใน โปรแกรม JavaScript ไม่มีผลข้างเคียง มันเพียงคอมไพล์ไปยังสิ่งที่ไม่มีอยู่ แปรผันและตาย
ดังนั้น "use strict"; สำคัญกับคอมไพเลอร์ใหม่ที่ "เข้าใจ" ความหมายเท่านั้น ของมัน
โหมดเข้มงวดช่วยให้เขียน JavaScript "ปลอดภัย" ได้ง่ายขึ้น
โหมดเข้มงวดเปลี่ยน "ไวยากรณ์ที่ไม่ถูกต้อง" ที่ยอมรับก่อนหน้านี้เป็นข้อผิดพลาดจริง
ตามตัวอย่าง ใน JavaScript ปกติ การพิมพ์ชื่อตัวแปรผิดจะสร้างชื่อตัวแปรใหม่ ตัวแปรทั่วโลก ในโหมดเข้มงวด การดำเนินการนี้จะทำให้เกิดข้อผิดพลาด ทำให้เป็นไปไม่ได้ เพื่อสร้างตัวแปรโกลบอลโดยไม่ตั้งใจ
ใน JavaScript ปกติ นักพัฒนาจะไม่ได้รับการตอบกลับข้อผิดพลาดใดๆ การกำหนดค่าให้กับคุณสมบัติที่ไม่สามารถเขียนได้
ในโหมดเข้มงวด การกำหนดใดๆ ให้กับคุณสมบัติที่ไม่สามารถเขียนได้ getter-only คุณสมบัติ, คุณสมบัติที่ไม่มีอยู่, ตัวแปรที่ไม่มีอยู่จริง หรือสิ่งที่ไม่มีอยู่จริง วัตถุจะเกิดข้อผิดพลาด
ไม่อนุญาตให้ใช้ตัวแปรโดยไม่ประกาศ:
"use strict";
x = 3.14; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
วัตถุก็เป็นตัวแปรเช่นกัน
ไม่อนุญาตให้ใช้วัตถุโดยไม่ต้องประกาศ:
"use strict";
x = {p1:10, p2:20}; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้ลบตัวแปร (หรือวัตถุ)
"use strict";
let x = 3.14;
delete x; // This
will cause an errorลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</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>
ไม่อนุญาตให้ลบฟังก์ชัน
"use strict";
function x(p1, p2) {};
delete x;
// This will cause an error ลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้ทำซ้ำชื่อพารามิเตอร์:
"use strict";
function x(p1, p1) {}; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้ใช้ตัวอักษรตัวเลขฐานแปด:
"use strict";
let x = 010; // This
will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้ใช้อักขระหลีกเลขฐานแปด:
"use strict";
let x = "\010"; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้เขียนไปยังคุณสมบัติแบบอ่านอย่างเดียว:
"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // This
will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้เขียนถึงทรัพย์สินที่ได้รับอย่างเดียว:
"use strict";
const obj = {get x()
{return 0} };
obj.x = 3.14; // This
will cause an errorลองด้วยตัวคุณเอง →
<!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>
ไม่อนุญาตให้ลบคุณสมบัติที่ไม่สามารถลบได้:
"use strict";
delete Object.prototype; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
คำว่า eval ไม่สามารถใช้เป็นตัวแปรได้:
"use strict";
let eval = 3.14; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
คำว่า arguments ไม่สามารถใช้เป็นตัวแปรได้:
"use strict";
let arguments = 3.14; // This will cause an errorลองด้วยตัวคุณเอง →
<!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:
"use strict";
with (Math){x = cos(2)}; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
ด้วยเหตุผลด้านความปลอดภัย ไม่อนุญาตให้สร้าง eval() ตัวแปรที่อยู่ในขอบเขตที่ถูกเรียก
ในโหมดเข้มงวด ตัวแปรจะไม่สามารถใช้งานได้ก่อนที่จะมีการประกาศ:
"use strict";
eval ("x = 2");
alert (x); // This
will cause an errorลองด้วยตัวคุณเอง →
<!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>
ในโหมดเข้มงวด eval() ไม่สามารถประกาศตัวแปรโดยใช้คีย์เวิร์ด var ได้:
"use strict";
eval ("var x = 2");
alert (x); // This
will cause an errorลองด้วยตัวคุณเอง →
<!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() ไม่สามารถประกาศตัวแปรโดยใช้คีย์เวิร์ด Let ได้:
eval ("let x = 2");
alert (x); // This
will cause an errorลองด้วยตัวคุณเอง →
<!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>
คำหลัก this ในฟังก์ชันทำงาน แตกต่างออกไปในโหมดเข้มงวด
คำหลัก this อ้างถึงอ็อบเจ็กต์นั้น เรียกว่าฟังก์ชัน
หากไม่ได้ระบุวัตถุ ฟังก์ชั่นจะทำงานในโหมดเข้มงวด จะกลับมา unknown และทำงานตามปกติ โหมดจะส่งคืนวัตถุส่วนกลาง (หน้าต่าง):
"use strict";
function myFunction() {
alert(this); // will alert "undefined"
}
myFunction(); ลองด้วยตัวคุณเอง →
<!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>
คำหลักที่สงวนไว้สำหรับเวอร์ชัน JavaScript ในอนาคตไม่สามารถใช้เป็นตัวแปรได้ ชื่อในโหมดเข้มงวด
เหล่านี้คือ:
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
"use strict";
let public = 1500; // This will cause an errorลองด้วยตัวคุณเอง →
<!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>
คำสั่ง "use strict" ได้รับการยอมรับเฉพาะที่ จุดเริ่มต้น ของสคริปต์เท่านั้น หรือฟังก์ชัน