जावास्क्रिप्ट में डायनामिक फ़ंक्शन नाम?

Question 1

मेरे पास यह है:

this.f = function instance(){};

मैं यह करना चाहूंगा:

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

Question 2

अपडेट करें

जैसा कि दूसरों ने उल्लेख किया है, यह सबसे तेज़ और न ही सबसे अनुशंसित समाधान नहीं है। मार्कोस का समाधान नीचे जाने का रास्ता है।

~~आप eval का उपयोग कर सकते हैं:~~

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

Question 3

यह मूल रूप से इसे सबसे सरल स्तर पर करेगा:

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

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

यदि आप अधिक फैंसी प्राप्त करना चाहते हैं, तो मेरे पास " जावास्क्रिप्ट में डायनामिक फ़ंक्शन नाम " पर एक लेख है ।

Question 4

MDN जावास्क्रिप्ट संदर्भ [1] में दिए गए अनुसार आप Object.defineProperty का उपयोग कर सकते हैं:

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

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

Question 5

हाल के इंजनों में, आप कर सकते हैं

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"

स्निपेट का विस्तार करें

Question 6

मुझे लगता है कि यहाँ ज्यादातर सुझाव अडॉप्ट, हैली सॉल्यूशन या रैपर का उपयोग करके उप-रूपी हैं। ES2015 के नाम चरों और गुणों के लिए सिंटैक्टिक स्थिति से अनुमानित हैं।

तो यह ठीक काम करेगा:

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

नामित फ़ंक्शन फ़ैक्टरी विधियों को बनाने के प्रलोभन का विरोध करें क्योंकि आप फ़ंक्शन को बाहर से पास करने में सक्षम नहीं होंगे और इसके नाम का अनुमान लगाने के लिए इसे सिंटैक्टिक स्थिति में वापस कर देंगे। फिर पहले ही बहुत देर हो चुकी है। यदि आपको वास्तव में इसकी आवश्यकता है, तो आपको एक आवरण बनाना होगा। किसी ने यहाँ किया है, लेकिन यह समाधान कक्षाओं के लिए काम नहीं करता है (जो भी कार्य हैं)।

उल्लिखित सभी वेरिएंट के साथ अधिक गहराई से उत्तर यहां लिखा गया है: https://stackoverflow.com/a/9479081/633921

Question 7

व्हाट अबाउट

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

एकमात्र दोष यह है कि इसकी toSource विधि में कार्य एक नाम नहीं दर्शाता है। यह आमतौर पर केवल डिबगर के लिए एक समस्या है।

Question 8

सिंटैक्स का function[i](){}अर्थ है कि वे गुण मानों के साथ एक ऑब्जेक्ट है, जो फ़ंक्शन, 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]फ़ंक्शन नाम पहचान को संरक्षित करेगा। के बारे में नीचे दिए नोट्स देखें :।

इसलिए,

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

({f:(function () {})})फ़ायरफ़ॉक्स में प्रदर्शित करता है।
(यह इस समाधान के रूप में लगभग एक ही विचार है , केवल यह एक सामान्य वस्तु का उपयोग करता है और अब कार्य के साथ विंडो ऑब्जेक्ट को सीधे पॉप्युलेट नहीं करता है।)

यह विधि स्पष्ट रूप से पर्यावरण को पॉप्युलेट करती है instance:x।

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

प्रदर्शित करता है

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

तथा

function () {
}

हालांकि संपत्ति फ़ंक्शन fएक संदर्भ देता है anonymous functionऔर नहींinstance:x , यह विधि इस समाधान के साथ कई समस्याओं से बचाती है ।

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

केवल प्रदर्शित करता है

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

एम्बेडेड :जावास्क्रिप्ट को function instance:a(){}अमान्य बनाता है ।
एक संदर्भ के बजाय, फ़ंक्शन की वास्तविक पाठ परिभाषा पार्स और व्याख्या की गई है eval ।

निम्नलिखित समस्याग्रस्त नहीं है,

instanceAसमारोह के रूप में उपयोग के लिए सीधे उपलब्ध नहीं होताinstanceA()

