3

アロー関数はレキシカルにthisを束縛するのではないのですか?
発端は以下のようなメソッドをアロー関数で定義しようとしたことに始まります。

const person = {
    name: 'Bob',
    hello: function (greeting) {
        console.log(greeting + ' ' + this.name);
        return greeting + ' ' + this.name;
    },
    hello1s: () => {
        console.log(this);
        setTimeout(()=>{this.hello('hello');}, 1000);  
    }
}

person.hello1s();

結果

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
main.js:9 Uncaught TypeError: this.hello is not a function
    at main.js:9:30

オブジェクトに定義するプロパティやメソッドは、スコープがオブジェクト内部だから、レキシカルスコープの中に、personオブジェクトがあり、アロー関数のthisはそこで宣言された時点でスコープチェーンを辿って、personオブジェクトに束縛されるのではないのか?という考えです。

色々調べながら出来てきた勝手な解釈として以下が得られています。合っていますでしょうか?

アロー関数は語彙的に束縛(レキシカルにバインド)するんだけども、
メソッドとして使用した際には、宣言時オブジェクトに未だバインドされていない。
従って、アロー関数が携えるthisのスコープはグローバルスコープとなる。

そもそも、スコープの種類として、以下が今のところ調べたところ挙げられますが、オブジェクトを作成する際のスコープというものがいまいち曖昧になっています。
従って、宣言時のレキシカルの理解がずれていると感じています。

  • グローバルスコープ
  • スクリプトスコープ
  • 関数スコープ
  • ブロックスコープ

逆にいうと、通常の関数は宣言時ではなく実行・呼び出し時にオブジェクトにバインドするという特別な性質を持っているという認識になっています。

これはどこまで正しく、どのように間違っているでしょうか?
以上、宜しくお願い致します。

12
  • MDN のドキュメント「アロー関数」によると "アロー関数では、this はそれを囲む構文上のコンテキストの this の値が設定されます" ということで、this には person オブジェクトが設定されたということでは?
    – WebSurfer
    Commented 2月8日 15:18
  • 上のコメントは間違ってました。質問者さんのコードをそのままコピペして試してみましたが、hello1s のアロー関数内の this は window になりました。取り急ぎ訂正します。
    – WebSurfer
    Commented 2月9日 1:38
  • @WebSurfer 冒頭コメントを拝見し、釈明しようとしていました。 続けてコメントを頂き、ありがとうございます。 Commented 2月9日 11:26
  • MDN のドキュメントアロー関数式の「メソッドとしては使用不可」のセクションに "アロー関数式は自分自身で this を持たないので、メソッドではない関数にのみ使用してください。メソッドとして使用しようとするとどうなるか見てみましょう" と書いてある通りの結果でした。
    – WebSurfer
    Commented 2月9日 13:30
  • 別の MDN ドキュメント this の「アロー関数」のセクションによると "アロー関数では、this はそれを囲む構文上のコンテキストの this の値が設定されます" とのことです。それで何故 this が window になるかですが、質問者さんのコードの person.hello1s(); の場所では this が windows になるからでしょう。
    – WebSurfer
    Commented 2月9日 13:35

7 件の回答 7

4

短い回答

=>のすぐ外側の{}はオブジェクトリテラルです。オブジェクトリテラルはスコープを作成しないため、=>のスコープはトップレベルのスコープです。よって、=>内部のthisはトップレベルでのthisになります。thisが外側のスコープと異なる値になるスコープを作成するのは、次のパターンだけです。

※上記はMDNでの表現を用いているため、下記の仕様書での表現や対応が一部異なります。

長い回答

※ 長くて複雑なため、JavaScriptの仕様がどのようになっているのか興味がある人だけ読んでください。

この回答はECMAScript 2024に準拠しています。異なるバージョンや実装によって細部が異なる場合があります。基本的には厳格モード(strict mode)についてのみ解説し、特に言及していない場合は厳格モードを前提とします。非厳格モード(non-strict mode)での動作については詳しい解説は行いません。

仕様書では言語処理でのみで使用されるいくつか特殊な概念があります。これらは言語処理の内部のみでのみ使用され、スクリプトのコード上では直接使用することができません。実装上も存在せず、同じ動作をするようエミュレートしている場合もあります。以下はその解説です。

  • 抽象操作(abstract operation) ... 関数のような処理のまとまりです。抽象処理名()と表記します。
  • 内部メソッド(internal method) ... オブジェクトに対して内部でのみ呼ばれるメソッドです。[[メソッド名]]と表記します。
  • 内部スロット(internal slot) ... オブジェクトの内部状態を表すプロパティのようなものです。プロパティとは違いプロトタイプチェーンで遡ることができません。[[スロット名]]と表記します。
  • レコード(record) ... オブジェクトのように名前と値の組(フィールド)とメソッド(抽象メソッド)をもつ内部でのみ使われるデータ構造です。
  • フィールド(field) ... レコードに保存されている名前と値の組です。[[フィールド名]]と表記します。
  • 抽象メソッド(abstract method) ... レコードに対するメソッドのようもので、呼び出すことで抽象的な処理を行うことができます。メソッド名()と表記します。

