Get Started - 3. Digging to the Roots of JS

このシリーズではYou Don't Know JS Yet(第1版「YouDon't Know JS」の改訂版)をまとめた.内容についての質疑応答もネクタイにありますので、参考にしていただければ助かります.内容に間違いや気になるところがあればメッセージを!

Iteration

作成プログラムの最大の原因はデータの処理ですが、データが非常に大きい場合は、完全な処理が困難です.最終的には、データセットを1つずつ処理する必要があります.データセットを処理する方法は反復です.反復に挿入されるデータセットをiterableと呼びます.

doSomething( ...it );
var vals = [ ...it ];

for..ofを使用して、他の言語と同様にiterableを1つずつ処理できます.特に、JSの特殊な文法はSpreadで、iterable(その名の通り)を使用することができます.たとえば、関数に複数のパラメータ(上記のコードなど)を入れる場合、Spreadを使用してiterableをコピーしたり、Spreadを使用してiterableをコピーしたりすることができます.

var buttonNames = new Map();
buttonNames.set(btn1,"Button 1");
buttonNames.set(btn2,"Button 2");

for (let [btn,btnName] of buttonNames) {
  btn.addEventListener("click", function(){
    console.log(`Clicked ${ btnName }`);
  });
}

Iterableには、配列、文字列、マッピングが含まれます.特に、マッピングが反復器で処理されると、keyとvalueを同時に有する新しいエントリとしてデータが処理される.上記のコードでは、buttonNamesはDOM要素btnをキーとし、命名文字列の値のマッピングはfor..ofであり、四角カッコ内にbtnとbtnNameを入れ、エントリ内の値に2つの値を割り当てる.これは「array destructuring」と呼ばれ、主に反復器でよく使われる方法の一つです.

Closure

本の中でこのようにClosureを定義しました
Closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope.
要約すると、スキャン範囲を超えてもいくつかの値が保持されている場合、これらの値を外部から使用できる方法をエンクロージャと呼びます.

function counter(step = 1) {
  var count = 0;
  return function increaseCount(){
    count = count + step;
    return count;
  };
}

var incBy1 = counter();
var incBy3 = counter(3);

incBy1();       // 1
incBy1();       // 2

incBy3();       // 3
incBy3();       // 6

また、モジュールを作成するたびに新しいスキャンが行われます.上記のコードでは同じcounter()関数が使用されており、そのうちのstepが使用として保存されていることも見られる.別の例は、forループによってaddEventListenerに値が配置され、bntNameの値がそれぞれ異なり、コードが動作するかどうかを決定することができるmap反復器である.
私たちはYDNJSY第2巻Scope&Cloosureを通じてScopeのより具体的な内容を学びます.

this Keyword

JSの最新キーワードはthisです.thisが呼び出されるたびに、それらの用途が変化し、コンテンツも変化するのが新しい方法です.ここで、thisのコアは、コードがthisをどのように呼び出すかに依存する.これは実行コンテキストと関係があるが,深く議論するのではなく,thisの原理を簡単に紹介する.

function classroom(teacher) {
  return function study() {
    console.log(
      `${ teacher } says to study ${ this.topic }`
    );
  };
}
var assignment = classroom("Kyle");

assignment();
// Kyle says to study undefined

var homework = {
    topic: "JS",
    assignment: assignment
};

homework.assignment();
// Kyle says to study JS

var otherHomework = {
    topic: "Math"
};

assignment.call(otherHomework);
// Kyle says to study Math

以上のコードはthisを最も理解できるコードのようです.コアはthisの位置ではなく、コードが実行される位置であることに注意してください.classroom()を呼び出して作成されたassignment変数は、study()関数を受信し、thisを含む.このthisは、コード内で同じ位置にありますが、値は実行位置に依存します.デフォルトでは、thisにグローバル変数(ブラウザはwindow、nodejsはglobal)があるため、関連付けられていない場合はこのグローバル変数があります.assignmentが最初に実行されたときには何の関連もないため、windowまたはglobalにはtopicがないため、undefinedが生成される.
ただし、実行時に次の2つの例に関連付けられている場合、thisが変更され、homeworkではhomework.assignment()が実行されている場合の前のhomeworkが関連付けられているため、thisがhomeworkに割り当てられる.だからJSを出力します.別の関連付け方法は、call()を使用することである.関数パラメータにthisに関連付けるオブジェクトを配置すると、otherHomeworkは、以下に示すようにthisに割り当てられます.

Prototypes

thisが関数のプロパティである場合、オブジェクトの最も代表的なプロパティはPrototypeです.Prototypeは、オブジェクト間の関係を接続するプロパティです.デフォルトでは、すべてのオブジェクトがobject.prototypeをPrototypeとして使用します.新しいプロトタイプを接続したい場合は、Object.create()で関係を確立できます.

var homework = {
    topic: "JS"
};

var otherHomework = Object.create(homework);

otherHomework.topic;   // "JS"

otherHomework.topic = "Math";
otherHomework.topic;   // "Math"

homework.topic;        // "JS"

上記のコードおよび写真では、otherHomeworkはhomeworkによって作成され、写真と同じPrototype関係を有する.otherHomeworkの値を変更した場合、homeworkの値は変更されません.これは直接参照関係ではなく「Prototype」です.