Definisi fungsi JavaScript
JavaScript menggunakan fungsi kata kunci untuk mentakrifkan fungsi.
Fungsi boleh ditakrifkan melalui pengisytiharan atau ia boleh menjadi ungkapan.
Pengisytiharan fungsi
Dalam tutorial sebelumnya, anda sudah mengetahui sintaks pengisytiharan fungsi:
function functionName(parameters) {
Executed code
}
Fungsi tidak akan dilaksanakan sejurus selepas ia diisytiharkan, tetapi akan dipanggil apabila kita memerlukannya.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>Jalankan program dan cuba
Petua: The koma bertitik Digunakan untuk memisahkan penyataan JavaScript boleh laku Memandangkan perisytiharan fungsi bukan penyataan boleh laku, ia tidak berakhir dengan koma bertitik.
Ekspresi fungsi
Fungsi JavaScript boleh ditakrifkan melalui ungkapan.
Ungkapan fungsi boleh disimpan dalam pembolehubah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Jalankan atur cara untuk mencubanya
Selepas ungkapan fungsi disimpan dalam pembolehubah, pembolehubah boleh juga digunakan sebagai fungsi Gunakan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>Jalankan atur cara untuk mencubanya
Fungsi di atas sebenarnya adalah fungsi tanpa nama (fungsi itu tidak mempunyai nama).
Fungsi disimpan dalam pembolehubah dan tidak memerlukan nama fungsi Ia biasanya dipanggil melalui nama pembolehubah.
Petua: Fungsi di atas berakhir dengan koma bertitik kerana ia adalah pernyataan pelaksanaan.
Function() constructor
Dalam contoh di atas, kami mengetahui bahawa fungsi ditakrifkan melalui fungsi kata kunci .
Fungsi juga boleh ditakrifkan melalui pembina fungsi JavaScript terbina dalam (Function()).
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Jalankan program untuk mencubanya
Petua: Dalam JavaScript, banyak kali, anda perlu mengelak daripada menggunakan kata kunci baharu.
Sebenarnya, anda tidak perlu menggunakan pembina. Contoh di atas boleh ditulis sebagai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Jalankan program dan cuba
Fungsi Mengangkat (Hoisting)
Dalam tutorial sebelum ini kita telah mempelajari tentang "hoisting".
Mengangkat ialah tingkah laku lalai JavaScript untuk menaikkan skop semasa ke hadapan.
Hoisting digunakan pada pengisytiharan berubah-ubah dan pengisytiharan fungsi.
Oleh itu, fungsi boleh dipanggil sebelum pengisytiharan:
myFunction(5);
function myFunction(y) {
return y * y;
}
Tidak boleh dinaikkan pangkat apabila mentakrifkan fungsi menggunakan ungkapan.
Fungsi panggilan kendiri
Ekspresi fungsi boleh "memanggil diri".
Ekspresi panggilan sendiri dipanggil secara automatik.
Dipanggil secara automatik jika ungkapan diikuti dengan () .
Tidak boleh memanggil sendiri fungsi yang diisytiharkan.
Tunjukkan bahawa ia adalah ungkapan fungsi dengan menambah kurungan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>Jalankan atur cara untuk mencubanya
Fungsi di atas sebenarnya adalah fungsi panggilan kendiri tanpa nama (tiada nama fungsi).
Fungsi boleh digunakan sebagai nilai
Fungsi JavaScript boleh digunakan sebagai nilai:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Jalankan atur cara untuk mencubanya
Fungsi JavaScript boleh digunakan sebagai ungkapan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Jalankan program dan cuba
Fungsi ialah objek
Gunakan operator jenis dalam JavaScript untuk menentukan jenis fungsi akan mengembalikan "fungsi".
Tetapi adalah lebih tepat untuk menerangkan fungsi JavaScript sebagai objek.
Fungsi JavaScript mempunyai sifat dan kaedah.
Sifatarguments.length mengembalikan bilangan parameter yang diterima semasa panggilan fungsi:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Jalankan program dan cuba ia
kaedah toString() mengembalikan fungsi sebagai rentetan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>Jalankan program ke cubalah
Petua: Fungsi yang ditakrifkan sebagai atribut objek dipanggil kaedah objek Jika fungsi itu digunakan untuk mencipta objek baharu, ia dipanggil pembina objek.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
