JavaScript'teki dinamik işlev adı?

Bu bende var:

this.f = function instance(){};

Şuna sahip olmak istiyorum:

this.f = function ["instance:" + a](){};

Güncelleme

Başkalarının da bahsettiği gibi, bu en hızlı veya en çok önerilen çözüm değildir. Marcosc'nin aşağıdaki çözümü , gidilecek yoldur.

Eval kullanabilirsiniz:

var code = "this.f = function " + instance + "() {...}";
eval(code);

Bu, temelde bunu en basit düzeyde yapacak:

"use strict";
var name = "foo";
var func = new Function(
     "return function " + name + "(){ alert('sweet!')}"
)();

//call it, to test it
func();

Daha şık olmak istiyorsanız, " JavaScript'teki dinamik fonksiyon isimleri " üzerine bir makale yazdım .

MDN JavaScript Referansında [1] belirtildiği gibi Object.defineProperty'yi kullanabilirsiniz:

var myName = "myName";
var f = function () { return true; };
Object.defineProperty(f, 'name', {value: myName, writable: false});

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#Description

Son motorlarda şunları yapabilirsiniz:

function nameFunction(name, body) {
  return {[name](...args) {return body(...args)}}[name]
}



const x = nameFunction("wonderful function", (p) => p*2)
console.log(x(9)) // => 18
console.log(x.name) // => "wonderful function"

Buradaki önerilerin çoğunun eval, hacky çözümleri veya sarmalayıcılar kullanılarak yetersiz olduğunu düşünüyorum. ES2015 itibariyle isimler, değişkenler ve özellikler için sözdizimsel konumdan çıkarılmıştır.

Yani bu gayet iyi çalışacak:

const name = 'myFn';
const fn = {[name]: function() {}}[name];
fn.name // 'myFn'

Fonksiyonu dışarıdan geçiremeyeceğiniz ve adını anlamak için sözdizimsel pozisyona uyarlayamayacağınız için adlandırılmış fonksiyon fabrikası metotları yaratmanın cazibesine direnin. O zaman artık çok geç. Buna gerçekten ihtiyacınız varsa, bir paketleyici oluşturmanız gerekir. Bunu burada biri yaptı, ancak bu çözüm sınıflar için çalışmıyor (bunlar aynı zamanda işlevlerdir).

Burada özetlenen tüm varyantlarla çok daha derinlemesine bir cevap yazılmıştır: https://stackoverflow.com/a/9479081/633921

Ne dersin

this.f = window["instance:" + a] = function(){};

Tek dezavantajı, toSource yöntemindeki işlevin bir ad belirtmemesidir. Bu genellikle hata ayıklayıcılar için bir sorundur.

Sözdizimi , isme göre indekslenmiş function[i](){}işlevler olan özellik değerlerine sahip bir nesneyi ifade eder . Böylece .function[][i]

{"f:1":function(){}, "f:2":function(){}, "f:A":function(){}, ... } ["f:"+i]

{"f:1":function f1(){}, "f:2":function f2(){}, "f:A":function fA(){}} ["f:"+i]işlev adı tanımlamasını koruyacaktır. İlgili aşağıdaki notlara bakın :.

Yani,

javascript: alert(
  new function(a){
    this.f={"instance:1":function(){}, "instance:A":function(){}} ["instance:"+a]
  }("A") . toSource()
);

({f:(function () {})})FireFox'ta görüntülenir .
(Bu, bu çözümle neredeyse aynı fikirdir , yalnızca genel bir nesne kullanır ve artık pencere nesnesini doğrudan işlevlerle doldurmaz.)

Bu yöntem, ortamı açıkça instance:x.

javascript: alert(
  new function(a){
    this.f=eval("instance:"+a+"="+function(){})
  }("A") . toSource()
);
alert(eval("instance:A"));

görüntüler

({f:(function () {})})

ve

function () {
}

Özellik işlevi fan'a başvuruda anonymous functionbulunmamasına rağmen instance:x, bu yöntem bu çözümle ilgili birkaç sorunu önler .

javascript: alert(
  new function(a){
    eval("this.f=function instance"+a+"(){}")
  }("A") . toSource()
);
alert(instanceA);    /* is undefined outside the object context */

sadece görüntüler

({f:(function instanceA() {})})

• Gömülü :javascript'i function instance:a(){}geçersiz kılar .
• Bir referans yerine, fonksiyonun gerçek metin tanımı tarafından çözümlenir ve yorumlanır eval.

