Rumah >hujung hadapan web >tutorial js >Cara memanggil fungsi JavaScript dari rentetan tanpa menggunakan eval

Cara memanggil fungsi JavaScript dari rentetan tanpa menggunakan eval

Lisa Kudrow
Lisa Kudrowasal
2025-02-22 10:40:10763semak imbas

How to Call a JavaScript Function From a String Without Using eval

Dalam JavaScript,

bukan idea yang baik! Halaman eval MDN menyatakan: & gt; Walaupun penyemak imbas masih menyokongnya, ia tidak disyorkan dalam projek baru. Cuba elakkan menggunakannya. eval

Jalankan rentetan yang mengandungi kod, contohnya: eval

<code class="language-javascript">eval("var x = 'Hello from eval!';");
console.log(x);</code>

Beberapa masalah akan timbul: eval

  1. Keselamatan: Rentetan anda boleh disuntik ke dalam arahan lain oleh skrip pihak ketiga atau input pengguna.
  2. Debug: Sukar untuk debug ralat - anda tidak mempunyai nombor baris atau titik kesalahan yang jelas.
  3. Pengoptimuman: JavaScript Interpreter tidak semestinya dapat pretompile kod kerana ia mungkin berubah. Walaupun jurubahasa semakin cekap, ia hampir pasti berjalan lebih perlahan daripada kod asli.
Malangnya,

adalah pemaju yang sangat kuat dan tidak berpengalaman dengan mudah boleh menggunakan perintah ini dengan mudah. Walaupun amaran, eval masih berfungsi - walaupun dalam mod yang ketat - tetapi biasanya anda boleh mengelakkannya. Pada masa lalu, ia digunakan terutamanya untuk deserialize json rentetan, tetapi kami kini mempunyai kaedah yang lebih selamat eval. Walau bagaimanapun, jika kita mempunyai nama fungsi dalam rentetan, contohnya: JSON.parse

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}</code>
Bagaimana kita melaksanakan fungsi

tanpa menggunakan eval? Saya baru -baru ini menemui ini semasa menggunakan API Sejarah HTML5; Anda mungkin menghadapi cabaran yang sama apabila menggunakan pekerja web atau API lain yang bersiri objek. runMe() pushState Penyelesaian pelaksanaan yang paling mudah dan paling selamat tanpa

adalah satu siri syarat, seperti:

eval

Ia selamat, tetapi ia agak tidak cekap dan sakit kepala untuk menulis jika anda mahu memanggil berpuluh -puluh fungsi. Penyelesaian yang lebih baik ialah menggunakan objek
<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}</code>
, yang merujuk kepada tetingkap semasa dan semua item di dalamnya. Kita boleh menyemak sama ada

boleh didapati sebagai objek dalam window dan jika ia berfungsi, jalankan, contohnya: fnstring window

Jika perlu, anda boleh melakukan pemeriksaan tambahan untuk memastikan fungsi tersebut mempunyai nama yang diharapkan. Bagaimana jika fungsi yang kita panggil mempunyai parameter - mungkin disimpan dalam array? Tiada masalah;
<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

// 查找对象
var fn = window[fnstring];

// 对象是否为函数?
if (typeof fn === "function") fn();</code>

Jadi ini adalah satu lagi sebab untuk berhenti menggunakan apply. Di samping itu, penyelesaian ini lebih selamat, mempunyai kesilapan yang lebih sedikit, lebih mudah untuk debug, dan selalunya lebih cepat untuk dilaksanakan. Semoga ia dapat membantu anda.

Soalan Lazim untuk melaksanakan fungsi JavaScript dari rentetan tanpa menggunakan eval

Apakah maksud memanggil fungsi JavaScript dengan rentetan tanpa menggunakan eval()?

Fungsi eval() dalam JavaScript adalah alat yang berkuasa yang membolehkan anda melaksanakan rentetan kod sewenang -wenangnya. Walau bagaimanapun, dengan menggunakan eval() sering dianggap sebagai amalan buruk kerana isu keselamatan dan prestasi. Ia boleh membuat kod anda terdedah kepada serangan suntikan. Di samping itu, enjin JavaScript moden mengoptimumkan prestasi kod, tetapi mereka tidak dapat mengoptimumkan kod yang dilaksanakan oleh eval(). Oleh itu, sangat bermanfaat untuk mengetahui cara memanggil fungsi JavaScript dengan rentetan tanpa menggunakan eval(). Ini boleh dicapai dengan menggunakan objek window atau Function pembina, yang lebih selamat dan alternatif yang lebih cekap.

bagaimana menggunakan objek window untuk memanggil fungsi JavaScript menggunakan rentetan?

objek window dalam JavaScript mewakili tetingkap yang dipaparkan oleh penyemak imbas. Ia adalah objek global dalam persekitaran penyemak imbas, dan semua pembolehubah dan fungsi global menjadi atribut dan kaedah objek window. Anda boleh menggunakan objek window untuk memanggil fungsi menggunakan rentetan dengan mengakses fungsi sebagai sifat objek window. Berikut adalah contoh:

<code class="language-javascript">eval("var x = 'Hello from eval!';");
console.log(x);</code>

Dalam kod ini, "Hello" adalah harta objek window, yang merujuk kepada fungsi hello(). Oleh itu, window["hello"] memanggil fungsi hello().

Apakah pembina Function, bagaimana anda menggunakannya untuk memanggil fungsi menggunakan rentetan?

Pembina Function dalam JavaScript mencipta objek Function baru. Ini adalah cara yang kurang biasa tetapi masih berkesan untuk menentukan fungsi. Anda boleh menggunakan pembina Function untuk memanggil fungsi menggunakan rentetan dengan lulus rentetan kepada pembina. Berikut adalah contoh:

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}</code>

Dalam kod ini, pembina Function mencipta fungsi baru yang mengambil dua argumen "A" dan "B" dan mengembalikan jumlah mereka. Parameter dan badan fungsi diluluskan sebagai rentetan.

Jika fungsi adalah beberapa kaedah objek, bolehkah saya memanggil fungsi menggunakan rentetan?

Ya, anda boleh memanggil fungsi menggunakan rentetan walaupun fungsi itu adalah beberapa kaedah objek. Anda boleh melakukan ini dengan mengakses sifat objek, yang serupa dengan cara anda mengendalikan window objek. Berikut adalah contoh:

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}</code>

Dalam kod ini, "Hello" adalah harta objek obj, yang merujuk kaedah hello(). Oleh itu, obj["hello"] memanggil kaedah hello().

Apakah batasan memanggil fungsi JavaScript menggunakan rentetan?

Walaupun ia mungkin berguna dalam beberapa kes untuk memanggil fungsi JavaScript menggunakan rentetan, ia juga mempunyai beberapa batasan. Satu batasan ialah ia hanya terpakai kepada kaedah fungsi global atau objek yang diketahui. Jika fungsi itu bukan harta benda yang diketahui, ia tidak boleh dipanggil dengan rentetan. Batasan lain ialah anda tidak boleh lulus parameter terus ke fungsi. Jika fungsi menerima parameter, anda perlu memasukkannya ke dalam rentetan, atau menggunakan fungsi lain untuk menyampaikannya. Walaupun batasan ini, panggilan fungsi dengan rentetan masih merupakan alat yang kuat apabila digunakan dengan betul.

Atas ialah kandungan terperinci Cara memanggil fungsi JavaScript dari rentetan tanpa menggunakan eval. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn