cari
Rumahhujung hadapan webtutorial jsIkuti saya untuk mempelajari panggilan fungsi javascript dan kemahiran calls_javascript pembina

1. Panggilan fungsi
Fungsi sememangnya perkara yang paling penting dalam JavaScript. Dalam JavaScript, Function menganggap fungsi prosedur, kaedah, pembina dan juga kelas dan modul.

Dalam pengaturcaraan berorientasikan objek, fungsi, kaedah dan pembina kelas selalunya tiga perkara berbeza, dilaksanakan oleh sintaks yang berbeza. Tetapi dalam JavaScript, ketiga-tiga konsep ini dilaksanakan oleh fungsi, melalui tiga mod yang berbeza.

Mod penggunaan paling mudah ialah panggilan fungsi:

function hello(username) { 
  return "hello, " + username; 
} 
hello("Keyser Söze"); // "hello, Keyser Söze" 

2. Kaedah memanggil

Konsep kaedah dalam JavaScript ialah atribut objek ialah fungsi: ia adalah fungsi yang sama, tetapi ia berbeza selepas memberikannya kepada ahli objek. Selepas memberikan fungsi kepada ahli objek, ia tidak lagi dipanggil fungsi, tetapi kaedah.

var obj = { 
  hello: function() { 
    return "hello, " + this.username; 
  }, 
  username: "Hans Gruber" 
}; 
obj.hello(); // "hello, Hans Gruber" 

Tingkah laku sebenar ialah panggilan itu sendiri menentukan objek mana yang akan diikat, iaitu:
obj1.hello() akan mengikat ini kepada obj1, dan obj2.hello() akan mengikat ini kepada obj2. Ingat satu ayat, siapa yang call, ini akan tunjuk kepada siapa

Disebabkan peraturan mengikat ini, penggunaan berikut juga boleh dilaksanakan:

function hello() { 
  return "hello, " + this.username; 
} 

var obj1 = { 
  hello: hello, 
  username: "Gordon Gekko" 
}; 
obj1.hello(); // "hello, Gordon Gekko" 

var obj2 = { 
  hello: hello, 
  username: "Biff Tannen" 
};_ 
obj2.hello(); // "hello, Biff Tannen" 

Namun, dalam fungsi biasa, seperti fungsi helo di atas, menggunakan kata kunci ini bukanlah cara yang baik Apabila ia dipanggil secara langsung, penunjuk ini menjadi masalah. Dalam kes ini, ini sering ditujukan kepada objek global (GlobalObject), yang biasanya merupakan objek tetingkap pada pelayar.
Dan tingkah laku ini tidak pasti dan tidak bermakna.

Jadi dalam standard ES5, jika mod ketat digunakan, ini akan ditetapkan kepada tidak ditentukan:

function hello() { 
  "use strict"; 
  return "hello, " + this.username; 
} 
hello(); // error: cannot read property "username" of undefined 

Pendekatan di atas adalah untuk mendedahkan kemungkinan ralat dengan lebih cepat dan mengelakkan salah operasi dan pepijat yang sukar ditemui.
Perbezaan antara panggilan fungsi biasa dan panggilan kaedah akan jelas dengan melihat contoh ini.

var func = function() {
  alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);//true
// 调用
func();//[object Window]
o.fn();//[object Object]

Hasil larian di sini ialah kedua-dua fungsi adalah sama, jadi hasil cetakan adalah benar. Walau bagaimanapun, oleh kerana panggilan kedua-dua fungsi adalah berbeza, panggilan func mencetak [Tetingkap objek], manakala hasil cetakan o.fn ialah [objek Objek].

Berikut ialah perbezaan antara panggilan fungsi dan panggilan kaedah Dalam panggilan fungsi, ini merujuk secara khusus kepada tetingkap objek global, manakala dalam kaedah ini merujuk secara khusus kepada objek semasa, iaitu, ini dalam o.fn merujuk kepada objek. o.

3. Memanggil pembina

Mod penggunaan fungsi ketiga ialah menggunakannya sebagai pembina:

ini

dalam pembina

Kita perlu menganalisis proses mencipta objek untuk mengetahui maksud ini seperti yang ditunjukkan dalam kod berikut:

 var Person = function() {
  this.name = "小平果";
 };
 var p = new Person();

Fungsi Orang pertama kali ditakrifkan di sini. Mari analisa keseluruhan pelaksanaan:

  • Apabila atur cara melaksanakan ayat ini, ia tidak akan melaksanakan badan fungsi, jadi jurubahasa JavaScript tidak mengetahui kandungan fungsi ini.
  • Seterusnya, laksanakan kata kunci baharu untuk mencipta objek Jurubahasa memperuntukkan memori, mendapatkan rujukan kepada objek dan menyerahkan rujukan kepada objek baharu kepada fungsi.
  • Kemudian laksanakan fungsi dan serahkan rujukan objek yang diluluskan kepada ini Dalam erti kata lain, dalam kaedah pembina, ini ialah objek yang baru dibuat.
  • Kemudian tambah ahli pada ini, iaitu tambahkan ahli pada objek.
  • Akhir sekali, fungsi tamat, mengembalikan ini dan menyerahkannya kepada pembolehubah di sebelah kiri.

Selepas menganalisis pelaksanaan pembina, kita boleh mendapatkan bahawa ini dalam pembina ialah objek semasa.

pulangan dalam pembina

Maksud pengembalian dalam pembina telah berubah Pertama, jika dalam pembina, jika objek dikembalikan, maka makna asal dikekalkan Jika pemulangan bukan objek, seperti nombor, Boolean, dan rentetan, maka pulangannya adalah ini, jika tiada pernyataan pulangan, maka ini juga dikembalikan Lihat kod berikut:

 // 返回一个对象的 return
 var ctr = function() {
  this.name = "赵晓虎";
  return {
  name:"牛亮亮"
  };
 };
 // 创建对象
 var p = new ctr();
 // 访问name属性
 alert(p.name);

 //执行代码,这里打印的结果是"牛亮亮". 因为构造方法中返回的是一个对象,那么保留return的意义,返回内容为return后面的对象. 再看下面代码:

 // 定义返回非对象数据的构造器
 var ctr = function() {
  this.name = "赵晓虎";
  return "牛亮亮";
 };
 // 创建对象
 var p = new ctr();
 // 使用
 alert(p);
 alert(p.name);

Hasil menjalankan kod ialah tetingkap timbul mula-mula mencetak [objek Objek], dan kemudian mencetak "Zhao Xiaohu" Kerana pemulangan di sini ialah rentetan, yang tergolong dalam jenis asas, kemudian penyataan pulangan di sini adalah tidak sah dan objek ini dikembalikan. Oleh itu, yang pertama mencetak [objek Objek] tetapi yang kedua tidak mencetak tanpa definisi.

function User(name, passwordHash) { 
  this.name = name; 
  this.passwordHash = passwordHash; 
} 
var u = new User("sfalken", 
  "0ef33ae791068ec64b502d6cb0191387"); 
u.name; // "sfalken" 

Gunakan kekunci baharu untuk memanggil fungsi sebagai pembina. Tidak seperti panggilan fungsi dan kaedah, pembina akan memasukkan objek baru dan mengikatnya dengan ini, dan kemudian mengembalikan objek sebagai nilai pulangan pembina. Fungsi fungsi pembina itu sendiri adalah untuk memulakan objek.

Kesilapan biasa dalam panggilan pembina

Saya dengan senang hati mentakrifkan pembina berikut:

var Coder = function( nick ){ 
this.nick = nick; 
}; 

Apa yang berlaku selepas menentukan pembina? Betul, buat seketika:

var coder = Coder( 'casper' ); 

Siapa nama abang coder ni? Cetaknya dengan cepat:

console.log( coder.nick ); //undefined 
= =b 竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:少了个new 
var coder = Coder( 'casper' ); //当作普通的函数来调用,故内部的this指针其实指向window对象 
console.log( window.nick); //输出:casper 
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正确地指向了当前创建的实例 
console.log( coder.nick ); //输出:casper 

