この記事では、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);
}
変数を参照する場合 a 外から sampleScope 関数は、変数が内部で定義されているため、認識されません。 sampleScope 関数スコープ。
コンテクスト
コンテキストはスコープとは異なり、現在参照している現在のオブジェクトを示します。 コンテキストには、thisキーワードを使用してアクセスします。 たとえば、ブラウザのコンソールから現在のコンテキストをログに記録すると、次のようになります。
console.log(this);
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
それは私たちが現在 window オブジェクト。 The this 現在のオブジェクトまたはコンテキストを指すJavascriptの特別なキーワードです。
this.alert('hello');
window.alert('hello);
上記の2行は、基本的に同じものです。 this キーワードは window それが現在のコンテキストであるため、オブジェクト。
次のような新しいオブジェクトを作成する場合：
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`);
}
}
The extends キーワードは、クラスが拡張するプロパティを現在のクラスに追加するようにJavaScriptに指示します。 クラスを拡張するときはいつでも、そのコンストラクターメソッドを呼び出す必要があります。 super それを行う力を私たちに与えてくれます。
次に、両方のクラスのインスタンスを作成しましょう。
const student1 = new Student('jane', 'female');
const student2 = new Rep('cole', 'male');
これらの新しいインスタンスを作成すると、2つのコンソール出力が異なることがわかります。 それは単に、それらが異なるクラスのインスタンスであるためです。
結論
JavaScriptを使用すると、オブジェクトの動作は最初は非常に複雑に見えるかもしれませんが、下線の概念を理解すると、多くの力が得られ、下線の単純さが明らかになります。
オブジェクト参照、コンテキスト、スコープ、インスタンスがJavaScriptでどのように機能するかを確認し、それらの使用方法を示しました。 うまくいけば、これらのより高度な概念をよりよく理解できるようになります。 🏋
