'JavaScript diperibadikan': Fungsi, objek, dan kaedah yang ditentukan pengguna

Sebagai bahasa pengaturcaraan moden, JavaScript menyokong kepanjangan penuh dengan membiarkan anda menentukan fungsi anda sendiri. Ini membolehkan anda membuat rutin yang boleh anda gunakan berulang kali. Anda menjimatkan masa dalam menggunakan kembali "komponen" umum dan dengan merancang fungsi anda sendiri, anda dapat memperluas bahasa asas JavaScript untuk memenuhi keperluan anda. Anggaplah ia sebagai "JavaScript yang diperibadikan."

Karena JavaScript didasarkan pada objek, fungsi JavaScript dapat dengan mudah diubah menjadi objek, dan metode untuk objek tersebut. Oleh itu, bukan sahaja anda dapat membuat objek yang ditentukan pengguna untuk melakukan penawaran anda, anda juga dapat membuat objek anda sendiri yang berkelakuan tepat seperti yang anda mahukan. Dan anda boleh membuat kaedah yang bertindak terhadap objek tersebut. Walaupun ini terdengar hebat - dan sebenarnya - proses membuat fungsi, objek, dan kaedah sangat mudah dalam JavaScript.

Memperkenalkan fungsi

Gunakan pernyataan fungsi untuk membuat fungsi JavaScript anda sendiri. Sintaks tulang kosong adalah:

nama fungsi ( params ) { ... barang fungsi ... }
  • nama adalah nama unik fungsi. Semua nama fungsi dalam skrip mestilah unik.
  • params adalah satu atau lebih pembolehubah parameter anda lulus ke majlis itu.
  • fungsi barang adalah arahan yang dijalankan oleh fungsi. Anda boleh meletakkan hampir semua perkara di sini.

Perhatikan watak pendakap {dan}; ini menentukan blok fungsi , dan sangat diperlukan. Pendakap memberitahu JavaScript di mana fungsi bermula dan berakhir. Tanda kurung sekitar parameter juga diperlukan. Sertakan tanda kurung walaupun fungsi tidak menggunakan parameter (dan banyak yang tidak).

Nama untuk fungsi yang ditentukan pengguna bergantung kepada anda, selagi anda hanya menggunakan aksara alfanumerik (watak garis bawah _ juga dibenarkan). Nama fungsi mesti dimulakan dengan aksara huruf, tetapi boleh memasukkan nombor di tempat lain dalam nama tersebut.

Saya terjebak dengan gaya huruf besar nama fungsi JavaScript - iaitu huruf kecil awal, kemudian huruf besar jika nama fungsi terdiri dari kata gabungan. Sebagai contoh, myFuncName, yourFuncName, atau theirFuncName. Nama fungsi peka huruf besar kecil; pastikan untuk menggunakan huruf besar yang sama semasa anda merujuk fungsi di tempat lain dalam skrip. JavaScript dianggap myFuncberbeza daripada Myfunc.

Untuk membezakan antara fungsi dan pemboleh ubah, saya lebih suka memberikan pemboleh ubah saya huruf besar awal, seperti MyStuff. Ini langsung membezakannya dari fungsi, yang akan menggunakan huruf besar myStuff. Sudah tentu, anda bebas untuk menggunakan skim permodalan yang anda mahukan.

Mendefinisikan dan menggunakan fungsi

Kaedah terbaik untuk menerangkan bagaimana dan mengapa fungsi adalah dengan menunjukkan yang ringkas dalam tindakan. Inilah fungsi asas yang memaparkan "Hello, JavaScripters!" dan merupakan landasan jelas di "Hello World!" contoh yang anda lihat untuk bahasa pengaturcaraan baru.

function basicFunction () {alert ("Hello JavaScripters!"); }

Ini hanya menentukan fungsi. JavaScript tidak akan melakukan apa-apa kecuali fungsi tersebut dirujuk di tempat lain dalam skrip. Anda mesti memanggil fungsi untuk menggunakannya. Memanggil fungsi yang ditentukan pengguna sama dengan memanggil fungsi JavaScript bawaan - anda hanya memberikan nama fungsi dalam skrip anda. Ini berfungsi sebagai fungsi panggilan. Apabila JavaScript menemui panggilan fungsi, ia akan berhenti untuk menyelesaikan apa sahaja arahan yang ada dalam fungsi tersebut. Apabila fungsi selesai, JavaScript kembali ke titik segera setelah panggilan fungsi, dan memproses baki skrip.