Aşağıdakiler mutlaka sorunlu değildir,

• instanceAFonksiyon olarak kullanım için doğrudan kullanılamazinstanceA()

ve böylece orijinal problem bağlamıyla çok daha tutarlıdır.

Bu hususlar göz önüne alındığında,

this.f = {"instance:1": function instance1(){},
          "instance:2": function instance2(){},
          "instance:A": function instanceA(){},
          "instance:Z": function instanceZ(){}
         } [ "instance:" + a ]

OP örneğinin anlambilim ve sözdizimi ile küresel hesaplama ortamını olabildiğince korur.

En çok oylanan yanıt zaten tanımlanmış [String] işlev gövdesine sahiptir. Zaten beyan edilen işlevin adını yeniden adlandırmak için bir çözüm arıyordum ve nihayet bir saat uğraştıktan sonra bununla uğraştım. O:

• alredy'nin beyan ettiği işlevi alır
• bunu [String] olarak ayrıştırır .toString()yöntemle
• sonra (adlandırılmış işlevin) adının üzerine yazar veya yenisini (anonim olduğunda)function ve arasına ekler(
• daha sonra new Function()yapıcı ile yeni yeniden adlandırılmış işlevi oluşturur

function nameAppender(name,fun){
  const reg = /^(function)(?:\s*|\s+([A-Za-z0-9_$]+)\s*)(\()/;
  return (new Function(`return ${fun.toString().replace(reg,`$1 ${name}$3`)}`))();
}

//WORK FOR ALREADY NAMED FUNCTIONS:
function hello(name){
  console.log('hello ' + name);
}

//rename the 'hello' function
var greeting = nameAppender('Greeting', hello); 

console.log(greeting); //function Greeting(name){...}


//WORK FOR ANONYMOUS FUNCTIONS:
//give the name for the anonymous function
var count = nameAppender('Count',function(x,y){ 
  this.x = x;
  this.y = y;
  this.area = x*y;
}); 

console.log(count); //function Count(x,y){...}

Bir nesnenin dinamik yöntemleri, ECMAScript 2015 (ES6) tarafından sağlanan Nesne Sabit Uzantıları kullanılarak oluşturulabilir:

const postfixes = ['foo', 'bar'];

const mainObj = {};

const makeDynamic = (postfix) => {
  const newMethodName = 'instance: ' + postfix;
  const tempObj = {
    [newMethodName]() {
      console.log(`called method ${newMethodName}`);
    }
  }
  Object.assign(mainObj, tempObj);
  return mainObj[newMethodName]();
}

const processPostfixes = (postfixes) => { 
  for (const postfix of postfixes) {
    makeDynamic(postfix); 
  }
};

processPostfixes(postfixes);

console.log(mainObj);

Yukarıdaki kodu çalıştırmanın çıktısı:

"called method instance: foo"
"called method instance: bar"
Object {
  "instance: bar": [Function anonymous],
  "instance: foo": [Function anonymous]
}

Mevcut bir anonim işlevin adını ayarlamak için :
(@ Marcosc'nin cevabına göre)

var anonymous = function() { return true; }

var name = 'someName';
var strFn = anonymous.toString().replace('function ', 'return function ' + name);
var fn = new Function(strFn)();

console.log(fn()); // —> true

Demo .

Not : Yapmayın; /

Bunu başarmanın iki yöntemi vardır ve bunların artıları ve eksileri vardır.

name mülkiyet tanımı

Bir fonksiyonun değişmez name özelliğini tanımlama .

Artıları

• İsim için her karakter mevcuttur. (ör. () 全 {}/1/얏호/ :D #GO(@*#%! /*)

Eksileri

• İşlevin sözdizimsel ("ifade edici") adı , nameözellik değerine karşılık gelmeyebilir .

Fonksiyon ifadesi değerlendirmesi

Bir Making adlı işlev ifadesini ve değerlendirilmesi ile Functionyapıcısı.

Artıları

• Fonksiyonun sözdizimsel ("ifade edici") adı her zaman kendiname özellik değerine .

Eksileri

• Ad için boşluklar (vb.) Kullanılamaz.
• İfade enjekte edilebilir (örneğin (){}/1//, girdi için ifade bir işlev yerine is return function (){}/1//() {}, verir NaN.).

const demoeval = expr => (new Function(`return ${expr}`))();

// `name` property definition
const method1 = func_name => {
    const anon_func = function() {};
    Object.defineProperty(anon_func, "name", {value: func_name, writable: false});
    return anon_func;
};

const test11 = method1("DEF_PROP"); // No whitespace
console.log("DEF_PROP?", test11.name); // "DEF_PROP"
console.log("DEF_PROP?", demoeval(test11.toString()).name); // ""

const test12 = method1("DEF PROP"); // Whitespace
console.log("DEF PROP?", test12.name); // "DEF PROP"
console.log("DEF PROP?", demoeval(test12.toString()).name); // ""

// Function expression evaluation
const method2 = func_name => demoeval(`function ${func_name}() {}`);

const test21 = method2("EVAL_EXPR"); // No whitespace
console.log("EVAL_EXPR?", test21.name); // "EVAL_EXPR"
console.log("EVAL_EXPR?", demoeval(test21.toString()).name); // "EVAL_EXPR"

const test22 = method2("EVAL EXPR"); // Uncaught SyntaxError: Unexpected identifier

__callPHP'deki işlev gibi dinamik bir işleve sahip olmak istiyorsanız , Proxy'leri kullanabilirsiniz.

const target = {};

const handler = {
  get: function (target, name) {
    return (myArg) => {
      return new Promise(resolve => setTimeout(() => resolve('some' + myArg), 600))
    }
  }
};

const proxy = new Proxy(target, handler);

(async function() {
  const result = await proxy.foo('string')
  console.log('result', result) // 'result somestring' after 600 ms
})()

Dinamik İşlev Adı ve bunun gibi parametreleri kullanabilirsiniz.

1) Ayrı fonksiyonu tanımlayın ve çağırın

let functionName = "testFunction";
let param = {"param1":1 , "param2":2};

var func = new Function(
   "return " + functionName 
)();

func(param);

function testFunction(params){
   alert(params.param1);
}

2) Fonksiyon kodunu dinamik tanımlayın

let functionName = "testFunction(params)";
let param = {"param1":"1" , "param2":"2"};
let functionBody = "{ alert(params.param1)}";

var func = new Function(
    "return function " + functionName + functionBody 
)();

func(param);

Teşekkürler Marcosc! Cevabına dayanarak, herhangi bir işlevi yeniden adlandırmak istiyorsanız , şunu kullanın:

// returns the function named with the passed name
function namedFunction(name, fn) {
    return new Function('fn',
        "return function " + name + "(){ return fn.apply(this,arguments)}"
    )(fn)
}

Bu yardımcı program işlevi, birden çok işlevi tek bir işlevde birleştirir (özel bir ad kullanarak), tek gereksinim, sağlanan işlevlerin kapsamının başlangıcında ve sonunda düzgün bir şekilde "yeni sıralanması" dır.

const createFn = function(name, functions, strict=false) {

    var cr = `\n`, a = [ 'return function ' + name + '(p) {' ];

    for(var i=0, j=functions.length; i<j; i++) {
        var str = functions[i].toString();
        var s = str.indexOf(cr) + 1;
        a.push(str.substr(s, str.lastIndexOf(cr) - s));
    }
    if(strict == true) {
        a.unshift('\"use strict\";' + cr)
    }
    return new Function(a.join(cr) + cr + '}')();
}

// test
var a = function(p) {
    console.log("this is from a");
}
var b = function(p) {
    console.log("this is from b");
}
var c = function(p) {
    console.log("p == " + p);
}

var abc = createFn('aGreatName', [a,b,c])

console.log(abc) // output: function aGreatName()

abc(123)

// output
this is from a
this is from b
p == 123

Darren'ın cevabı ile kyernetikos'un cevabını birleştirmede daha şanslıydım .

const nameFunction = function (fn, name) {
  return Object.defineProperty(fn, 'name', {value: name, configurable: true});
};

/* __________________________________________________________________________ */

let myFunc = function oldName () {};

console.log(myFunc.name); // oldName

myFunc = nameFunction(myFunc, 'newName');

console.log(myFunc.name); // newName

Not: Function.name ¹ için standart ES2015 spesifikasyonuna uyacak şekilde configurableayarlanmıştır.true

Bu, özellikle benzer WebPack bir hata etrafında almakla yardımcı bu bir .

Güncelleme: Bunu bir npm paketi olarak yayınlamayı düşünüyordum, ancak sindresorhus'un bu paketi tam olarak aynı şeyi yapıyor.

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Bu sorunla çok uğraştım. @Albin çözümü geliştirirken bir cazibe gibi çalıştı, ancak onu üretime geçirdiğimde işe yaramadı. Bazı hata ayıklamalardan sonra ihtiyacım olanı nasıl elde edeceğimi anladım. ES6'yı CRA (create-react-app) ile kullanıyorum, bu da Webpack tarafından paketlendiği anlamına geliyor.

İhtiyacınız olan işlevleri dışa aktaran bir dosyanız olduğunu varsayalım:

myFunctions.js

export function setItem(params) {
  // ...
}

export function setUser(params) {
  // ...
}

export function setPost(params) {
  // ...
}

export function setReply(params) {
  // ...
}

Ve bu işlevleri başka bir yerde dinamik olarak çağırmanız gerekir:

myApiCalls.js

import * as myFunctions from 'path_to/myFunctions';
/* note that myFunctions is imported as an array,
 * which means its elements can be easily accessed
 * using an index. You can console.log(myFunctions).
 */

function accessMyFunctions(res) {
  // lets say it receives an API response
  if (res.status === 200 && res.data) {
    const { data } = res;
    // I want to read all properties in data object and 
    // call a function based on properties names.
    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        // you can skip some properties that are usually embedded in
        // a normal response
        if (key !== 'success' && key !== 'msg') {
          // I'm using a function to capitalize the key, which is
          // used to dynamically create the function's name I need.
          // Note that it does not create the function, it's just a
          // way to access the desired index on myFunctions array.
          const name = `set${capitalizeFirstLetter(key)}`;
          // surround it with try/catch, otherwise all unexpected properties in
          // data object will break your code.
          try {
            // finally, use it.
            myFunctions[name](data[key]);
          } catch (error) {
            console.log(name, 'does not exist');
            console.log(error);
          }
        }
      }
    }
  }
}

aşağıdaki gibi dinamik işlevlerin listesiyle nesne oluşturmanın en iyi yolu:

const USER = 'user';

const userModule = {
  [USER + 'Action'] : function () { ... }, 
  [USER + 'OnClickHandler'] : function () { ... }, 
  [USER + 'OnCreateHook'] : function () { ... }, 
}

function myFunction() {
    console.log('It works!');
}

var name = 'myFunction';

window[name].call();

Burada bariz olanı kaçırıyor olabilirim, ama sadece adı eklemenin nesi yanlış? isimlerinden bağımsız olarak işlevler çağrılır. isimler sadece kapsam belirleme amacıyla kullanılır. Eğer onu bir değişkene atarsanız ve kapsam içinde ise çağrılabilir. Ne olursa olsun, bir fonksiyon olan bir değişkeni çalıştırıyorsunuz. hata ayıklama sırasında tanımlama nedenlerinden dolayı bir adınız olması gerekiyorsa, bunu anahtar kelime işlevi ile açılış ayracı arasına ekleyin.

var namedFunction = function namedFunction (a,b) {return a+b};

alert(namedFunction(1,2));
alert(namedFunction.name);
alert(namedFunction.toString());

Alternatif bir yaklaşım, işlevi, çevreleyen ad alanını kirletmek istemiyorsanız, bir dış sarmalayıcıya da iletebileceğiniz bir dış yeniden adlandırılmış dolgunun içine sarmaktır. Eğer işlevi dizelerden dinamik olarak oluşturmak istiyorsanız (bu örneklerin çoğunun yaptığı gibi), istediğiniz şeyi yapmak için kaynağı yeniden adlandırmak önemsizdir. ancak, başka bir yerde çağrıldığında işlevlerini etkilemeden mevcut işlevleri yeniden adlandırmak istiyorsanız, bunu başarmanın tek yolu bir şimdir.

(function(renamedFunction) {

  alert(renamedFunction(1,2));
  alert(renamedFunction.name);
  alert(renamedFunction.toString());
  alert(renamedFunction.apply(this,[1,2]));


})(function renamedFunction(){return namedFunction.apply(this,arguments);});

function namedFunction(a,b){return a+b};

Yakındaydın:

this["instance_" + a] = function () {...};

{...};

Bu EN İYİ çözüm, o zaman daha iyi new Function('return function name(){}')().

Değerlendir en hızlı çözümdür:

var name = 'FuncName'
var func = eval("(function " + name + "(){})")