「アロー関数(arrow function)ではthisが文脈的(lexical)に束縛(bind)される」とは一体何かと言うことを理解するために、実際にthisがどのように評価(evaluation)されるのかを見ていきます。

よく「スコープ」という言葉を使われていますが、仕様上は環境レコード(Environment Record)と呼ばれるレコードです。環境レコードの移り変わりや外側からの継承がスコープの範囲やクロージャーを実現しています。環境レコードは5種類あります。

  • 宣言的環境レコード(Declarative Environment Record) ... ブロックの環境レコード。
  • 関数環境レコード(Function Environment Record) ... 関数内部の環境レコード。
  • モジュール環境レコード(Module Environment Record) ... モジュールのトップレベルの環境レコード。その外側にはグローバル環境レコードになります。
  • オブジェクト環境レコード(Object Environment Record) ... with構文で作成される環境レコード。with構文は非厳格モードでのみ使用可能であるため、厳格モードでは現れません。
  • グローバル環境レコード(Global Environment Record) ... モジュールではない場合のトップレベルの環境レコード。全ての環境スコープの一番外側になります。

これらの環境レコードはthisに関する二つの抽象メソッドを持っています。

  • HasThisBinding() ... 環境レコードがthisを束縛している場合は真(true)を返し、そうで無い場合は偽(false)を返します。
  • GetThisBinding() ... その環境レコードが束縛しているthisを返します。(HasThisBinding()抽象メソッドが真になる環境レコードでのみ実装されています)

それでは実際の処理を見ていきましょう。thisが評価されるとき、ResolveThisBinding()抽象操作が呼び出されます。ResolveThisBinding()抽象操作は次のような処理です。

  1. GetThisEnvironment()抽象操作を呼び出し、環境レコードを得ます。
  2. 1.で得た環境レコードに対してGetThisBinding()抽象メソッドを呼び出し、得られた値を返します。

GetThisEnvironment()抽象操作は次のような処理です。

  1. 実行中の実行文脈(running execution context)の文脈的環境(LexicalEnvironment)を取得します。これは実行している場所の環境レコードのことです。
  2. 取得した環境レコードに対してHasThisBinding()抽象メソッドを呼び出し、真偽値を得ます。
  3. 2.の結果が真の場合は、その環境レコードを返します。
  4. そうでは無い場合は、その環境レコードの[[OuterEnv]]フィールドを得て、それを新たな環境レコードとして2.に戻ります。

環境レコードの[[OuterEnv]]フィールドは外側の環境レコードが入っています。一番外側はグローバル環境レコードであり、グローバル環境レコードの[[OuterEnv]]フィールドはnullです。しかし、グローバル環境レコードのHasThisBinding()抽象メソッドは必ず真を返すため、繰り返しはどんなに長くてもグローバル環境レコードを返して終了します。

つまり、thisが評価されるときに何になるのかというのは、現在実行中の環境レコードから外側に向かってHasThisBinding()抽象メソッドが真になる環境レコードを探し、その環境レコードに対してGetThisBinding()抽象メソッドを呼び出した結果となります。それぞれの環境レコードでは抽象メソッドに対して次のような値を返します。([[名前]]はフィールド)

環境レコード HasThisBinding() GetThisBinding()
宣言的環境レコード fales N/A
関数環境レコード [[ThisBindingStatus]]!=LEXICAL [[ThisValue]]
モジュール環境レコード true undefined
オブジェクト環境レコード false N/A
グローバル環境レコード true [[GlobalThisValue]]

[[GlobalThisValue]]フィールドは実装が定めたグローバルスコープにおけるthisです。グローバルオブジェクトだったり空のオブジェクト{}だったりします。[[ThisValue]]フィールドにはメソッド呼び出し時のレシーバーが入ったりするのですが、この回答では詳しく解説しません。

この表を見るとわかるように、コードのトップレベルであるモジュール環境レコードとグローバル環境レコードを除いて、thisが外側と異なるのは関数環境レコードの時だけになります。その関数環境レコードの"[[ThisBindingStatus]]!=LEXICAL"の意味は、[[ThisBindingStatus]]がLEXICAL異なれば真に、同じならば偽になると言うことです。ここにアロー関数特有の仕様が関わってきます。

関数環境レコードが作成されるのは関数(funciton)を引数とするNewFunctionEnvironment()抽象操作を呼び出した時で、これは、関数の[[Call]]内部メソッドまたは[[Consturct]]内部メソッドの処理でのみ使われます。この二つは、通常の関数呼び出しとnew等を用いたコンストラクターによるオブジェクト作成で呼び出されるメソッドです。そして、呼び出されるときの関数によって環境レコードのフィールドが次のように設定されます。

  • [[ThisBindingStatus]]: 関数の[[ThisMode]]内部スロットがLEXICALの場合、LEXIACLになります。そうで無い場合は、UNINITIALIZEDにセットされ、後に[[ThisVlaue]]フィールドが設定されるときにINITIALIZEDに変更されます。
  • [[OuterEnv]]: 関数の[[Envirnoment]]内部スロットがセットされます。

