#はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
#目的
- モジュールについての理解を深める
#本題
###1.Strictモード
Strictモードとは、通常JavaScriptで使用できる（許容されている）一部の書き方を制限する
なぜ制限するのかというと主な目的は以下の三つ
- 意図しないバグの混入の防止
- 予約後の確保
- コードのセキュア化
大規模開発に対応できるようにしている
Strictモードを有効化するにはファイルの先頭,もしくは関数内の先頭行に**"use strict"**と記述する
####例1
main.js
a = 0;
console.log(a);
上記の場合ではそのまま0が出力されるが
main.js
"use strict"
a = 0;
// ReferenceErrorとなる
console.log(a);
関数も同様
main.js
a = 0;
console.log(a);
function fn() {
"use strict"
b = 1
console.log(b);
}
fn();
// この場合、bのみエラーとなる
従来のJSでは、エラーとならなかったものをエラーとすることで、バグが発生しにくいように制限を加えている
####例2
予約後の確保の例
将来JSのアップグレードがあった際に変数として使えない単語がある
main.js
function fn() {
"use strict"
// b = 1
// Uncaught SyntaxError: Unexpected strict mode reserved wordと表示され使用不可
const implements, interface, packages
}
fn();
// console.log(b);
####例3
セキュアなコードについて
main.js
function fn() {
// このthisはWindowオブジェクトをさす
return this;
}
console.log(fn());
これをstrictモードにすると
main.js
function fn() {
"use strict"
return this;
}
// undefinedと出力
console.log(fn());
####例4
通常の場合、thisはオブジェクトへの参照を取ることになるが,
Strictモードではプリミティブ型も取ることができる
main.js
function fn() {
"use strict"
return this;
}
// callでthisの値を変更
console.log(fn.call(2));
// 2と出力される
// Strictモードを外すとNumber {2}とオブジェクトでラップされたプリミティブ型の値が帰ってくる
// 文字列も同様
console.log(fn.call("2"));
// 2と帰ってくる
###2.Strictモードとクラス
Classのコンストラクターやメソッド内は自動的にstrictモードがオンになっている
####例1
main.js
// 下記は両方ともundefinedと出力される
// コンストラクターもメソッドも内部で宣言した関数内のthisが表示されない
class C {
constructor() {
function fn() {
console.log(this)
}
fn();
}
method() {
function fn() {
console.log(this)
}
fn();
}
}
const c = new C();
c.method();
今日はここまで！
#参考にさせて頂いた記事