Panggilan fungsi JavaScript
Terdapat 4 cara untuk memanggil fungsi JavaScript.
Perbezaan antara setiap kaedah terletak pada permulaan ini.
kata kunci ini
Secara umumnya, dalam Javascript, ini menunjuk ke objek semasa apabila fungsi itu dilaksanakan.
Nota: ini ialah kata kunci terpelihara, anda tidak boleh mengubah suai nilai ini.
Panggil fungsi JavaScript
Dalam bab sebelumnya kita telah mempelajari cara mencipta fungsi.
Kod dalam fungsi dilaksanakan selepas fungsi dipanggil.
Panggil sebagai fungsi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>Jalankan atur cara untuk mencubanya
Fungsi di atas bukan milik mana-mana objek. Tetapi dalam JavaScript ia sentiasa menjadi objek global lalai.
Objek global lalai dalam HTML ialah halaman HTML itu sendiri, jadi fungsi itu tergolong dalam halaman HTML.
Objek halaman dalam penyemak imbas ialah tetingkap penyemak imbas (objek tetingkap). Fungsi di atas secara automatik akan menjadi fungsi objek tetingkap.
myFunction() dan window.myFunction() adalah sama:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>Jalankan program dan cuba ia
Petua: Ini ialah kaedah biasa untuk memanggil fungsi JavaScript, tetapi ia bukan amalan pengaturcaraan yang baik Pembolehubah, kaedah atau fungsi global boleh menyebabkan pepijat konflik dengan mudah.
Objek global
Apabila fungsi tidak dipanggil oleh objeknya sendiri, nilai ini akan menjadi objek global.
Dalam pelayar web, objek global ialah tetingkap penyemak imbas (objek tetingkap).
Nilai ini dikembalikan oleh kejadian ini ialah objek tetingkap:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>Jalankan program dan cuba ia
Nota: Memanggil fungsi sebagai objek global akan menjadikan nilai ini objek global. Menggunakan objek tetingkap sebagai pembolehubah boleh menyebabkan program ranap dengan mudah.
Fungsi sebagai kaedah panggilan
Dalam JavaScript anda boleh mentakrifkan fungsi sebagai kaedah objek.
Contoh berikut mencipta objek (myObject), yang mempunyai dua sifat (firstName dan lastName), dan satu kaedah (fullName):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>Jalankan atur cara dan cuba
kaedah fullName ialah fungsi. Fungsi kepunyaan objek. myObject ialah pemilik fungsi tersebut.
Objek ini memegang kod JavaScript. Nilai ini dalam contoh ialah objek myObject.
Uji di bawah! Ubah suai kaedah Nama penuh dan kembalikan nilai ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>Jalankan atur cara dan cuba
Petua: Apabila fungsi dipanggil sebagai kaedah objek, nilai ini akan menjadi objek itu sendiri.
Gunakan pembina untuk memanggil fungsi
Jika kata kunci baharu digunakan sebelum panggilan fungsi, pembina dipanggil.
Ini kelihatan seperti fungsi baharu dicipta, tetapi sebenarnya fungsi JavaScript ialah objek yang dicipta semula:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName;
</script>
</body>
</html>Jalankan atur cara dan cuba
Panggilan kepada pembina akan mencipta objek baharu. Objek baru mewarisi sifat dan kaedah pembina.
Petua: Kata kunci ini dalam pembina tidak mempunyai sebarang nilai. Nilai ini dicipta apabila objek (objek baru) dijadikan instantiated apabila fungsi dipanggil.
Panggil fungsi sebagai kaedah fungsi
Dalam JavaScript, fungsi ialah objek. Fungsi JavaScript mempunyai sifat dan kaedahnya.
call() dan apply() ialah kaedah fungsi yang dipratentukan. Dua kaedah boleh digunakan untuk memanggil fungsi, dan parameter pertama kedua-dua kaedah mestilah objek itu sendiri.
fungsi myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2);
fungsi myFunction(a, b) {return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray ); // Kembali 20
Kedua-dua kaedah menggunakan objek itu sendiri sebagai parameter pertama. Perbezaan antara kedua-duanya terletak pada parameter kedua: gunakan pas dalam tatasusunan parameter, iaitu, berbilang parameter digabungkan menjadi tatasusunan dan dihantar masuk, manakala panggilan diluluskan sebagai parameter panggilan (bermula dari parameter kedua).
Dalam mod ketat JavaScript (mod ketat), parameter pertama akan menjadi nilai ini apabila memanggil fungsi, walaupun parameter itu bukan objek.
Dalam mod tidak ketat JavaScript, jika nilai parameter pertama adalah batal atau tidak ditentukan, ia akan menggunakan objek global sebaliknya.
Petua: Melalui kaedah call() atau apply() anda boleh menetapkan nilai ini dan memanggilnya sebagai kaedah baharu bagi objek sedia ada.
![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)
