クラスでは、2種類のインスタンスメソッドの定義方法があります。 class構文を使ったインスタンス間で共有されるプロトタイプメソッドの定義と、 インスタンスオブジェクトに対するメソッドの定義です。 これらの2つの方法を同時に使い、1つのクラスに同じ名…

インスタンスメソッドは、クラスをインスタンス化して利用します。 一方、クラスをインスタンス化せずに利用できる静的メソッド（クラスメソッド）もあります。 静的メソッドの定義方法はメソッド名の前に、staticをつけるだけです。 静的メソッドはクラスメ…

復習 getterは"インスタンス.プロパティ名"とする事でプロパティを参照した時に実行されます。getterは値を返すものです。 setterは"インスタンス.プロパティ名 = 値"とする事で値を代入した時に、値が仮引数となって実行されます。 Array#lengthをアクセッ…

クラスのアクセッサプロパティの定義 クラスに対してメソッドを定義できますが、メソッドはメソッド名()のように呼び出す必要があります。 クラスでは、プロパティの参照（getter）、プロパティへの代入（setter）時に呼び出される特殊なメソッドを定義でき…

クラスのインスタンスに対してメソッドを定義する 前回はプロトタイプメソッドにメソッドを定義したケースを学習しましたが、 今回はインスタンスオブジェクトにメソッドを定義した場合についてまとめていきます。 下のコード例ではCounterクラスのコンスト…

クラスの動作はメソッドによって定義できます。 class構文ではクラスに対して自由にメソッドを定義できます。 このクラスに定義したメソッドは作成したインスタンスが持つ動作となります。 メソッドでクラスのインスタンスを参照するには、thisを使います。 …

前提知識 new演算子 開発者はユーザー定義のオブジェクト型やコンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを作成することができます。 (MDNリファレンス) クラスのインスタンス化の流れ classキーワードでclass宣言文を定義 宣言したclass…

クラス クラスの前提・・・動作や状態を定義した構造 クラスからはインスタンスと呼ばれるオブジェクトを作成でき、インスタンスはクラスに定義した動作を継承し、状態は動作によって変化します。 class構文 ES2015でクラスを表現するためのclass構文が導入…

コールバック関数はcallback()のようにただの関数として呼び出されます。 つまり、コールバック関数として呼び出すとき、この関数にはベースオブジェクトはありません。 そのためcallback関数のthisはundefinedとなります。 // `callback`関数を受け取り呼び…

Arrow Functionとthis Arrow Functionで定義された関数やメソッドにおけるthisがどの値を参照するかは定義時（静的）に決まります。 一方、Arrow Functionではないfunctionキーワードの関数においては、thisは呼び出し元に依存するため関数の実行時（動的）…

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて２つの問題があります。 問題1: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、２つ目の問題に触れてい…

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて２つの問題があります。 問題１: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、１つ目の問題に触れてい…

関数宣言や関数式におけるthis 関数宣言・・・fuction yano () {} 関数式・・・ const yano = function() {} 関数宣言や関数式ではベースオブジェクトがないためthisはundefinedとなります。 関数の中に関数を定義して呼び出す場合も同じです。 strict mode…

基本的にはメソッドの中で利用しますが、thisは読み取り専用のグローバル変数のようなものでどこにでも書けます。 thisの参照先は主に次の条件によって変化します。 実行コンテキストにおけるthis コンストラクタにおけるthis 関数とメソッドにおけるthis Ar…