Untuk memanggil fungsi di atas, cukup sertakan teks basicFunction () - perhatikan tanda kurung kosong, seperti yang diperlukan. Berikut adalah contoh kerja program Hello JavaScripters.

Fungsi Asas Contoh fungsi basicFunction () {alert ("Hello JavaScripters!"); }

asasFungsi ();

Halaman telah dimuatkan.

Penyemak imbas memproses kandungan tag semasa dokumen dimuatkan. Ketika bertemu basicFunction()fungsi panggilan, berhenti seketika untuk memproses fungsi, dan kotak amaran muncul. Klik OK dan baki halaman selesai dimuat.

Memanggil fungsi dengan pengendali acara

Cara biasa memanggil fungsi adalah dengan memasukkan rujukan kepadanya dalam butang borang atau pautan hiperteks. Memproses fungsi yang ditentukan pengguna apabila pengguna mengklik butang borang mungkin yang paling mudah. Anda menggunakan pengendali peristiwa onClick untuk memberitahu JavaScript bahawa apabila pengguna mengklik butang, fungsi yang ditentukan harus diproses. Berikut adalah versi yang disemak semula dari contoh sebelumnya, yang menunjukkan bagaimana fungsi asas dipanggil apabila butang borang diklik.

Fungsi Asas Contoh fungsi basicFunction () {alert ("Hello JavaScripters!"); }

Fungsi Klik untuk memanggil.

Perhatikan sintaks onClick dalam teg. Acara yang ingin anda proses dengan klik adalah panggilan untuk basicFunction. Acara ini dikelilingi oleh petikan berganda.

Menyerahkan nilai ke fungsi

Fungsi JavaScript menyokong nilai lulus - atau parameter - kepada mereka. Nilai-nilai ini dapat digunakan untuk pemprosesan dalam fungsi. Sebagai contoh, daripada mempunyai kotak amaran, katakan "Hello JavaScripters!" setiap kali anda memanggilnya, anda boleh memintanya mengatakan apa sahaja yang anda suka. Teks yang akan ditampilkan dapat disampaikan sebagai parameter fungsi.

Untuk meneruskan parameter ke fungsi, berikan nama variabel sebagai parameter dalam definisi fungsi. Anda kemudian menggunakan nama pemboleh ubah itu di tempat lain dalam fungsi. Sebagai contoh:

fungsi asasContoh (Teks) {amaran (Teks); }

Nama pemboleh ubah adalah Text, dan didefinisikan sebagai parameter untuk fungsi tersebut. Pemboleh ubah tersebut kemudian digunakan sebagai teks untuk dipaparkan di kotak amaran. Semasa memanggil fungsi, berikan teks yang ingin anda tunjukkan sebagai parameter fungsi panggilan:

basicExample ("Ini mengatakan apa sahaja yang saya mahukan"); 

Menyerahkan pelbagai nilai ke fungsi

Anda boleh meneruskan beberapa parameter ke fungsi. Seperti fungsi dan kaedah JavaScript bawaan, pisahkan parameter dengan koma:

berbilangParam ("satu", "dua"); ... fungsi berbilangParam (Param1, Param2) {...

Apabila anda menentukan fungsi dengan beberapa parameter, pastikan parameter tersebut disenaraikan dalam urutan yang sama dalam panggilan fungsi. Jika tidak, kod JavaScript anda mungkin menerapkan parameter pada pemboleh ubah yang salah, dan fungsi anda tidak akan berfungsi dengan baik.

Here's a working example of a function with multiple parameters. It takes two parameters: an input string and a number value. The number value indicates how many characters on the left of the string you want to display in the alert box. When you run the following script, the alert box displays "This is" -- the first seven characters of the input string.

Global Variable Example lefty ("This is a test", 7);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); alert (OutString); }

Returning a value from a function