関数の[[ThisMode]]内部スロットと[[Envirnoment]]内部スロットは関数そのものが作成されるときに設定されます。関数はOrdinaryFunctionCreate()抽象操作で作成され、このときのthisMode引数(LEXICAL-THISまたはNON-LEXIACL-THISのいずれか)によって[[ThisMode]]内部スロットは変わります。

  • thisMode引数がLEXICAL-THISの場合は、[[ThisMode]]内部スロットはLEXICAL
  • そうでは無く、関数が厳格モードの場合は、[[ThisMode]]内部スロットはSTRICT
  • そうでは無い場合は、[[ThisMode]]内部スロットはGLOBAL

非厳格モードの場合のみ設定されるGLOBALについてはここでは細かく説明しませんが、thisModeがLEXICAL-THISになるかどうかが重要になります。対して、[[Environment]]内部スロットはenv引数がそのままセットされます。OrdinaryFunctionCreate()抽象操作が呼びされる時にthisModeに何を設定するかは決まっており、以下のようになります。

  • thisMode引数がNON-LEXICAL-THIS
    • 関数宣言(FunctionDeclaration)
    • 関数式(FunctionExpression)
    • ジェネレーター宣言(GeneratorDeclaration)
    • ジェネレーター式(GeneratiorExpression)
    • 非同期関数宣言(AsyncFunctionDeclaraino)
    • 非同期関数式(AsyncFunctionExpression)
    • 非同期ジェネレーター宣言(AsyncGeneratorDeclaration)
    • 非同期ジェネレーター式(AsyncGeneratorExpression)
    • メソッド定義(MethodDefinition)
    • フィールド定義(FieldDefiniion)の初期化子(Initializer)
    • クラス静的ブロック(ClassStaticBlock)
    • CreateDynamicFunction()抽象操作 ... new Funciton()等で呼びされます。
  • thisMode引数がLEXICAL-THIS
    • アロー関数(ArrowFunciton)
    • 非同期アロー関数(AsyncArrowFunction)

env引数はいずれの場合でも抽象処理の実行中の実行文脈の環境レコードになります。

上記からわかるように、アロー関数と非同期アロー関数のみが例外的にLEXICAL-THISになるため、関数の[[ThisMode]]内部スロットもLEXICALになり、アロー関数が実行されるときに作成される環境レコードの[[ThisBindingStatus]]もLEXICALになります。よって、このアロー関数内でthisを評価する場合、環境レコードのHasThisBinding()仮想メソッドがfalesを返すため、その外側を探しに行くようになります。これが「アロー関数及び非同期アロー関数ではthisは束縛されない」という動作がどのような処理なのかの説明です。thisを束縛するのは外側の環境レコードになるため、表現としての正確性は欠けますが、「アロー関数ではthisが文脈的に束縛される」とも言えることになります。


ひとまず、最初の文に戻ったのですが、補足が二つあります。

まず、関数の[[Environment]]内部スロットに入る環境レコードが「関数が作成された時の環境レコード」であるということです。よく「文脈的(LEXICAL)」という表現を使いますが、これは構文解釈時に静的に決まるという意味ではありません。関数に環境レコードが設定されるタイミングは動的です。なので、関数の中で関数を生成するような場合は、関数が実行されたときの環境レコードが[[Envirnomen]]内部スロットに入り、内部の関数が実行時の環境レコードの外側がその時の環境レコードになります。言ってしまえばクロージャーの仕組みそのものでもあるのですが、作成される時の環境レコードが何になるのかと言うことを理解しているとより深く理解できるかと思います。

もう一つが、関数が作成されるパターンで、フィールド定義の初期化子とクラス静的ブロックが含まれるということです。クラス宣言やクラス式そのものでは環境レコードを作成されません。砕けた表現をすると、クラス宣言やクラス式はスコープを作りません。しかし、その中のメソッド定義では関数が作成され、実行時に関数環境レコードが作成されます。同様に、フィールド定義の初期化子とクラス静的ブロックも、内部でのみ使用される専用の関数が作成され、実行時に関数環境レコードが作成されます。そして、これらの関数の[[ThisMode]]フィールドはSTRICT(クラスは必ず厳格モードのため)ですので、thisが束縛されます。static無しの場合はそのクラスのインスタンス、static有りの場合はクラス(であるコンストラクター関数)そのものです。特にフィールド定義の初期化子は、{}で囲まれたブロック風でなく、ただの「式」であるため、クラス構文の環境?(そんなものは存在しない)で実行されるように見えますが、実際は初期化子毎に関数が作成され、インスタンスやクラスの生成時(コンストラクター呼び出し時)に実行されます。

