>> Baiklah, jadi hari ini, Aku akan berbicara
tentang JavaScript dan bagaimana hal itu berbeda dari bahasa lain
Anda mungkin digunakan seperti PHP.
Jadi dalam kuliah terakhir pada Senin, kami berbicara sedikit
tentang apa yang serupa, apa yang akrab antara JavaScript
dan PHP atau Python atau Ruby atau C atau bahasa lainnya
bahwa Anda sudah akrab dengan.
Tapi JavaScript itu benar-benar memiliki pandangan yang benar-benar unik
pada model objek yang membuat itu semacam sama sekali berbeda
daripada kebanyakan bahasa yang Anda akan berurusan dengan.
Jadi fungsi adalah semacam sebuah
dari kurang dihargai konsep dalam JavaScript.
Mereka jauh lebih kuat daripada mereka dalam bahasa lain
karena mereka dapat in - untuk satu alasan,
mereka mampu menjadi ditetapkan sebagai nilai-nilai.
Jadi di sini kita memiliki var x sama dengan fungsi
dan itu adalah kelas pertama nilai yang dapat dilalui
sekitar sebagai argumen.
Jadi Anda tidak perlu menyatakan fungsi x
dan hanya menggunakan x dalam lingkup itu.
Anda dapat melewati nilai x mana saja di seluruh, kau tahu,
sebagai argumen ke fungsi lain
di mana Anda dapat modul ekspor David disebutkan dalam simpul.
Jadi titik berikutnya adalah
bahwa fungsi adalah objek dalam JavaScript.
Jadi Anda benar-benar dapat mengatur sifat sebagai nilai-nilai
pada fungsi dan hanya memperlakukan rasanya itu suatu objek.
Jadi, ketika Anda bekerja dengan jQuery, Anda tahu, dolar yang
dan kemudian Anda lulus pemilih ke dalamnya
dan aktifkan sebagai fungsi.
Tapi kemudian Anda juga telah dollar dot AJAX.
Dan itu tidak semacam masuk akal jika Anda berpikir
dari fungsi hanya sebagai sesuatu yang Anda dapat meminta
atau hubungi.
Tapi JavaScript memungkinkan Anda untuk mengatur properti pada fungsi
sifat sebagai statis dengan hanya x dot someProp
seperti yang saya tunjukkan di luar sana.
Titik berikutnya yang kita akan pergi ke sedikit lebih
secara mendalam adalah kenyataan bahwa fungsi dapat diobati
sebagai kelas dalam JavaScript.
Jadi ada konsep operator baru ini
yang menciptakan contoh baru fungsi bersama dengan mengurutkan
seperti tubuh kelas seperti yang datang bersama dengan itu
dan kita akan pergi ke dalamnya sedikit lebih,
itu disebut prototipe.
Dan itu apa merek JavaScript sangat unik dibandingkan
ke bahasa lain yang berbasis kelas,
JavaScript adalah prototipe berbasis.
Dan kemudian hanya pada bagian bawah sana,
fungsi hanya dapat disebut jelas seperti yang kita terbiasa.
Jadi tidak ada yang baru.
Hal lain yang unik adalah
bahwa array sebenarnya benda.
Mereka tidak seperti mereka berada di PHP
di mana Anda hanya membuat array baru.
Ini sebenarnya kependekan karena mengatakan array baru.
Dan array sebenarnya subclass dari suatu obyek.
Jadi itu sesuatu berbeda dan aku akan pergi
menjadi sedikit lebih rinci tentang itu.
Dan kemampuan debugging
dengan JavaScript benar-benar tertandingi sejauh yang saya lihat.
Ini adalah screenshot dari Chrome Inspektur
yang kita akan menggunakan sisanya
presentasi hari ini.
Dan untuk mendapatkan ini, Anda hanya pergi ke file perangkat pengembang
dan terbuka Chrome Inspektur atau Anda bisa klik kanan
dan klik acara elemen I berpikir itu adalah pada halaman HTML
atau saya pikir itu perintah option J membuka hal ini.
Tapi kita akan pergi ke ini dan Anda benar-benar dapat mengatur breakpoints
karena Anda berjalan melalui kode JavaScript dan semacam
dari mengevaluasi apa lokal variabel, apa nilai
ini adalah dan itu membuatnya cara yang lebih mudah untuk kode debug.
Dan jangan - ini bukan dibatasi untuk kode browser side
tapi Anda benar-benar bisa menjalankan instance a
Chrome Inspektur ini untuk kode sisi layanan Anda
yang benar-benar rapi karena Anda dapat langkah melalui baris demi baris
sebagai permintaan datang ke Anda Server dan melihat apa yang terjadi
dan bermain dengan variabel di konsol di sini.
Jadi seperti yang saya sebutkan, JavaScript adalah bahasa berbasis prototipe
yang berarti bahwa ada satu set nilai-nilai default yang merupakan semacam
tersembunyi untuk setiap fungsi
di objek dot properti prototype.
Jadi itu semacam hash dari nilai default hanya berbeda
bahwa ketika Anda memanggil berfungsi dengan kata kunci baru,
yang ditetapkan oleh default seperti fungsi
yang tersedia pada contoh.
Sehingga sebenarnya benar-benar efisien untuk -
ini merupakan cara yang efisien menciptakan objek memori bijaksana
karena JavaScript runtime hanya memiliki untuk melacak
prototipe objek.
Ini semacam menunjukkan bahwa
ketika Anda cretae baru instance dari kelas.
Dan Anda juga bisa meniru warisan seperti diketahui
dalam bahasa berbasis kelas di mana Anda memiliki semacam
dari seperti ini meluas bahwa, meluas bahwa Anda bisa meniru
bahwa dalam JavaScript melalui apa yang disebut
rantai prototipe.
Dan kita akan melihat contoh-contoh tentang itu.
Jadi jika Anda - plugin jQuery sebenarnya mereka merekomendasikan jQuery
penulis untuk menggunakan dollar dot fn untuk menambah fungsionalitas
ke perpustakaan jQuery.
Dan kami benar-benar akan melompat ke - Jadi, di halaman ini,
kita memiliki dolar - Saya termasuk jQuery.
Dan jika Anda melakukan dollar dot di konsol
yang saya sebutkan membawa Anda melalui pergeseran perintah J
atau hanya pergi ke View, Developer, Developer Tools
dan pergi ke tab Sumber.
[Tak terdengar Keterangan]
Oh, tentu. Jadi ketika saya mulai untuk mengetik dalam variabel,
itu auto-selesai untuk saya apa yang tersedia di sana.
Jadi saya mengetik dalam dolar dan saya bisa lihat Saya pikir Chrome memiliki beberapa
built-in dollar, dolar dan dolar x.
Jadi sekarang saya hanya ingin dolar dan saya dimasukkan ke dalam dot.
Dan kemudian itu menunjukkan saya semua properti
yang tersedia pada objek jQuery.
Tapi kalau aku melakukan dollar dot prototipe,
Sekarang saya melihat semua metode yang saya digunakan untuk menggunakan
ketika saya memiliki dolar, pemilih dan kemudian saya rantai off bahwa dengan,
Anda tahu, menambahkan kelas atau menambahkan atau blur atau salah sejenisnya.
Mereka semua benar-benar pada prototipe
yang di bawah tenda jQuery menciptakan contoh baru dari dirinya sendiri
dan itu semacam menyembunyikan semua detail-detail dari Anda.
Jadi saat itu saya membuat kembali ke sini
dengan fungsi, mereka sebenarnya menyembunyikan prototipe dari Anda
dan hanya alias itu terhadap dolar dot fn.
Jadi kebanyakan orang benar-benar tidak menyadari
bahwa ada prototipe ltu bawah hood -
bahwa Anda dapat memanfaatkan dan menambahkan fungsi tambahan
untuk setiap contoh jQuery jika Anda ingin.
Jadi operator "baru" benar-benar semacam sulit
untuk memahami pada awalnya.
Ketika Anda memanggil fungsi dengan "baru",
itu yang sama sekali berbeda cara memanggil fungsi
seolah-olah Anda baru saja menelepon itu jelas.
Jadi operator "baru" menciptakan apa yang disebut contoh baru
dari suatu obyek atau baru contoh, Anda bisa memikirkan
obyek sebagai sebuah kelas.
Dan ketika hal ini terjadi, nilai ini yang mungkin familiar
dengan dari jQuery, mereka semacam mengatur ini
terhadap apa pun yang nyaman pada saat itu.
Mereka biasanya diatur ke DOM node saat ini bahwa Anda
pada saat Anda akan melalui seperti masing-masing atau sesuatu seperti itu.
Mereka - Nilai ini seharusnya menjadi nilai instance
yang Anda buat dengan "baru", yang meliputi segala sesuatu
pada rantai prototipe dan semua metode yang Anda akan menemukan
sebagai properti prototipe.
Jadi itu tergantung pada bagaimana fungsi ini disebut,
apa nilai ini.
Dan itu benar-benar membingungkan jika Anda baru untuk JavaScript.
Tapi setiap fungsi yang disebut memiliki - memiliki nilai ini.
Jadi bahkan jika Anda belum membuat contoh baru dari sesuatu,
bahwa ini diasumsikan untuk menjadi global.
Atau Anda dapat memanggil fungsi menggunakan metode panggilan
dimana metode berlaku dalam JavaScript.
Anda dapat fungsi dan menentukan apa ini harus.
Sehingga Anda dapat membuatnya dinamis, yang benar-benar kuat
tetapi juga memungkinkan Anda untuk melakukan hal-hal yang dapat menyesatkan
dan membingungkan pengembang lain
jika mereka tidak menggunakan fakta.
Dan jQuery, saya berpendapat membuatnya bahkan lebih membingungkan
dengan membuatnya nyaman dan pengaturannya
ke node DOM saat ini.
Tapi aturan sederhana untuk diingat apa nilai ini adalah
ketika Anda sedang mencari
pada panggilan fungsional apa yang tersisa dari dot.
Jadi jika Anda memiliki objek
dan itu adalah sesuatu dot sesuatu yang fungsi
bahwa Anda menelepon maka nilai pertama adalah apa nilai
dari ini.
Jadi di sini adalah contoh kode
mana aku menciptakan objek baru literal
yang hanya obyek dibuat dengan kurung kurawal
dan aku menetapkan nama untuk Bob
dan kemudian saya memiliki sebuah sayName Metode di sini yang -
sehingga dalam sayName ini kalau aku x dot sayName,
nilai ini sama untuk x karena kiri
dot adalah x. Jadi jika Saya menyebutnya x dot sayName,
itu akan menyapa Bob.
Kemudian contoh lain
di mana aku benar-benar menugaskan x dot sayName, fungsi
dengan variabel Y, yang seperti yang saya sebutkan
dalam JavaScript Anda dapat menetapkan fungsi
variabel kapanpun Anda inginkan, itu benar-benar fleksibel seperti itu,
tapi sekarang ketika saya sebut Y, itu kehilangan konteks x.
Jadi ini sekarang global atau jika Anda berada di modus yang ketat,
Saya percaya itu nol atau tidak terdefinisi.
Tapi - Jadi Y adalah bukan apa yang Anda mengharapkan di sini jika Anda sedang mencari
pada x dan Anda akan untuk memanggil sayName,
Anda mengharapkan nama ini seharusnya Bob.
Tetapi jika Anda berhasil melakukannya objek dan menyebutnya
dengan sendirinya, ini sekarang global.
Dan itulah apa yang saya menyebutkan ketika Anda melihat dolar dot ini,
Anda sering tidak memikirkan apa yang sebenarnya terjadi.
Tapi jQuery semacam memiliki mereka sendiri bahasa domain-spesifik
untuk menghadapi ini dan itu bukan apa yang Anda terbiasa
dalam JavaScript.
Dan aku menunjukkan ini karena itu benar-benar penting
untuk menulis dengan baik-terstruktur kode berorientasi objek
di JavaScript untuk benar-benar memiliki pemahaman yang baik dan pemahaman
bagaimana ini bekerja dan bagaimana model objek karya
dan bagaimana operator baru bekerja.
Jika tidak, Anda akan berakhir dengan jQuery spaghetti
di mana segala sesuatu adalah semacam dari seluruh tempat
dan hanya berurusan dengan DOM.
Jika Anda benar-benar bisa menulis JavaScript
dengan cara yang lebih terstruktur, itu membuat jauh lebih mudah
untuk bekerja dengan, untuk memilah dari memisahkan keprihatinan
dari berurusan dengan memperbarui DOM dan berurusan
dengan logika aktual dan kode.
Jadi mari kita lihat pada beberapa contoh di sekitar itu.
Jadi saya memiliki beberapa contoh di sini.
Jadi ini hanyalah sebuah contoh sederhana menggunakan objek JavaScript
dan menambahkan beberapa fungsi untuk itu dan kemudian menciptakan semacam
seperti aplikasi miniatur.
Jadi, sangat sederhana sebenarnya.
Satu-satunya hal yang dilakukan adalah pada awalnya ia meminta nama Anda.
Jadi saya akan mengatakan Tim dan kemudian Anda dapat mengubah nama Anda ke Bob.
Dan itu semua ini aplikasi tidak.
Tapi apa yang saya ingin menunjukkan out adalah bagaimana melakukannya.
Jadi saya punya nama generator objek yang memiliki metode start
yang meminta user untuk nama mereka
dengan hanya menelepon askForName ini
yang turun di sini melakukan prompt
jika namanya tidak diberikan maka meminta lagi
dengan memanggil askForName ini.
Dan kemudian setelah mendapat nama, itu panggilan nama pembaruan ini.
Jadi ini kemudian menetapkan Nama pengguna dalam tag h1.
Dan jika nama tidak ditetapkan, melempar kesalahan.
[Tak terdengar Keterangan]
Oh, tentu. Jadi menetapkan Nama pengguna dalam tag h1
dengan memanggil setDisplayName yang menetapkan HTML
di JS nama wadah dan Aku awalan semua HTML saya
dengan pemilih JS hanya karena itu adalah kebiasaan yang baik untuk mendapatkan
menjadi hanya untuk membuat itu tidak begitu membingungkan
bila Anda menggunakan penyeleksi seperti ID atau kelas
untuk kedua gaya dan logika
Anda di JavaScript aplikasi front end.
Karena jika Anda memiliki berbeda kelompok orang yang bekerja
pada basis kode dan Anda memiliki pemilih di sana
bahwa desainer memutuskan berubah karena ini kan -
tidak tampak hebat, sehingga mereka ingin untuk dimasukkan ke dalam kelas baru dan mengambil
out milik Anda dan Anda mengandalkan di atasnya untuk tujuan JavaScript,
maka kode Anda rusak.
Ini bagus untuk awalan dan memilah
seperti namespace hampir Kelas JavaScript-terkait
atau atribut dengan awalan dari JS.
Jadi ini cukup sederhana dan Anda dapat melihat
dalam semua kasus ini aku memanggil kembali ini di akhir.
Jadi ini adalah suatu yang baik kebiasaan masuk ke dalam,
untuk memberikan sebuah valid nilai kembali.
Dalam askForName aku tidak karena itu masuk akal
bahwa Anda akan mendapatkan nama kembali.
Tapi apa yang memungkinkan Anda lakukan kemudian
jika Anda kembali pembaruan ini nama, itu kembali nilai
dari setDisplayName yang mengembalikan nilai ini.
Dan yang memungkinkan Anda untuk mengurut rantai seperti yang Anda terbiasa
dalam jQuery dengan kembali nilai ini setiap kali.
Hal ini mengacu pada benda saat
sehingga Anda bisa menelepon dot ini askForName dot setDisplayName
dan itu akan menjaga nilai ini dan memungkinkan Anda
memiliki rantai yang bagus di sana.
Dan kemudian di - sehingga dalam contoh kedua ini.
[Pause]
Baik.
OK. Jadi mari kita pergi ke depan dan membuka konsol
dan pergi ke tab Sumber saya.
Kami akan pop ini keluar sebenarnya.
Jadi pengembang Chrome alat-alat yang saya sebutkan,
ada bagian ini di sebelah kanan dan -
Anda dapat melihat tanda berhenti ini meskipun secara default, itu hitam.
Tapi ketika Anda mengarahkan mouse di atasnya, itu mengatakan "Jangan berhenti pada pengecualian.
Klik jeda pada semua pengecualian. "
Dan ketika Anda klik lagi, ternyata biru.
Dan sekarang kapan saja yang ada kesalahan dilemparkan
dalam kode JavaScript Anda, itu akan berhenti pada titik dan memungkinkan Anda
untuk mengevaluasi apa yang terjadi.
Jadi - Dan itu benar-benar berguna Konsep adalah untuk menunjukkan.
Dan kemudian jika Anda mengklik lagi, ternyata ungu
dan ini biasanya apa yang saya tetap masuk
Hanya istirahat kode ketika ada pengecualian
yang belum tertangkap.
Jadi banyak kali di jQuery untuk Misalnya, mereka mencoba menangkap
untuk menguji apakah browser atau tidak memiliki semacam kemampuan
dan melanjutkan dari sana.
Hal ini hanya bila ada kesalahan
yang belum terjebak dalam mencoba menangkap.
Jadi mari kita coba dan menyerahkan nama yang kosong.
Jadi saya dapat melihat bahwa kode sekarang dihentikan
pada metode updateName dan saya dapat mengarahkan mouse ke nama
dan melihat itu kosong kosong.
Ada itu sama dengan kosong.
Jadi, jika tidak nama melempar baru kesalahan dan sekarang saya bisa mundur
melalui fungsi kolom dan berkata, "OK,
mana ini berasal, "dan melihat apa nilai klien.
Sehingga memiliki metode askForName,
start setDisplayName dan updateName.
Dan ini hanya benar-benar berguna cara Anda dapat melihat memiliki semua
variabel yang tersedia dalam lingkup itu juga
sebagai variabel penutupan, jadi segala sesuatu yang tertutup
alih oleh fungsi ini.
Dan jadi saya dapat melihat bahwa - apa nilai dari klien
dan apa nilai ini.
Jadi ini karena kami di jQuery sama
ke elemen DOM saat ini.
Tapi itu benar-benar berguna untuk kode debug
untuk istirahat pada kesalahan seperti ini.
Fitur lain dari Chrome Inspektur adalah
bahwa pada titik tertentu Anda dapat klik pada baris yang berbeda
di baris dan itu akan istirahat di tempat
di mana Anda telah mengatur breakpoints mereka disebut sebagai.
Jadi jika saya klik, yang baris berubah biru.
Jadi biarkan aku melanjutkan eksekusi di sini, OK, yang pecah.
Dan sekarang mari kita mengatur nama Alice dan tekan Submit.
Jadi sekarang saya bisa melihat bahkan sebelum sampai ke titik
memperbarui semuanya, sekarang berhenti di sini sehingga saya bisa melihat
bahwa saya nama ini adalah Alice dan kemudian saya bisa terus -
biarkan aku kembali halaman tersebut.
Baiklah, jadi sekarang bahwa itu mulai dari awal lagi,
itu telah berhenti di ini line dan saya bisa melihat
Nama yang saat ini undefined.
askForName adalah yang berfungsi itu adalah, sehingga juga sering berguna
jika Anda memiliki fungsi yang yang berasal dari file yang berbeda
atau tempat yang berbeda di kode, Anda dapat melihat di mana itu,
dan kemudian melompat ke itu, itu akan menyoroti itu.
Jadi baik untuk mendapatkan dalam kebiasaan menggunakan alat debugging
yang tidak hanya konsol dot log.
OK, jadi mari kita melihat contoh kedua
yang membuat lebih banyak menggunakan prototipe seperti yang saya telah disinggung.
Jadi, dalam contoh ini,
kita menciptakan baru fungsi yang disebut CS
dan ini dikapitalisasi sehingga standar konvensi
dalam JavaScript adalah jika fungsi seharusnya digunakan
sebagai konstruktor, sebagai lawan
hanya normal fungsi, Anda memanfaatkan itu.
Jadi saya punya modal CS dan ini mengambil courseId variabel
dan courseTitle yang Saya set ke courseId ini,
courseTitle ini dalam konstruktor.
Dan kemudian saya juga mengatur siswa dan perkuliahan sebagai array kosong.
Jadi alasan bahwa Anda -
OK, jadi prototipe Sifat kemudian didefinisikan
di sini dengan - jadi Template hanya underscore sederhana
Template, template garis bawah menjadi cara yang Anda bisa -
mirip dengan template bahwa Daud telah disebutkan
di server, Anda dapat hanya menulis tag script
yang bukan JavaScript naskah tapi HTML teks
dan apa yang saya lakukan dengan jQuery adalah -
tidak menyimpan ini terbuka, ya, di sana kita pergi.
Dengan jQuery, itu mendapatkan Nilai HTML template yang
dan kemudian menjalankannya melalui menggarisbawahi perpustakaan utilitas
mesin template.
Jadi dokumentasi untuk itu adalah di sini
bawah template utilitas
tetapi pada dasarnya Anda dapat membaca sedikit lebih tentang hal itu.
Tapi mengevaluasi string ini dan mengubahnya menjadi fungsi
yang kita kemudian dapat melewatkan data ke dan memanggil secara dinamis.
Dua metode berikutnya saya harus adalah addStudent dan addLecture.
Ini hanya menambahkan mereka ke array internal yang saya telah menetapkan
dalam constructor dan maka metode render.
Jadi, mari kita ciptakan baru contoh CS disebut 164
yang memiliki kursus ini nomor 164 dan judul.
Dan kemudian CS50 yang memiliki CS50 dan intro untuk CS1
dan kemudian menambahkan beberapa kuliah mahasiswa
dan kemudian memanggil CS50 render.
Dan jika saya menjalankan kode, sehingga Saya melakukan itu dengan Eval.
Anda tidak pernah benar-benar ingin menggunakan Eval, tapi aku hanya semacam
mengambil semua JavaScript yang ada di sini
dan melaksanakan itu dengan cepat.
Hal itu membuat ke dalam ini template ini kasus baru
dari kelas CS yang memiliki sifat, jadi kami sudah pergi
melalui dan dilakukan addLecture dan addStudent masing-masing.
Dan seperti yang saya sebutkan karena aku kembali ini,
Aku benar-benar dapat rantai ini addLecture dan addStudent panggilan
dan itu akan bekerja sama dengan baik.
Fitur lain di JavaScript yang bahkan lebih berguna
pada sisi server mana Anda benar-benar pada waktu tertentu
jika aplikasi Anda mendapatkan besar tidak tahu di mana Anda berada
dan lebih sulit untuk mengatur ini breakpoints individu
yang saya sebutkan di Inspektur Chrome
untuk menggunakan debugger kata kunci.
Jadi itu hanya D-E-B-U-G-G-E-R.
Dan ketika Anda meletakkan debugger kata kunci dalam kode Anda
dan Anda memiliki - di sana kita pergi, dua Gs.
Bila Anda meletakkan debugger kata kunci dalam kode Anda
dan Anda menjalankan debugger
seperti Chrome Inspektur sini
atau Chrome sisi server Inspektur, ia memberitahu JavaScript
untuk menghentikan eksekusi pada baris tersebut kode dan kemudian memungkinkan Anda
untuk melangkah melalui sisanya eksekusi kode.
Jadi jika saya klik kode run di sini, sekarang berhenti
pada baris debugger ini dan saya bisa lihat OK, inilah nilai CS50
dan itu tentu saja mendapat judul, tentu saja ID,
itu punya kuliah, tidak ada siswa.
Dan kemudian saya dapat melangkah melalui seluruh addLecture,
Aku bisa melihat itu mendorong pada kuliah ini,
mouse di atas itu, "Hello World".
Aku benar-benar bisa di konsol melakukan ini sehingga ini diatur
ke objek saat ini bahwa Anda masuk
Kuliah ini adalah "Hello World".
Dan terus melangkah melalui sebanyak yang saya inginkan.
Jika saya tidak ingin langkah
menjadi penyebab panggilan fungsi ' Aku tahu apa yang terjadi
untuk melakukan pergi ke addLecture, ada tombol ini di sini
yang mengatakan "Langkah di atas selanjutnya fungsi panggilan, "dan jadi aku bisa pergi
ke titik yang aku mungkin bertanya-tanya tentang sesuatu.
Seperti misalnya 164 render.
Jadi pada titik ini, itu akan diberikan.
Aku bisa melihat template ini adalah template terkompilasi.
Aku bisa melihat pada titik ini saya harus memiliki dua siswa
dan dua kuliah.
Dan kemudian ada prototipe rantai yang saya maksudkan.
Jadi satu default yang datang bersama dengan hanya obyek
dalam JavaScript pada umumnya,
ia datang dengan dua tali nilai konstruktor.
Dan kemudian orang-orang yang Saya telah menambahkan pada diri saya sendiri
dengan addLecture, addStudent dan kemudian properti
yang unik untuk ini instance dari kelas
seperti yang dipanggil dengan kata kunci baru.
Jadi mari kita lakukan hanya satu lagi contoh ini
dan kemudian dilanjutkan ke beberapa hal yang lebih menarik
pada sisi server.
Jadi mari kita pergi ke depan dan membuka Contoh terakhir ini yang -
mari kita lihat, di mana kode?
Saya tidak tahu di mana ini pergi.
OK, baik, kita mungkin hanya melewatkan atas kode ini kemudian benar-benar -
oh tunggu, saya pikir saya merindukan style sheet untuk kode.
OK, jadi mari kita membuat ini sedikit lebih besar.
Dalam contoh ini, aku menunjukkan sedikit lebih pada pengaturan
up rantai prototipe,
jadi menyiapkan warisan dengan JavaScript.
Jadi dalam hal ini, kita harus katalog yang akan
untuk diduga memelihara beberapa kursus.
Dan katalog memiliki sebuah metode addCourse.
Jadi memeriksa apakah kursus yang lewat di adalah turunan
tentu saja seperti dipanggil dengan kata kunci baru.
Jadi jika Anda mencoba dan mengirim
dalam sesuatu yang berbeda, itu akan berteriak pada Anda.
Render metode yang akan membuat masing-masing program
dengan menyusun kerangkanya di bawah ini.
Dan kami memiliki kursus yang akses
dalam hal ini kelas dasar untuk program departemen masing-masing.
Dan bukan mengatur masing-masing
tentu saja dot metode prototype dot
atau properti menggunakan memperpanjang pembantu di perpustakaan underscore
untuk memilah panggilan memperpanjang prototipe ini dengan semua
sifat ini, yang merupakan berguna, sedikit lebih mudah untuk dibaca.
Dan kemudian di sini melakukan apa yang dikenal sebagai pengaturan
up rantai prototipe.
Jadi ini sebenarnya sedikit sulit untuk orang-orang pada awalnya
dan bahkan masih telah melakukan ini untuk sementara, itu semacam sulit
untuk membungkus kepala Anda sekitar.
Tapi jangan biarkan yang menakut-nakuti Anda.
Jadi aku menyiapkan baru -
kelas yang sama sekali baru objek di sini, CS.
Dan dalam constructor,
Saya katakan saja menerapkan argumen ini.
Jadi argumen adalah khusus nilai Saya kira Anda bisa menyebutnya
dalam JavaScript, yang kata kunci yang memiliki semua
dari segala sesuatu yang diteruskan adalah argumen
fungsi yang tersedia dengan argumen panggilan,
dengan argumen kata kunci.
Jadi seperti yang saya akan menelepon dengan kursus dot berlaku,
ini adalah konteks saat ini dengan yang CS sedang dipanggil.
Jadi ketika saya memanggil dengan baru itu - itu adalah nilai CS.
Dan saya katakan menyebutnya Tentu saja metode di sini.
Oh maaf - menyebutnya Metode saja di sini
namun menetapkan nilai ini untuk menjadi apa pun nilai
ini ada di sini.
Jadi menerapkan kata kunci memungkinkan Anda semacam mengubah negara
yang ini adalah bagaimana jQuery diperbolehkan untuk semacam saklar
out ini pada Anda sebagai Anda akan melalui
dan membuat elemen DOM bukan objek jQuery.
Jadi sekarang aku akan mengatur fungsi sementara
yang akan ambil prototipe saja.
Dan semacam mengaturnya untuk prototipe
dan kemudian mengatur prototipe pada fungsi objek CS
untuk contoh baru dari itu.
Jadi pada dasarnya aku mengatakan sebaliknya -
jika saya di sini melakukan CS dot prototipe sama dengan program baru.
Maka akan memanggil semua
dalam fungsi konstruktor ini,
yang saya tidak akan selalu ingin.
Jadi semua yang saya lakukan adalah semacam menciptakan hampir
seperti fungsi pengganti yang akan memiliki program prototipe
di atasnya dan semacam meniru prototipe -
kursus tapi tanpa melakukan segala sesuatu dalam constructor
dan menetapkan bahwa untuk prototipe.
Dan kemudian aku hanya menambahkan begitu departemen
dalam hal ini adalah Komputer Ilmu untuk objek CS.
Dan kemudian saya memiliki semacam versi bridge melakukan hal itu.
Ini tidak bekerja di IE9.
Jadi itulah sebabnya aku ingin untuk menunjukkan semacam bagaimana -
apa ini lakukan di bawah tenda.
Tapi Anda dapat mengaturnya up dengan cara yang sama
mana Econ sama dengan fungsi Tentu saja menerapkan argumen ini
dan kemudian mengatakan Econ dot prototipe sama dengan objek dot CreateCourse
dot prototipe.
Jadi itu menciptakan objek baru yang hanya prototipe
untuk kursus dan kemudian mengatur departemen ada.
Jadi sekarang mari kita pergi saja menetapkan debugger di sini dan klik di jalankan.
Di sana kami pergi.
Jadi CS164 kita bisa melihat prototipe rantai kita punya
sifat yang diatur dalam konstruktor.
Jadi nilai-nilai tersebut yang ditetapkan dan kemudian pada rantai prototipe
untuk objek CS itu Departemen Ilmu Komputer ditetapkan.
Dan kemudian pada mendasari rantai prototipe,
kita kemudian memiliki semua metode dan properti
yang unik untuk objek saja.
Dan kemudian kita harus objek dasar.
Sehingga semacam cepat contoh rantai prototipe.
Dan seperti yang Anda lihat di sini, ada dua nilai per departemen.
Jadi ada departemen ilmu komputer
dan kemudian departemen tidak terdaftar yang saya katakan
sebagai nilai default di sini.
Jadi rantai prototipe sebenarnya hanya tunggal
daftar link.
Dan seperti mencoba untuk menemukan properti,
itu akan mulai pada Nilai tingkat atas.
Jadi apa yang didefinisikan dalam fungsi konstruktor
dan kemudian semacam turun rantai prototipe dari sana.
Jadi karena ditemukan, sehingga -
jika di sini, saya katakan CS50 dot Department,
itu akan mengatakan Ilmu Komputer.
Tapi kalau aku mengatakan var -
[Pause]
Tapi kalau aku mengatakan humaniora sama dengan program baru
dan kemudian saya katakan humaniora dot departemen,
Aku akan melihat departemen tidak tercantum karena pergi ke pertama -
Saya dapat melihat prototipe rantai sini sebenarnya.
Jadi pergi pertama ke kursus objek dan melihat tidak ada
pada rantai prototipe di tingkat ini untuk departemen
atau nilai-nilai departemen sehingga kemudian melompat ke tingkat berikutnya,
kursus dan terlihat maju sana dan menemukannya.
Jadi itu hanya semacam turun dari atas ke bawah
dan itu semacam sesuatu yang unik
tentang JavaScript adalah bahwa Anda dapat mengubah setiap
nilai-nilai ini pada waktu tertentu.
Jadi dalam konstruktor atau di Metode individual pada objek
jika saya ingin mengatur ini departemen untuk sesuatu yang baru,
atau apakah aku bahkan ingin mengatur salah satu fungsi
yang sudah ada
untuk sesuatu yang baru, Aku bebas untuk melakukan itu.
Jadi sekarang aku punya dot CS50 addLecture, terlihat seperti itu.
Dan jika saya ingin set ke CS50 addLecture hanya sama
fungsi kosong.
Lalu sekarang saya bisa melihat itu hanya benar-benar berubah
yang Anda tidak mampu untuk melakukan bahasa lain
di mana Anda memiliki ketat warisan kelas berbasis
dan semuanya semacam mengatur.
JavaScript sangat, sangat fleksibel berkaitan dengan itu.
OK, mari kita melompat kembali dalam slide.
Jadi jika misalnya Anda selalu ingin fungsi
memiliki tertentu nilai ini ditetapkan untuk itu.
Anda dapat memanggil fungsi dot mengikat
dan menetapkan apa nilai ini seharusnya.
Anda dapat menganggap itu sebagai -
"Saya mencoba untuk memikirkan baik contoh dunia nyata tetapi ",
jika Anda ingin melindungi kode Anda
terhadap seseorang yang berpotensi menyebutnya dengan nilai
yang tidak akan ini.
Seperti misalnya AJAX callback seperti kelebihan atau error.
Mereka biasanya tidak disebut
dengan baik semantik nilai ini.
Dan Anda seperti, "OK, saya selalu ingin ini menjadi nilai
objek saja bahwa aku bekerja dengan.
Atau tampilan yang aku bekerja dengan dalam kode saya
yang mewakili ini DOM node, Anda dapat mengatur -
Anda dapat mengikat konteks ini dan kemudian ketika itu disebut kemudian
oleh jQuery dan tidak memiliki nilai yang baik dari ini akan tetap
dengan apa yang Anda dibatasi dengan.
Lalu ada panggilan fungsi yang Anda dapat menentukan konteks
dan menentukan variabel apapun jumlah argumen.
Dan kemudian ada fungsi berlaku yang dapat Anda lulus
dalam konteks dan maka baik array
atau argumen objek yang Saya sebutkan seperti yang Anda lihat di sana.
Dan argumen dalam fungsi yang Anda menelepon,
Anda bisa mengetikkan kata "argumen"
dan itu akan memiliki semua argumen.
Ia memiliki "panjang" properti
yang adalah bagaimana argumen Mei yang benar-benar berlalu dengan metode
karena dalam JavaScript Anda dapat mengurutkan panggilan
dengan angka variabel argumen.
Ini berguna untuk mengatakan jika ini memiliki satu argumen,
kemudian ikuti jalur kode ini.
Jika memiliki dua, Anda mungkin ingin mengikuti cara lain.
Hal ini memungkinkan Anda untuk memiliki benar-benar API dinamis untuk metode Anda.
Anda dapat menganggap bahwa dengan jQuery
seperti ketika Anda memiliki dolar dot atau mengikat.
Dan itu semacam tidak hal yang berbeda
apakah Anda menempatkan satu argumen atau dua atau tiga
atau mulai dengan fungsi.
Ini adalah menggunakan argumen milik
dan argumen panjang dalam banyak kasus
memiliki sihir ini fungsionalitas terjadi.
Hal-hal yang tidak dapat Anda lakukan dengan argumen yang menggunakannya hanya
secara default sebagai array.
Jadi Anda bisa mengatakan argumen tiga dan set ke sesuatu
Anda bisa menggunakan tugas array.
Anda dapat menggunakan - banyak metode garis bawah
baik untuk koleksi atau untuk bekerja dengan array,
Anda dapat lulus dalam argumen dan itu akan menyadari
bahwa itu adalah argumen objek dan sort
dari mengurus itu untuk Anda.
Tetapi jika Anda ingin menggunakan argumen yang dilewatkan
melalui fungsi sebagai array,
Anda dapat menggunakan underscore dot dua array.
Salah satu nomor fungsi utilitas
yang membangun untuk menggarisbawahi.