और इसलिए मूल समस्या के संदर्भ में बहुत अधिक संगत है।

इन विचारों को देखते हुए,

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

ओपी उदाहरण के शब्दार्थ और वाक्य विन्यास के साथ वैश्विक कंप्यूटिंग वातावरण को यथासंभव बनाए रखता है।

Question 9

सबसे अधिक वोट किए गए उत्तर को पहले ही परिभाषित [स्ट्रिंग] फ़ंक्शन बॉडी मिल गई है। मैं पहले से ही घोषित समारोह का नाम बदलने के समाधान की तलाश में था और आखिरकार एक घंटे के संघर्ष के बाद मैंने इससे निपटा। यह:

अल्रेदी घोषित समारोह लेता है
इसे [स्ट्रिंग] के साथ पार्स करता है .toString() विधि के
फिर नाम (नामांकित फ़ंक्शन का) को अधिलेखित करता है या नए और (जब अनाम)function और के बीच जोड़ता है(
फिर नए नामांकित फ़ंक्शन को new Function()निर्माता के साथ बनाता है

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){...}

स्निपेट का विस्तार करें

Question 10

ECMAScript 2015 (ES6) द्वारा प्रदान की गई वस्तु शाब्दिक एक्सटेंशन का उपयोग करके किसी वस्तु के गतिशील तरीके बनाए जा सकते हैं:

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);

ऊपर कोड चलाने का आउटपुट है:

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

Question 11

मौजूदा अनाम फ़ंक्शन का नाम सेट करने के लिए :
(@ मार्कोस के उत्तर पर आधारित)

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

डेमो ।

नोट : यह मत करो /

Question 12

इसे प्राप्त करने के दो तरीके हैं, और उनके पास अपने पेशेवरों और विपक्ष हैं।

`name` संपत्ति की परिभाषा

किसी फ़ंक्शन की अपरिवर्तनीय name संपत्ति को परिभाषित करना ।

पेशेवरों

नाम के लिए हर पात्र उपलब्ध है। (उदाहरण। () 全 {}/1/얏호/ :D #GO(@*#%! /*)

विपक्ष

फ़ंक्शन का सिंटैक्टिक ("अभिव्यंजक") नाम उसके nameगुण मान के अनुरूप नहीं हो सकता है ।

समारोह अभिव्यक्ति मूल्यांकन

एक नामित फ़ंक्शन अभिव्यक्ति बनाना और इसके साथ मूल्यांकन करनाFunction निर्माण ।

पेशेवरों

फ़ंक्शन का सिंटैक्टिक ("अभिव्यंजक") नाम हमेशा उसके nameगुण मान से मेल खाता है ।

विपक्ष

नाम के लिए व्हाट्सएप (और आदि) उपलब्ध नहीं हैं।
अभिव्यक्ति-इंजेक्शन योग्य (उदाहरण के लिए (){}/1//, इनपुट के लिए , अभिव्यक्ति एक फ़ंक्शन के बजाय return function (){}/1//() {}देता 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

Question 13

यदि आप __callPHP में फ़ंक्शन की तरह एक गतिशील फ़ंक्शन करना चाहते हैं , तो आप प्रॉक्सी का उपयोग कर सकते हैं।

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
})()

Question 14

आप इस तरह डायनामिक फंक्शन नाम और मापदंडों का उपयोग कर सकते हैं।

1) फ़ंक्शन को अलग करें और इसे कॉल करें

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

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

func(param);

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

2) फ़ंक्शन कोड डायनामिक परिभाषित करें

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);

Question 15

धन्यवाद मार्कोस! यदि आप किसी भी फ़ंक्शन का नाम बदलना चाहते हैं, तो उसके उत्तर पर बिल्डिंग का उपयोग करें:

// 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)
}

Question 16

यह उपयोगिता फ़ंक्शन कई कार्यों को एक (एक कस्टम नाम का उपयोग करके) मर्ज करता है, केवल आवश्यकता यह है कि प्रदान किए गए फ़ंक्शन ठीक से अपने स्कूप की शुरुआत और अंत में "नए पंक्तिबद्ध" हैं।

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

