オブジェクトメソッド関数：匿名または名前付き？

Question

私は両方のタイプのコードを見てきました。好みがあるかどうか疑問に思っています。使用する匿名または名前付き機能：

function myFunc() { 
    this.myMethod =() => { 
     //.. 
    } 
} 

function myFunc() { 
    this.myMethod = function() { 
     //.. 
    } 
} 

はMDNから撮影：

矢印関数式は 表現機能に比べて短い構文を持っており、自身のこれ、引数、スーパーに結合しない、または new.target。矢印機能は常に匿名です。これらの関数 の式は非メソッド関数に最も適しており、 はコンストラクタとして使用できません。

_this = thisを実行しなくてもmyFuncプロパティにアクセスしたいと思うので、匿名ユーザーにとっては意味があります。他方では、無名関数は非メソッド関数（コールバック）に最も適していると述べている。

Answer 1

これらは矛盾しません。

それはあなたが_this = thisを行うことなく、myFuncインスタンスのプロパティにアクセスする場合がありますよう匿名矢印関数を使用する意味があります。

はい。メソッドの場合は、関数式の中で単にthisを使用すれば問題ありません。一方

それは関数式は、非メソッド関数（すなわち、コールバック）に最も適している無名関数を述べています。

「非方法」（常に）ない機能を指すはthisキーワードを設定しないobject.method(…)パターンを使用してを呼び出します。関数がであるかどうかは、オブジェクトプロパティとしてに格納されているかどうかは関係ありません。

Btwは、これらの点のいずれも名前付き対匿名の表現とは関係ありません。

Answer 2

技術的には問題ありません。

var myFunction = function() { } //anonymous 

と

var myFunction = function myFunction() { } //named 

1以外のすべての点で同じになります - デバッグツールを使用して、スタックトレースを見ていると、異なる識別子が表示されます。最初のバージョンは(anonymous function)と表示され、後者の名前はmyFunctionと表示されます。したがって、名前付き関数は開発者の便宜と開発のためだけに使用されます。あなたは

var myFunction = function someOtherName() { /* ... */ } 

を持つことができ、これは、開発ツールでsomeOtherNameとして表示されます例えば、関数の名前は、それへの参照と同じである必要はないことは注目に値する

。しかし、を使ってをにすることはできません。機能の名前と参照は別のものです。簡単にするため、通常は同じ識別子に設定されます。

今、あなたの例に - はは、あなたがこれはという名前の関数と等価ではありません

function myFunc() { 
    this.myMethod =() => { 
     //.. 
    } 
} 

掲示ものに差があります。これはES6矢印の機能を使用している - 通常、彼らが割り当てられている変数と同じ名前が付けられます。

var arrowFunction =() => {}; 
 

 
var obj = { 
 
    arrowMethod:() => {} 
 
} 
 

 
console.log("function name is: " + arrowFunction.name); 
 
console.log("object property function name is: "+ obj.arrowMethod.name);

（これは、いくつかのためにChromeでなく、Firefoxで動作することに注意してください理由 - .nameプロパティが設定されているものとする）命名の違いに

さらには、矢印の機能は、「プレーン」の機能に他の違いがあります。最も顕著なのは、そのコンテキストが語彙的に結合されていることです。ここでは、これが実際に何を意味するのか

function arrowExample() { 
 
    this.data = "Hello arrow"; 
 
    this.myMethod =() => { 
 
     return this.data; 
 
    } 
 
} 
 

 
function normalFunctionExample() { 
 
    this.data = "Hello normal function"; 
 
    this.myMethod = function myMethod() { 
 
     return this.data; 
 
    } 
 
} 
 

 
var arrowInstance = new arrowExample(); 
 
var normalFunctionExampleInstance = new normalFunctionExample(); 
 

 
console.log("Invoking arrow with context: " + arrowInstance.myMethod()); 
 
console.log("Invoking normal function with context: " + normalFunctionExampleInstance.myMethod()); 
 

 
var arrowReference = arrowInstance.myMethod; 
 
var normalFunctionReference = normalFunctionExampleInstance.myMethod; 
 

 
console.log("Invoking arrow without context: " + arrowReference()); 
 
console.log("Invoking normal function without context: " + normalFunctionReference());