クロージャーについての理解が曖昧だったのでJS primer以外の記事も読んでみました。 function User(){ // private member let name = "Jason"; // public member this.getName = function(){ return name; }; } let user01 = new User(); // 直接プライベー…

静的スコープ: ある変数がどの値を参照するかは静的に決まる メモリ管理の仕組み: 参照されなくなったデータはガベージコレクションにより解放されます。 クロージャーとはこの２つの仕組みを利用して、関数内から特定の変数を参照し続けることで関数が状態…

クロージャー クロージャーとは「外側のスコープにある変数への参照を保持できる」という関数が持つ性質を指します。 ほぼ全ての関数はクロージャーとも言えます。厳密にいうと、特定の変数を参照することで関数が状態を持っていることをそう呼びます。 ガベ…

const, let , var再復習 const 値の再代入も同じ変数名での再定義もできません。 let 値の再代入はできるが、同じ変数名での再定義はできません。 var 値の再代入も、同じ変数名での再定義もできます。 しかし、値が簡単に書き換え可能なので、ほとんど使用…

[コラム]変数を参照できる範囲を小さくする 変数のスコープとは、その変数が参照できる範囲のことです。 スコープには、大きく分けて以下の2種類があります。 グローバルスコープ → ページ全体でどこからでも参照できます。 ローカルスコープ → ページ内の部…

この章では関数とスコープの関係を中心に、スコープとはどのような働きをしていて、スコープ内では変数の名前から取得する値がどのように決まるかを見ていきます。 スコープとは スコープとは変数や関数の引数などを参照できる範囲を決めるものです。 functi…

JavaScriptでは、プリミティブ型の値に対してプロパティアクセスするとき、自動で対応するラッパーオブジェクトに変換されます。 const str = "string"; // プリミティブ型の値に対してメソッド呼び出しを行う str.toUpperCase(); // `str`へアクセスする際…

undefined と null を除いたものに対してはそれぞれラッパーオブジェクトが用意されています。 ラッパーオブジェクト プリミティブ型 例 Boolean 真偽値 trueやfalse Number 数値 1や2 String 文字列 "文字列" Symbol シンボル Symbol("説明") プリミティブ…

CodePointごとに扱うもの CodePointを名前に含むメソッド u（Unicode）フラグが有効化されている正規表現 文字列のIteratorを扱うもの（Destructuring、for...of、Array.fromメソッドなど） 正規表現の.とUnicode uフラグをつけた正規表現は、文字列をCode P…

Code PointとCode Unitの違い インデックス 0 1 2 3 4 文字列 リ ン ゴ UnicodeのCode Point(16進数) 0x30ea 0x30f3 0x30b4 0x1134e UTF-16のCode Unit(16進数) 0x30ea 0x30f3 0x30b4 0xd83c 0xdf4e Code Unitは絵文字を表すのに１つのIDでは表現しきれない…

UnicodeとCode Unit Unicodeはすべての文字に対してID（Code Point）を振ることを目的に作成されている仕様です。 Unicodeでは1文字を表すのに使う最小限のビットの組み合わせをCode Unit（符号単位）と呼ぶ。 Unicode は仕様 Code Unitは一文字を表している…

String.rawメソッド String.raw()は、テンプレートリテラル構文から、文字列を取得するメソッドです。 この関数は、テンプレート文字列の生の文字列形式を取得するために使用されます。つまり、置換 (例えば ${foo}) は行われますが、エスケープ (例えば \n)…

タグ関数 関数の引数に()で囲ってテンプレートリテラルを渡すとただの文字列として出力されます。 書き方 関数 `テンプレートリテラル` ←このように()はつけずに呼び出します。 タグ関数を利用することで呼び出し時に渡される引数が特殊な形になります。 第…

文字列の組み立て URLのような構造的な文字列の組み立てを行う場合は 文字列結合演算子（+）で単純に結合するよりも専用の関数を用意するほうが安全です。 問題の例は以下です。 function getResource(baseURL, pathname) { const url = baseURL + pathname;…

文字列の置き換えと削除 delete演算子は文字列に対して利用できません。文字列はプリミティブ型であるからです。 "use strict"; const str = "文字列"; // 文字列の0番目の削除を試みるがStrict modeでは例外が発生します。 delete str[0]; // => TypeError:…

[コラム]RegExp#execメソッド String#matchAllメソッドは、ES2020で導入されたメソッドです。 それまでは、RegExp#execメソッドというString#matchメソッドによく似た挙動をするメソッドを利用して、String#matchAllメソッド相当の表現を実装していました。 …