Question 17

डैरेन के उत्तर और कर्निटिको के उत्तर के संयोजन में मेरे पास बेहतर भाग्य था ।

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

स्निपेट का विस्तार करें

नोट: Function.name ^{1 के} लिए मानक ES2015 कल्पना से मेल खाने के लिए configurableसेट हैtrue

यह विशेष रूप से इस के समान वेबपैक में एक त्रुटि के आसपास होने में मदद करता है ।

अद्यतन: मैं इसे एक npm पैकेज के रूप में प्रकाशित करने के बारे में सोच रहा था, लेकिन सिंदोरसोरस से यह पैकेज बिल्कुल वैसा ही काम करता है।

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

Question 18

मैंने इस मुद्दे पर बहुत संघर्ष किया। @ एलबिन समाधान ने विकास करते समय एक आकर्षण की तरह काम किया, लेकिन जब मैंने इसे उत्पादन में बदला तो यह काम नहीं किया। कुछ डिबगिंग के बाद मुझे एहसास हुआ कि मुझे क्या हासिल करना है। मैं CRA (क्रिएट-रिएक्शन-ऐप) के साथ ES6 का उपयोग कर रहा हूं, जिसका अर्थ है कि यह वेबपैक द्वारा बंडल किया गया है।

कहते हैं कि आपके पास एक फ़ाइल है जो आपके लिए आवश्यक कार्यों का निर्यात करती है:

myFunctions.js

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

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

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

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

और आपको गतिशील रूप से इन कार्यों को कहीं और कॉल करने की आवश्यकता है:

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);
          }
        }
      }
    }
  }
}

Question 19

गतिशील कार्यों की सूची के साथ ऑब्जेक्ट बनाने का सबसे अच्छा तरीका है:

const USER = 'user';

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

Question 20

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

var name = 'myFunction';

window[name].call();

Question 21

मुझे यहाँ स्पष्ट याद आ रही है, लेकिन सिर्फ नाम जोड़ने में क्या गलत है? उनके नाम की परवाह किए बिना कार्य किए जाते हैं। नामों का इस्तेमाल सिर्फ डांटने के कारणों के लिए किया जाता है। यदि आप इसे किसी वैरिएबल पर असाइन करते हैं, और यह स्कोप में है, तो इसे कॉल किया जा सकता है। टोपी होती है, आपका एक चर निष्पादित होता है जो एक फ़ंक्शन होता है। यदि आपके पास डीबग करते समय पहचान के कारणों के लिए एक नाम होना चाहिए, तो इसे कीवर्ड फ़ंक्शन और शुरुआती ब्रेस के बीच डालें।

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

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

स्निपेट का विस्तार करें

एक वैकल्पिक दृष्टिकोण बाहरी पुनर्निर्मित शिम में फ़ंक्शन को लपेटना है, जिसे आप बाहरी आवरण में भी पास कर सकते हैं, यदि आप आसपास के नाम स्थान को गंदा नहीं करना चाहते हैं। यदि आप वास्तव में गतिशील रूप से फ़ंक्शन को स्ट्रिंग्स से बनाना चाहते हैं (जो कि इन उदाहरणों में से अधिकांश करते हैं), यह स्रोत का नाम बदलने के लिए तुच्छ है जो आप चाहते हैं। यदि फिर भी आप अपनी कार्यक्षमता को प्रभावित किए बिना मौजूदा कार्यों का नाम बदलना चाहते हैं, तो इसे कहीं और प्राप्त करने का एकमात्र तरीका है।

(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};

स्निपेट का विस्तार करें

Question 22

आप पास थे:

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

{...};

Question 23

यह सबसे अच्छा समाधान है, तो बेहतर है new Function('return function name(){}')()।

सबसे तेज़ समाधान है:

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

जावास्क्रिप्ट में डायनामिक फ़ंक्शन नाम?

अपडेट करें

name संपत्ति की परिभाषा

पेशेवरों

विपक्ष

समारोह अभिव्यक्ति मूल्यांकन

पेशेवरों

विपक्ष

`name` संपत्ति की परिभाषा