4
  • 色々各方面でご解説頂いている説明方法を勘案して理解に漕ぎつきたいのですが、中々出来ず、蟻の一穴が空いたかのように理解が零れ落ちてゲシュタルトが崩壊していっていました。原理的な説明を行って頂いていることをお察しいたします。 暫く、精査させてください。この度は詳解頂きまして、誠にありがとうございます。 Commented 2月12日 11:23
  • JavaScript文法 インスタンスはprototypeを持っているんですか?持っていないんですか?こちらのポストでも大変お世話になりました。またとない機会を度々頂きまして、ご教示頂き、誠にありがとうございます。引き続き何卒宜しくお願い致します。 Commented 2月12日 11:27
  • @raccyさん、この度は詳細ご解説頂きまして、誠にありがとうございました。私の方で、"長い回答"につきまして、OP-Answerとして図解と纏めを作成させて頂きましたので、ご査収いただけますと、非常に幸いです。以上、宜しくお願い致します。 フィールド定義の初期化子とクラス静的ブロックにつきましては、未習の為、今後の研鑽に活かしていきます。ご指導いただきまして、ありがとうございます。 Commented 2月17日 6:01
  • 「オブジェクトリテラルはスコープを作成しないため」とのことですが、ブロックスコープが出来ているのにな、と勘違いしていました。この辺が明確になりました。ご教示頂きまして、ありがとうございます。 Commented 2月24日 5:14
1

挙動としては以下と似ています

b={};
b.x=0;
b.y=function (){return 0;}
b.a=()=>{return this.y();}
console.log(b.a());
b.a=()=>{return this.y();}
                     ^

TypeError: this.y is not a function

ここで、b.a=()=>{return this.y();}を以下のように変えます

b={};
b.x=0;
b.y=function (){return 0;}
b.a=function(){return this.y();}
console.log(b.a());
0

件のコードも同じようにfunctionに変えます


const person = {
    name: 'Bob',
    hello: function(greeting) {
        console.log(greeting + ' ' + this.name);
        return greeting + ' ' + this.name;
    },
    hello1s: function(){
        console.log(this);
        setTimeout(()=>{this.hello('hello');}, 1000);  
    }
}

person.hello1s()

{ name: 'Bob', hello: [Function: hello], hello1s: [Function: hello1s] }
0
hello Bob

結果が一致しました

普段あまり意識はしませんが、アロー関数は関数という”値”です
一方でfunctionは関数という”型”です
JavaScriptではこのような型定義も変数で束縛することができます
例えばclassも代入できます

const cls=class Class{}

personに匿名オブジェクトを代入した時点では内部にどんなメンバが定義されるか分かりません
関数型はメタデータの一種なのでコードの実行時に解釈できますが、アロー関数は値なので実行中に動的に生成されます
その時点でオブジェクト自身を指すthisはメンバを一つずつ生成している最中なのでまだ存在しないアロー関数を認識できないのでしょう

と想像しました
正直正確な設計は分かりません

17
  • ここまで書いてて思いましたが、thisにhello関数を実装すれば動くのでは?と思い試してみました。以下のようにすれば可能ですね
    – Rookie
    Commented 2月9日 4:26
  • const person = { name: 'Bob', hello: function(greeting) { console.log(greeting + ' ' + this.name); return greeting + ' ' + this.name; }, hello1s: ()=>{ console.log(this); this.hello=message=>{console.log(message)}; setTimeout(()=>{this.hello('hello');}, 1000); } }
    – Rookie
    Commented 2月9日 4:27
  • 上記のソースコードを参考に次のようにしました。 const person = { name: 'Bob', hello: function(greeting) { console.log(greeting + ' ' + this.name); return greeting + ' ' + this.name; }, hello1s: ()=>{ console.log(this); this.hello=message=>{console.log(message)}; this.name = 'Bob'; setTimeout(()=>{this.hello('hello ' + this.name);}, 1000); } } person.hello1s(); 結局オブジェクトの中でグローバルオブジェクトに、関数helloと変数nameを作成し、尚且つそれをオブジェクトの中で呼び出すという処理になっているようです。 Commented 2月9日 11:40
  • 投稿を読ませて頂きましたが、javascriptでは、関数という値としてのアロー関数と、関数と言う型のfunctionがあるということで、調べたことのない発見がありました。ありがとうございます。C言語のキャストのような効果があるのかと感じました。 Commented 2月9日 11:42
  • thisについては詰まるところ、functionでは暗黙の引数となり、アロー関数では単なる変数として広域スコープを指すということでしょうね。実際クラスの中だとメソッドでは引数として働き、アロー関数ではクラススコープを指す変数として機能します。(クラスのアロー関数からthisを返すと名前付きオブジェクトがクラススコープのコピーとして新規に生成されるので注意が必要です)
    – Rookie
    Commented 2月9日 13:43
1

質問に対するコメントで「後で検証した結果をまとめて回答欄に書いておきます」と書きましたが、それを以下に書きます。

