ES2015'te adlandırılmış bir ok işlevini nasıl yazarım?

ES6'da yeni ok sözdizimine dönüştürmeye çalıştığım bir işlevim var . Bu adlandırılmış bir işlevdir:

function sayHello(name) {
    console.log(name + ' says hello');
}

Var ifadesi olmayan bir ad vermenin bir yolu var mı:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

Açıkçası bu işlevi ancak tanımladıktan sonra kullanabilirim. Aşağıdaki gibi bir şey:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

ES6'da bunu yapmanın yeni bir yolu var mı ?

ES2015'te adlandırılmış bir ok işlevini nasıl yazarım?

Sorunuzu dışladığınız şekilde yaparsınız: Bir ödevin veya özellik başlatıcısının sağ tarafına, değişken veya özellik adının JavaScript motoru tarafından bir ad olarak makul bir şekilde kullanılabileceği yere koyarsınız. Bunu yapmanın başka bir yolu yok, ancak bunu yapmak doğru ve tam olarak şartname kapsamındadır.

Özelliklere göre, bu işlevin gerçek bir adı vardır sayHello:

var sayHello = name => {
    console.log(name + ' says hello');
};

Bu, Atama İşleçleri> Çalışma Zamanı Semantiği: Değerlendirme işlemini soyut SetFunctionNameişlemi çağırdığı yerde tanımlanır (bu çağrı şu anda 1.e.iii adımındadır).

Benzer şekilde, Çalışma Zamanı Semantiği: PropertyDefinitionEvaluation çağırır SetFunctionNameve böylece bu işleve gerçek bir ad verir:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

Modern motorlar zaten böyle ifadeler için işlevin dahili adını ayarlar; Edge hala nameçalışma zamanı bayrağının arkasındaki işlev örneğinde olduğu gibi kullanılabilir .

Örneğin, Chrome veya Firefox'ta web konsolunu açın ve ardından bu snippet'i çalıştırın:

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

Chrome 51 ve üstü ve Firefox 53 ve üstü (ve deneysel bir işaretle Edge 13 ve üstü), bunu çalıştırdığınızda şunları görürsünüz:

foo.name: foo
Hata
    foo'da (http://stacksnippets.net/js:14:23)
    http://stacksnippets.net/js:17:3

Not foo.name is: foove Error...at foo.

Chrome 50 ve öncesi, Firefox 52 ve öncesi ve deney bayrağı olmayan Edge'de, bunun yerine Function#name(henüz) mülke sahip olmadıkları için bunu görürsünüz :

foo.name: 
Hata
    foo'da (http://stacksnippets.net/js:14:23)
    http://stacksnippets.net/js:17:3

Adı eksik olduğunu not foo.name is:, ancak bir yığın izleme gösterilmiştir. Sadece name özelliğin fonksiyon üzerinde uygulanmasının diğer ES2015 özelliklerinden daha düşük önceliğe sahip olması; Chrome ve Firefox şimdi var; Edge'de bir bayrağın arkasında var, muhtemelen bayrağın arkasında çok daha uzun olmayacak.

Açıkçası, bu işlevi ancak tanımladıktan sonra kullanabilirim

Doğru. Ok işlevleri için işlev bildirimi sözdizimi yoktur , yalnızca işlev ifadesi sözdizimi yoktur ve işlev ifadesi ( var f = function foo() { };) adında eski bir stildeki ada eşdeğer bir ok yoktur . Yani şuna eşdeğer yok:

console.log(function fact(n) {
    if (n < 0) {
        throw new Error("Not defined for negative numbers");
    }
    return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120

Bunu iki ifadeye bölmelisiniz ( yine de yapmanız gerektiğini iddia ediyorum ) :

let fact = n => {
    if (n < 0) {
      throw new Error("Not defined for negative numbers.");
    }
    return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));

Eğer değilse, doğal olması tek ifade gereklidir nereye koymak için her zaman ... bir ok işlevini kullanabilirsiniz:

console.log((() => {
    let fact = n => {
        if (n < 0) {
            throw new Error("Not defined for negative numbers.");
        }
        return n == 0 ? 1 : n * fact(n - 1);
    };
    return fact(5);
})()); // 120

Bunun güzel olduğunu söylemiyorum, ama kesinlikle tek bir ifade sarmalayıcısına ihtiyacınız varsa işe yarıyor.

Hayır. Ok sözdizimi anonim işlevlerin kısa biçimidir. İsimsiz fonksiyonlar isimsizdir.

Adlandırılmış işlevler functionanahtar sözcükle tanımlanır .

'Named' ile .nameok işlevinizin özelliğinin ayarlanmasını istiyorsanız, şanslısınız demektir.

Bir atama ifadesinin sağ tarafında bir ok işlevi tanımlanmışsa, motor sol taraftaki adı alır ve ok işlevini ayarlamak için kullanır .name, örn.

var sayHello = (name) => {
    console.log(name + ' says hello');
}

sayHello.name //=== 'sayHello'

Bunu söyledikten sonra, sorunuz daha fazla 'vinç çekmek için bir ok işlevi alabilir miyim?' Gibi görünüyor. Bunun cevabı büyük bir 'hayır' olmasından korkuyorum.

Bunun ES7 ile mümkün olduğu görülüyor: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

Verilen örnek şöyledir:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

ES6 ok işlevlerinin gövdesi, bunları çevreleyen kodla aynı sözcük bilgisini paylaşır, bu da ES7 özellik başlatıcılarının kapsamı nedeniyle bize istenen sonucu verir.

Babil ile bu çalışmayı sağlamak için en deneysel ES7 aşama 0 sözdizimini etkinleştirmem gerektiğini unutmayın. Webpack.config.js dosyamda babel yükleyiciyi şöyle güncelledim:

{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},

Aslında ok işlevlerini (en azından krom 77'den itibaren ...) adlandırmanın bir yolu bunu yapmaktır:

"use strict";
let fn_names = {};
fn_names.foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

Ben LoginClass adında bir sınıf var ve bu sınıf içinde ben yazdım sen adam feryat örneği can adlı ok işlevini yazmak için adlandırılmış işlevi ok adlı successAuth sınıf LoginClass {

    constructor() {

    }

    successAuth = (dataArgs)=> { //named arow function

    }

}

BU ES6

Evet, peşinde olduğun şeyin böyle bir şey olduğunu düşünüyorum:

const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"

İşlevler oluşturmak için işlev bölümünü ve ok bölümünü atlayabilirsiniz. Misal:

 class YourClassNameHere{

   constructor(age) {
     this.age = age;
   }

   foo() {
     return "This is a function with name Foo";
   }

   bar() {
     return "This is a function with name bar";
   }

 }

let myVar = new YourClassNameHere(50);
myVar.foo();