The functions described so far don't return a value; that is, they do whatever magic you want them to do, then end. No "output" value is provided by the function. In some other languages, such return-less functions are called subroutines. However, in JavaScript (like in C and C++), "functions are functions" whether or not they return a value.

It's easy to return a value from a function: use the return statement, along with the value you wish to return. This is handy when you want your function to churn through some data and return the processed result. Take the "lefty" function from above. Instead of displaying the chopped-off string, you can return it to the calling function, and use the return value any way you want.

Global Variable Example var Ret = lefty ("This is a test", 7); alert (Ret);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); return (OutString); }

This script does essentially the same one as the previous example, but instead of always displaying the chopped-off text, the function merely returns the processed value. The return value is captured in a variable, and you are free to use that variable in any way you wish. The above shows the Ret variable used with an alert box, but you can use it in other ways, too. For example, you can write the contents of the Ret variable using the document.write method:

document.write (Ret); 

Defining local variables within functions

By default all JavaScript variables are declared global for the document that created them. That means when you define a variable in a function, it is also "visible" to any other portion of the script on that document. For example, in the following global variable test, the variable test is visible to the showVar function, even though the variable is defined in the loadVar function.

Global Variable Example

function showVar () { alert (test) }

function loadVar () { test = "6" }

loadVar();

Click to call function.

Global variables aren't always what you want. Instead, you want variables that are local to the function. These variables exist only as long as JavaScript is processing the function. When it exits the function, the variables are lost. In addition, a local variable of a given name is treated as a separate entity from a global variable of the same name. In this way, you don't have to worry about reuse of variable names. The local variable in the function won't have any effect on the global variable used elsewhere in the script.

To declare a local variable, add the var keyword to the beginning of the variable name in the function. This tells JavaScript you want to make the variable local to that function. As a test, change the loadVar function above to the following, and re-load the script. When you click the button, JavaScript tells you the variable doesn't exist. This is because test is only local to the loadVar function, and does not exist outside the function.

function loadVar () { var test = "6" } 

Calling one function from another function

Code inside a function behaves just like code anywhere else. This means you can call one function from inside another function. This allows you to "nest" functions so that you can create separate functions, which each perform a specific task, and then run them together as a complete process, one right after the other. For example, here's a function that calls three other mythical functions, each one returning a string of text that has been altered in some way.

function run () { var Ret = changeText ("Change me"); alert (Ret); document.write (Ret); } function changeText (Text) { Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); return (Text); } function makeBold (InString) { return (InString.bold()); } function makeItalics (InString) { return (InString.italics()); } function makeBig (InString) { return (InString.big()); } 

Creating objects with user-defined functions

JavaScript is based on objects: the window is an object, links are objects, forms are objects, even Netscape itself (or other browser) is an object. Using objects can help make programming easier and more streamlined. You can extend the use of objects in JavaScript by making your own. The process uses functions in a slightly modified way. In fact, you'll be surprised how easy it is to make your own JavaScript objects.

Making a new object entails two steps:

  • Define the object in a user-defined function.
  • Use the new keyword to create (or instantiate) the object with a call to the object function.

Here's an example of the world's simplest user-defined JavaScript object:

// this part creates a new object ret = new makeSimpleObject();

// this part defines the object function makeSimpleObject() {}

I've called the new object ret; use any valid variable name for the new object (I use lower-case letters for variables that contain objects, so it's easier to tell that the variable contains an object).

You can use the same object function to create any number of new objects. For instance, these lines create four new and separate objects: eenie, meenie, minie, and moe:

eenie = new makeSimpleObject(); meenie = new makeSimpleObject(); minie = new makeSimpleObject(); moe = new makeSimpleObject(); 

Sebenarnya, bahkan ada jalan pintas ke "objek JavaScript termudah di dunia" di atas. Anda tidak perlu menentukan fungsi objek untuk membuat objek tanpa tulang. JavaScript menyokong objek Objek Umum (), yang dapat anda gunakan untuk membuat objek baru. Yang berikut melakukan perkara yang sama seperti di atas, tanpa fungsi objek eksplisit:

eenie = Objek baru (); 

Mendefinisikan sifat baru untuk objek yang sudah dibuat