検証に使ったコードは以下の通りです。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <button type="button" id="button1">button</button>
</body>
<script>
    // this
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this

    // グローバルコンテキストでオブジェクトを定義
    const Person = {
        name: "Person",
        f1: function () { console.log(this); },
        f2: () => { console.log(this); }
    }

    Person.f1();    // Object -------- (1)
    Person.f2();    // Window -------- (2)

    // (1) オブジェクトのメソッド:
    // オブジェクトのメソッドとして呼び出されるとき、その this には
    // メソッドが呼び出されたオブジェクトが設定されます。

    // (2) アロー関数:
    // アロー関数では、this はそれを囲む構文上のコンテキストの this の値が
    // 設定されます。グローバルコードでは、グローバルオブジェクトが設定さ
    // れます。

    // どのコンテキストで Person.f2() を起動しようと上の Person定義で
    // this に設定された globalThis (Window) は変わらない

    // 例えば以下のようにすると、それを囲む構文上のコンテキストはグロ
    // ーバルではないので、f2 のアロー関数の this は変わってくる。
    // f1 は、上の例と同様、this にはメソッドが呼び出されたオブジェクト
    // が設定されます。
    document.getElementById("button1").addEventListener("click", listener);

    function listener() {
        const Person1 = {
            name: "Person1",
            f1: function () { console.log(this); },
            f2: () => { console.log(this); }
        }

        Person1.f1();    // Object
        Person1.f2();    // <button type="button" id="button1">button</button>
    }

    // 以下は蛇足でクロージャーとクラスの例

    // クロージャー
    const Person2 = function () {
        this.Name = "Person2";
        this.f1 = function () { console.log(this); }
        this.f2 = () => { console.log(this); }
    }

    let p2 = new Person2();
    p2.f1();    // Person2
    p2.f2();    // Person2

    // クラス
    class Example {
        Name = "Example";
        f1 = function () { console.log(this); }
        f2 = () => { console.log(this); }
    }    

    let e = new Example();
    e.f1();    // Example
    e.f2();    // Example

    // アロー関数式:
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    // クラスの本体は this コンテキストを持っているので、クラス
    // フィールドのようなアロー関数はクラスの this コンテキスト
    // を閉じ、アロー関数の本体の中の this はインスタンス(また
    // は静的フィールドの場合はクラス自体)を正しく参照します。
    // しかし、これは関数自身のバインディングではなく、クロージ
    // ャであるため、 this の値が実行コンテキストによって変わる
    // ことはありません。
</script>
</html>

上の Person オブジェクトの f2: () => { console.log(this); } の this を Visual Studio のインテリセンスで見ると以下の画像のように this: typeof globalThis (Window) となっています。

画像の説明をここに入力

MDN のドキュメント this には "ほとんどの場合、this の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります" と書いてありますが、自分が試した限りではどこでどのように Person.f2(); を実行しようと結果は Window で変わりませんでした。

上のコードにも書きましたが、例えば、イベントのリスナ、すなわちグローバルではないコンテキストでオブジェクトを定義した場合は話が変わってきます。

また、質問に対するコメントで「class の関数の場合はアロー関数の this は関数が実行される場所での this とはならず、class のオブジェクトになります」と書きましたが、その例も上のコードに含めましたので見てください (クロージャーの例も追加)。

下の画像が上のコードの結果をコンソールに出力したものです。下の 2 つは button をクリックして上のコードの listener() を起動して出力させたものです。

画像の説明をここに入力

さらに蛇足の蛇足ですが、関数が then() の中で非同期に実行される場合も注意が必要なようです。興味があれば以下の記事を見てください。

JavaScript の関数内での this
http://surferonwww.info/BlogEngine/post/2023/11/06/what-does-this-mean-in-function-of-javascript.aspx

3
  • 現段階で、HTMLと結び付けた動きを実装した場合の、thisの挙動について知ることが出来、大変勉強になりました。ありがとうございます。 また、クラス定義の際に、ES6から導入されたクラスフィールドの記法が見られ、最初大変混乱しましたが、Coplilotの助けを借りながら何とか理解出来てきました。ありがとうございます。下記のようなソースコードを検証しています。 ■■■■ソースコード■■■■ // クラス class Example { Name = "Example"; f1 = function () { console.log(this); } f2 = () => { console.log(this); } f3() {console.log(this)}; } let e = new Example(); e.f1(); // Example e.f2(); // Example // Example.prototype.f1(); // Example.prototype.f2(); Example.prototype.f3(); ■■■■ソースコード終了■■■■ Commented 2月12日 11:57
  • 追加で解説頂いております、クロージャーとクラスについてですが、クロージャーの箇所について、ちょっと私にはクロージャーとして見立てることが難しく感じ、私自身の理解不足を鑑みて、Copilotに投げさせてもらいましたが、この「// クロージャー」の箇所のソースコードについては、「thisの挙動と関数のスコープによるもので、クロージャーは直接関与していません。」との回答を貰いました。これは合っているでしょうか?或いは、今一度、ご確認頂けませんでしょうか?何卒、宜しくお願い致します。 Commented 2月12日 11:57
  • 「// クロージャー」の箇所は以下ソースコードの箇所になります。 ■■■■ソースコード■■■■ // クロージャー const Person2 = function () { this.Name = "Person2"; this.f1 = function () { console.log(this); } this.f2 = () => { console.log(this); } } let p2 = new Person2(); p2.f1(); // Person2 p2.f2(); // Person2 ■■■■ソースコード終了■■■■ Commented 2月12日 12:06