这样的错误貌似挺低级的,但出现的概率挺高的,肿么去避免或减少这种情况的发生呢?
可以在内部实现里面动下手脚:

var Coder = function( nick ){ 
  if( !(this instanceof Coder) ){ 
    return new Coder( nick ); 
  } 
    this.nick = nick; 
}; 

其实很简单,实例化的时候,内部判断下,当前this指向的对象的类型即可,如果非当前构造函数的类型,强制重新调用一遍构造函数。
突然觉得Coder这名字不够洋气?想用Hacker,好吧,我改。。。数了下,一共有三处要改,这不科学,有没有办法只把构造函数的名字改了就行?
当然有:

var Coder = function( nick ){ 
  if( !(this instanceof arguments.callee) ){ 
    return new arguments.callee( nick ); 
  } 
  this.nick = nick; 
}; 

tips:据说在ES 5的严格模式下面arguments.callee会被禁用,不过仅当ES 5普及同时你指定了要使用严格模式,否则还是可以用的发散下思维。

以上就是本文的全部内容,希望对大家学习函数调用、方法调用和构造函数调用有所帮助。

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
Ganti aksara rentetan dalam javascriptGanti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

periksa jQuery jika tarikh sahperiksa jQuery jika tarikh sahMar 01, 2025 am 08:51 AM

Fungsi JavaScript mudah digunakan untuk memeriksa sama ada tarikh sah. fungsi isvaliddate (s) { var bits = s.split ('/'); var d = tarikh baru (bit [2] '/' bits [1] '/' bits [0]); kembali !! (d && (d.getmonth () 1) == bit [1] && d.getdate () == nombor (bit [0])); } // ujian var

jQuery mendapatkan padding/margin elemenjQuery mendapatkan padding/margin elemenMar 01, 2025 am 08:53 AM

Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit. // Sediakan $ ("div.header"). css ("margin", "10px"); $ ("div.header"). css ("padding", "10px"); Anda mungkin menganggap kod ini

10 Tab Accordion JQuery10 Tab Accordion JQueryMar 01, 2025 am 01:34 AM

Artikel ini meneroka sepuluh tab jQuery yang luar biasa dan akordion. Perbezaan utama antara tab dan akordion terletak pada bagaimana panel kandungan mereka dipaparkan dan tersembunyi. Mari kita menyelidiki sepuluh contoh ini. Artikel Berkaitan: 10 JQuery Tab Plugin

10 patut diperiksa plugin jQuery10 patut diperiksa plugin jQueryMar 01, 2025 am 01:29 AM

Temui sepuluh plugin jQuery yang luar biasa untuk meningkatkan dinamisme dan daya tarikan visual laman web anda! Koleksi ini menawarkan pelbagai fungsi, dari animasi imej ke galeri interaktif. Mari kita meneroka alat yang berkuasa ini: Posting Berkaitan: 1

HTTP Debugging dengan Node dan HTTP-ConsoleHTTP Debugging dengan Node dan HTTP-ConsoleMar 01, 2025 am 01:37 AM

HTTP-CONSOLE adalah modul nod yang memberi anda antara muka baris arahan untuk melaksanakan arahan HTTP. Ia bagus untuk menyahpepijat dan melihat apa yang sedang berlaku dengan permintaan HTTP anda, tanpa mengira sama ada mereka dibuat terhadap pelayan web, Serv Web

Tutorial Persediaan API Carian Google CustomTutorial Persediaan API Carian Google CustomMar 04, 2025 am 01:06 AM

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

jQuery tambah bar scroll ke divjQuery tambah bar scroll ke divMar 01, 2025 am 01:30 AM

Coretan kod jQuery berikut boleh digunakan untuk menambah bar skrol apabila kandungan div melebihi kawasan elemen kontena. (Tiada demonstrasi, sila salin terus ke Firebug) // d = dokumen // w = tetingkap // $ = jQuery var contentArea = $ (ini), Wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), Divheight = $ ('#c

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.