JavaScriptでのスコープ、コンテキスト、オブジェクト参照、インスタンス化の概要
この記事では、JavaScriptのトリッキーな概念について説明します。これらの概念は、開発の過程のどこにいるかによって、非常に混乱する可能性があります。 つまり、JavaScriptでのオブジェクト参照、スコープ、コンテキスト、およびインスタンス化について説明します。 これは、JavaScriptでは奇妙に見える可能性のあるいくつかの動作を理解するのに役立つはずです。
まず、要点を説明する例：
[] === [] // false
うわー、空の配列が起こったことは空の配列と同じではありません。 JavaScript、あなたはどれほど混乱することができますか？
オブジェクトリファレンス
オブジェクト参照の概念は非常に扱いにくい場合があります。たとえば、object1とobject2が同じであるかどうかを確認してみましょう。
let object1 = { value:10 };
let object2 = object1;
let object3 = { value: 10};
object1 === object2 //true
object1とobject2の両方が、メモリ内にある同じ参照データを指しているため、真になります。 object1とobject3が同じであるかどうかを確認する場合：
object1 === object3 // false
面白い！ どちらも同じ値ですが、なぜ同じではないのですか。 これは、object3がメモリ内に別の参照を作成するためです。これはobject1と同じではないため、JavaScriptは両方のオブジェクトを異なるものとして扱います。
さらに説明すると、object1がメモリ内のアドレスとして作成され、object2が同じアドレスのobject1を指していると想像してください。 object3はメモリ内の別のアドレスです。 object1アドレスをobject3アドレスと同じにすることはできません。
配列リファレンス
次の最初の例に戻ります。
[] === [] // false
Javascriptでは、配列は実際には舞台裏のオブジェクトであるため、JavaScriptは最初の[]を新しいオブジェクトとして扱い、参照をメモリに保存してから、2番目の[]を別の参照としてメモリに保存します。同等性をチェックすると、同じにすることはできません。
スコープとコンテキスト
コンテキストは常にスコープと混同されます。 中括弧が検出されると、スコープは常に作成されます。 たとえば、関数を作成すると、新しいスコープが作成されます。
function sampleScope() {
let a = 'a';
console.log(a);
}
sampleScope関数の外部から変数aを参照する場合、変数はsampleScope関数スコープ内で定義されているため、認識されません。
コンテクスト
コンテキストはスコープとは異なり、現在参照している現在のオブジェクトを示します。 コンテキストには、thisキーワードを使用してアクセスします。 たとえば、ブラウザのコンソールから現在のコンテキストをログに記録すると、次のようになります。
console.log(this);
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
これは、現在windowオブジェクトにいることを示しています。 thisは、現在のオブジェクトまたはコンテキストを指すJavascriptの特別なキーワードです。
this.alert('hello');
window.alert('hello);
thisキーワードはwindowオブジェクトを参照しているため、上記の2行は基本的に同じです。これは、現在のコンテキストであるためです。
次のような新しいオブジェクトを作成する場合：
const object4 = {
a: function() {
console.log(this);
}
}
object4.a();
// {a: ƒ}
object4コンテキストである現在のコンテキストからログアウトしていることがわかります。
インスタンス化
教室にいた生徒の名前と性別を追跡したいとします。そのため、次のようなクラスをモデル化します。
class Student {
constructor(name, gender){
console.log(this);
this.name = name;
this.gender = gender;
}
introduceStudent() {
console.log(`${this.name}, ${this.gender}`);
}
}
nameとgenderを受け入れるクラスが作成されており、生徒の名前をログに記録する関数にもアクセスできます。
ここで、同じコードをコピーして追加情報を追加せずにクラス代表を作成したいとします。次のように、クラス代表の新しいクラスを作成しながら、Studentクラスを拡張できます。
class Rep extends Student{
constructor(name, gender){
super(name, gender);
}
introduceClassRep() {
console.log(`${this.name}, ${this.gender}, and I'm a class rep`);
}
}
extendsキーワードは、クラスが拡張するプロパティを現在のクラスに追加するようにJavaScriptに指示します。 クラスを拡張するときはいつでも、そのコンストラクターメソッドを呼び出す必要があります。superは、まさにそれを実行する力を与えてくれます。
次に、両方のクラスのインスタンスを作成しましょう。
const student1 = new Student('jane', 'female');
const student2 = new Rep('cole', 'male');
これらの新しいインスタンスを作成すると、2つのコンソール出力が異なることがわかります。 それは単に、それらが異なるクラスのインスタンスであるためです。
結論
JavaScriptを使用すると、オブジェクトの動作は最初は非常に複雑に見えるかもしれませんが、下線の概念を理解すると、多くの力が得られ、下線の単純さが明らかになります。
オブジェクト参照、コンテキスト、スコープ、インスタンスがJavaScriptでどのように機能するかを確認し、それらの使用方法を示しました。 うまくいけば、これらのより高度な概念をよりよく理解できるようになります。 🏋