1

アロー関数をレキシカルスコープとは考えないほうがよいと思います。
アロー関数実行時の this はそのアロー関数の宣言時の this です。それは構文上の外側で決まるものですが、その外側の this がレキシカルとは限りません。

宣言時の this が何かということですけども、オブジェクトリテラルの定義中ではそのオブジェクトがthisになるわけではないので、質問文のケースでは thiswindow などになるわけです。

const person = {
  prop: this;
};

このコードで person.prop === person にならないのと同じことです。

5
  • ご回答ありがとうございます。非常に簡潔で分かり易いです。大変理解しやすくなりスッキリした気がします。 Commented 2月9日 11:45
  • @int32_t様 「アロー関数をレキシカルスコープとは言えないと思います。」とのことですが、私のレキシカルスコープの理解が足りていなかったかと思われます、申し訳ありません。 アロー関数を宣言する際にthisが受け持つ範囲としてのレキシカルスコープがあって、personオブジェクト自体がその範囲、即ちスコープチェーンにあるのではないか?という考えでした。 Commented 2月10日 3:38
  • @int32_t様 上記の件についてもう少し詳しくお聞かせ頂けませんでしょうか? Commented 2月10日 4:02
  • アロー関数だけにとっては this がレキシカルとは言えますが、レキシカルと考えないほうがいいよということでした。ちょっと表現を変更します。person オブジェクトについては回答に書いたとおりで、スコープではありません。
    – int32_t
    Commented 2月12日 2:03
  • コメントリプライありがとうございます。「アロー関数だけにとってはthisがレキシカル」になるというのは、アロー関数ではthisがレキシカルに束縛されるという意味と捉えました。どうも違いましたら、ご指摘頂けますと幸いです。以上、宜しくお願い致します。 Commented 2月12日 10:53
1

単純に、グローバルスコープの this をキャプチャしています
JavaScriptでは型と値に以下の差異があります

  • 型:最上位スコープを定義する
  • 値:最上位スコープに束縛される

この最上位スコープ仮引数として捕捉するのが this の役目です
なので型は this で内部的に最上位スコープを参照しているとも言えます

関数の場合だとfunctionthis を持ち、アロー関数this を持ちません
なので前者は型、後者は値と言えます
person.hellols とそれが属するオブジェクトスコープを束縛するのは、person ではなくグローバルスコープです

一方で person.hellofunctionなので関数型です
こちらは内部で this を以て自身の属するスコープを最上位スコープとして扱います
なので person.hello にとっての最上位スコープは person (のオブジェクトスコープ)です

person に何かしら関数を定義して、元のオブジェクト構成を複製してみると分かりやすいです

const person = {
    name: 'Bob',
    hello: function (greeting) {
        console.log(greeting + ' ' + this.name);
        return greeting + ' ' + this.name;
    },
    
    hello1s:()=> {
        console.log(this);
        setTimeout(()=>{this.hello('hello');}, 1000);  
    },
    
    personCopy:function(){
        const person = {
            name: 'Alice',
            
            hello: function (greeting) {
                console.log(greeting + ' ' + this.name);
                return greeting + ' ' + this.name;
            },
    
            hello1s:()=> {
                console.log(this);
                setTimeout(()=>{this.hello('hello');}, 1000);  
            }
        }

        person.hello1s();
    }
};

person.personCopy();
{
  name: 'Bob',
  hello: [Function: hello],
  hello1s: [Function: hello1s],
  personCopy: [Function: personCopy]
}
hello Bob

クラスの場合も同様に、クラス自身がオブジェクトを名前付きスコープとして最上位と認識し、同時にそこへ定義されるfunctionメソッドがクラススコープを最上位スコープと判断します

つまり単体の同じスコープを最上位に位置付けていますが、クラスの最大の特徴はスコープが自己完結している点です
これによって this の最上位スコープの上限がクラススコープに固定されます

functionだとこうはいきません
例えばこれがどこのオブジェクトスコープにも属さない野良の関数だと、この関数のthis は常にグローバルなクラススコープを指します
この時Nodeなら Objectクラス を参照し、htmlなら Windowクラス を指します

Windowが返されるのはこれが理由です

//関数定義を格納(function定義と同義)
const func=person.personCopy;
func();
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 24.694007873535156,
      nodeStart: 0.21036529541015625,
      v8Start: 1.3842544555664062,
      bootstrapComplete: 19.8660888671875,
      environment: 12.696571350097656,
      loopStart: -1,
      loopExit: -1,
      idleTime: 0
    },
    timeOrigin: 1707655801417.078
  },
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}
/home/jail/prog.js:24
                setTimeout(()=>{this.hello('hello');}, 1000);  
                                     ^
