জাভাস্ক্রিপ্টে গতিশীল ফাংশন নাম?

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] তে উল্লিখিত হিসাবে আপনি অবজেক্ট.ডেফাইনপ্রোটারিটি ব্যবহার করতে পারেন:

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/ উল্লেখ / গ্লোবাল_অবজেক্টস / ফাংশন / নাম# বিবরণ

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

আমি মনে করি এখানে বেশিরভাগ পরামর্শগুলি ইওল, হ্যাকি সমাধান বা মোড়ক ব্যবহার করে suboptimal হয়। 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(){};

কেবলমাত্র ত্রুটিটি হ'ল এর টোসোর্স পদ্ধতিতে ফাংশনটি কোনও নাম নির্দেশ করে না। এটি সাধারণত ডিবাগারদের জন্য সমস্যা।

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

আপনি যদি __callপিএইচপি-তে ফাংশনের মতো ডায়নামিক ফাংশন রাখতে চান তবে আপনি প্রক্সি ব্যবহার করতে পারেন।

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

স্নিপেট প্রসারিত করুন

দ্রষ্টব্য: ফাংশন.নাম ^{1 এর} জন্য ES2015 স্ট্যান্ডার্ডের সাথে মান মেলে configurableসেট করা trueআছে

এটি বিশেষত অনুরূপ Webpack একটি ত্রুটি প্রায় পেতে সাহায্য করেছে এই এক ।

আপডেট: আমি এটিকে এনপিএম প্যাকেজ হিসাবে প্রকাশের কথা ভাবছিলাম, তবে সিন্ড্রেসরাস থেকে এই প্যাকেজটি ঠিক একই কাজ করে।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/ উল্লেখ / গ্লোবাল_অবজেক্টস / ফাংশন / নাম

Question 18

এই ইস্যু নিয়ে আমি অনেক লড়াই করেছি। @ অ্যালবিন দ্রবণটি বিকাশের সময় মনোযোগের মতো কাজ করেছিল, কিন্তু আমি যখন এটির উত্পাদনতে পরিবর্তন করেছি তখন তা কার্যকর হয়নি। কিছু ডিবাগিংয়ের পরে আমি বুঝতে পারি কীভাবে আমার প্রয়োজনীয়তা অর্জন করা যায়। আমি সিআরএ (ক্রিয়েট-রিএ্যাক্ট-অ্যাপ) দিয়ে ES6 ব্যবহার করছি, যার অর্থ এটি ওয়েবপ্যাক দ্বারা বান্ডিল হয়েছে।

বলুন আপনার কাছে এমন একটি ফাইল রয়েছে যা আপনার প্রয়োজনীয় ফাংশনগুলি রপ্তানি করে:

myFunitions.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` সম্পত্তি সংজ্ঞা