// Objectクラスにhello関数は存在しない
TypeError: this.hello is not a function
    at Timeout._onTimeout (/home/jail/prog.js:24:38)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
4
  • コメントでの議論を踏まえて配慮をしたご回答をくださいまして、誠にありがとうございます。精査させて頂いておりますが、まず、「オブジェクトスコープ」という表現について引っ掛かっており、@int32_tさんが、コメントで仰っていますが、「int32_tさんの回答」「person オブジェクトについては回答に書いたとおりで、スコープではありません。 」とあり、この本稿の中での思索となってしまい恐縮ですが、どうなっていますでしょうか?そもそも、"オブジェクトスコープ"という表現を見たことが無く、あればもっと理解がスッキリするのにな~と思っていたところです。理解の為、見解の一致が欲しく、この点についてお聞かせください。宜しくお願い致します。 Commented 2月12日 11:02
  • 加えて、@raccyさんのご回答にて、「オブジェクトリテラルはスコープを作成しないため、~」「raccyさんの回答」のような文言も確認出来ました。今一度ご確認の程、宜しくお願い致します。 Commented 2月12日 11:31
  • 「オブジェクトスコープ」という言葉は比喩の一種だと捉えてください。例えばpersonの参照するオブジェクトは他の変数からも参照できます。ということはオブジェクトは変数と独立して存在し、両者は切り離して考えた方が想像も容易でしょう。thisは変数を参照するのでなく、このオブジェクトを参照するという意味で「オブジェクトスコープ」という表現を採っています。そもそも言語の基幹動作から考えるとスコープという存在自体が概念的になるので、それが混乱を産みます。なのでここでは「スコープ」という考え方に立ち返っています。重要なのは「thisを宣言する場所」で挙動が変わるのではなく「functionを宣言する場所」でthisの指す「領域」が変わるという点です。そして、その「領域」は常に「functionが宣言された場所」であり、そこがfunction内部、つまりthisから見た「最上位」になるという一貫性です。他の方の回答を借りれば、スコープは型(functionやクラスなど)が作るものと言えるでしょう。グローバルスコープも一種の型のスコープであり、値はそれを作れないということです。ですが値には本来インスタンスがあります。そしてfunctionはそのインスタンスを「スコープ」として定義すると解釈できます。となれば、「スコープを作る」とはあるインスタンスをスコープと「扱う」と言い換えても良いでしょう。 Commented 2月12日 17:50
  • スコープと言う概念がJavaScriptの動作原理の副産物として捉えると、特にfunctionでのオブジェクトの扱われ方が慣用的にスコープになると分かりました。ありがとうございました。 Commented 2月13日 11:47
0

ご回答者の皆様、ご教示くださり、誠にありがとうございました。
バックグラウンド処理の動作原理に立ち返って、ご回答頂きました、
@raccy さんのご回答#Answer_by_raccyで"長い回答"を恐らく20回、30回と読ませて頂き、読解し、図解を行う試みを行いましたので、投稿致します。

本題について理解を促す土台となる内部処理系パラメーター

  • 抽象操作(abstract operation) ... 関数のような処理のまとまりです。抽象処理名()と表記します。
  • 内部メソッド(internal method) ... オブジェクトに対して内部でのみ呼ばれるメソッドです。[[メソッド名]]と表記します。
  • 内部スロット(internal slot) ... オブジェクトの内部状態を表すプロパティのようなものです。プロパティとは違いプロトタイプチェーンで遡ることができません。[[スロット名]]と表記します。
  • レコード(record) ... オブジェクトのように名前と値の組(フィールド)とメソッド(抽象メソッド)をもつ内部でのみ使われるデータ構造です。
  • フィールド(field) ... レコードに保存されている名前と値の組です。[[フィールド名]]と表記します。
  • 抽象メソッド(abstract method) ... レコードに対するメソッドのようもので、呼び出すことで抽象的な処理を行うことができます。メソッド名()と表記します。

について、
【図1】
画像の説明をここに入力

主なThis値の決定処理

続きまして、
実際の処理を見た際、

よく「スコープ」という言葉を使われていますが、仕様上は環境レコード(Environment Record)と呼ばれるレコードです。

とのことで、

次の【図2】で出てくる区割りのレコードについて5種類あると下記の通り、ご教示頂いています。

  • 宣言的環境レコード(Declarative Environment Record) ... ブロックの環境レコード。
  • 関数環境レコード(Function Environment Record) ... 関数内部の環境レコード。
  • モジュール環境レコード(Module Environment Record) ... モジュールのトップレベルの環境レコード。その外側にはグローバル環境レコードになります。
    オブジェクト環境レコード(Object Environment Record) ... with構文で作成される環境レコード。with構文は非厳格モードでのみ使用可能であるため、厳格モードでは現れません。
  • グローバル環境レコード(Global Environment Record) ... モジュールではない場合のトップレベルの環境レコード。全ての環境スコープの一番外側になります。

そして、

これらの環境レコードはthisに関する二つの抽象メソッドを持っています。

  • HasThisBinding() ... 環境レコードがthisを束縛している場合は真(true)を返し、そうで無い場合は偽(false)を返します。
  • GetThisBinding() ... その環境レコードが束縛しているthisを返します。(HasThisBinding()抽象メソッドが真になる環境レコードでのみ実装されています)

(中略)

thisが評価されるとき、ResolveThisBinding()抽象操作が呼び出されます。

(中略)

つまり、thisが評価されるときに何になるのかというのは、現在実行中の環境レコードから外側に向かってHasThisBinding()抽象メソッドが真になる環境レコードを探し、その環境レコードに対してGetThisBinding()抽象メソッドを呼び出した結果となります

とのことについて、
【図2】
画像の説明をここに入力

関数のThisについての決定処理

今着目しているのが、【図2】の赤字の部分、関数について特に環境レコードの[[ThisBindingStatus]]フィールドについてとなりますので、続いてそのことについて記述頂いております。

これについて、
【図3】
画像の説明をここに入力

話題の関数環境レコードの[[ThisBiningStatus]]フィールドというのは、関数オブジェクトの[[ThisMode]]内部スロット次第であり、[[ThisMode]]内部スロットは、抽象操作により関数が作成される過程で、ThisMode引数によって左右され、このThisMode引数について、次のように定められているということでした。

  • thisMode引数がNON-LEXICAL-THIS
    • 関数宣言(FunctionDeclaration)
    • 関数式(FunctionExpression)
    • ジェネレーター宣言(GeneratorDeclaration)
    • ジェネレーター式(GeneratiorExpression)
    • 非同期関数宣言(AsyncFunctionDeclaraino)
    • 非同期関数式(AsyncFunctionExpression)
    • 非同期ジェネレーター宣言(AsyncGeneratorDeclaration)
    • 非同期ジェネレーター式(AsyncGeneratorExpression)
    • メソッド定義(MethodDefinition)
    • フィールド定義(FieldDefiniion)の初期化子(Initializer)
    • クラス静的ブロック(ClassStaticBlock)
    • CreateDynamicFunction()抽象操作 ... new Funciton()等で呼びされます。
  • thisMode引数がLEXICAL-THIS
    • アロー関数(ArrowFunciton)
    • 非同期アロー関数(AsyncArrowFunction)

アロー関数についてまとめ

本件アロー関数について纏めますと、
関数作成時のThisMode引数がLEXICAL-THISであるので、関数オブジェクトとしての[[ThisMode]]内部スロットがLEXICALになり、その為、話題の関数環境レコードの[[ThisBindingStatus]]フィールドがLEXICALになり、【図2】で関数環境レコードの[[HasThisBinding]]抽象メソッドがFalseになる為、関数環境レコードの[[GetThisBinding]]抽象メソッドの対象環境レコードが[[OuterEnv]]フィールドに譲り渡されていくプロセスに入る為、これが、@raccyさんが仰るように巷で言われている、

thisを束縛するのは外側の環境レコードになるため、表現としての正確性は欠けますが、「アロー関数ではthisが文脈的に束縛される」とも言える

のような現象を起こしていると捉えられました。

function関数についての解釈

尚、通常のfunctionにより定義された関数については、同じように処理を辿った場合、先ず、ThisMode引数がNON-LEXICAL-THISに相当する為、厳格モードでの[[ThisMode]]内部スロットがSTRICTとなり、関数環境レコードの[[ThisBindingStatus]]フィールドがUNINITIALIZEDと設定され、【図2】で扱っている、関数環境レコードの[[HasThisBinding]]抽象メソッドがTrue、従って即効で[[GetThisBinding]]抽象メソッドについて、[[ThisValue]]が設定されて、戻って関数環境レコードの[[ThisBindingStatus]]フィールドがITIALIZEDになる。

尚、厳格モードで次のthisはundefinedになることを確認しました。

function fn_strict() {
    'use strict'
    return this;
}
console.log(fn_strict());    // undefined

厳格モードでない場合は、windowオブジェクトを返します。

function fn() {
    return this;
}
console.log(fn());    // window

また、

[[ThisValue]]フィールドにはメソッド呼び出し時のレシーバーが入ったりする

ということでですが、ここで指すレシーバーと言うのは、関数(メソッド)呼び出し時に追随させられているインスタンスやオブジェクト、callやapply、bindにより束縛したthisのことと認識しております。

なので、派生してthisが 暗黙の引数 のようなものというコメントを回答で頂いたものと解釈致します。
@Rookieさん
#Answer_by_Rookie
コメント

thisについては詰まるところ、functionでは暗黙の引数となり、

ありがとうございました。
以上、
よろしくお願いいたします。

-2

アロー関数内での'this'のバインディングは、関数が呼び出される時点で発生します。'this'の値は、アロー関数がどのように呼び出されるかによって決まります。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。