Walaupun topik yang dibincangkan dalam artikel ini adalah sangat asas dan dianggap helah oleh ramai orang, ia adalah topik yang komprehensif dalam pengetahuan asas JavaScript. Ini akan melibatkan pengetahuan tentang enkapsulasi atribut objek, prototaip, pembina, penutupan dan pelaksanaan segera ungkapan .
Kaedah awam
Kaedah awam ialah kaedah yang boleh diakses dan dipanggil secara luaran.
// 在对象中 var Restaurant = { name: 'McDonald', // 公有方法 getName: function() { return this.name; } } // 在构造函数中 function Person(name, age) { this.name = name; this.age = age; // 公有方法 this.getName = function() { return this.name; } } // 在原型中 Person.prototype.getAge = function() { return this.age; }
Kaedah persendirian dan Kaedah istimewa
Kedua-dua kaedah ini secara amnya dibincangkan bersama kerana kaedah istimewa yang kami takrifkan merujuk kepada kaedah awam yang mempunyai akses kepada sifat persendirian dalaman dan kaedah persendirian, manakala kaedah persendirian merujuk kepada kaedah luar yang tidak kelihatan dan tidak boleh diakses.
Biasanya terdapat dua cara untuk mentakrifkan objek, satu ialah menggunakan instantiasi Objek atau ungkapan objek, dan satu lagi ialah menggunakan pembina. Begitu juga, bentuk mentakrifkan kaedah persendirian dan kaedah istimewa juga berbeza dalam cara yang berbeza.
dalam objek
Di sini kita menggunakan ungkapan Objek untuk mencipta objek dan menambah beberapa sifat dan kaedah, dan kemudian memanggilnya terus dengan cara statik. Data peribadi objek diletakkan dalam ekspresi pelaksanaan segera (IIFE) fungsi tanpa nama. Ini bermakna fungsi ini hanya wujud pada masa ia dipanggil, dan dimusnahkan serta-merta selepas pelaksanaan.
Cara untuk mencipta data peribadi dalam objek dipanggil corak modul dalam mod objek (merujuk kepada mod mencipta objek format asasnya adalah seperti berikut:
).var yourObject = (function() { // 私有属性和方法 return { // 公有方法和属性 } }) ();
Dalam mod modul, literal objek yang dikembalikan hanya mengandungi sifat dan kaedah yang boleh didedahkan.
var Restaurant = (function() { // 私有属性 var _total = 10; // 私有方法 var _buyFood = function() { _total--; }; var _getTotal = function() { return _total; } return { name: 'McDonald', getTotal: _getTotal, buy: _buyFood } }) (); Restaurant.buy(); console.log(Restaurant.name); // 'McDonald' console.log(Restaurant.getTotal()); // 9
Perhatikan bahawa kami menggunakan penutupan untuk menggunakan pembolehubah peribadi dalaman secara tidak langsung dan memulakan nama restoran.
Dalam pembina
Apabila mencipta kaedah persendirian dalam corak modul yang diperkenalkan di atas, tiada perbezaan penting antara kaedah awam dan kaedah istimewa Sebabnya konsep ini ditakrifkan apabila menggunakan pembina untuk mencipta data peribadi.
Adalah mudah untuk menentukan sifat dan kaedah peribadi dalam pembina. Kami tidak perlu menggunakan penutupan dan boleh memulakan data semasa memanggil.
function Restaurant(name) { // 私有属性 var _total = 10; // 公有属性 this.name = name; // 私有方法 function _buyFood() { _total--; } // 特权方法 this.buy = function() { _buyFood(); } this.getTotal = function() { return _total; } } // 公有方法, 注意这里不能访问私有成员_total Restaurant.prototype.getName = function() { console.log(_total); // Uncaught ReferenceError: _total is not defined return this.name; } var McDonald = new Restaurant('McDonald'); console.log(McDonald.getName()); // 'McDonald' McDonald.buy(); console.log(McDonald.getTotal()); // 9
Dua dalam satu, cara yang lebih fleksibel
Menggunakan corak modul kita boleh memanggilnya beberapa kali dan ia akan dimusnahkan selepas setiap pelaksanaan. Sesetengah data yang dimulakan boleh dihantar menggunakan kaedah pembina, tetapi sifat ahli persendirian tidak boleh diakses dalam kaedah awam Jika terdapat banyak kaedah awam yang perlu mengakses data peribadi, kami akan menulis semuanya dalam kaedah istimewa, dan akhirnya membawanya ke. setiap contoh. Oleh itu, menggabungkan kedua-duanya boleh melengkapi antara satu sama lain, dan kaedah gabungan juga sangat mudah
var Restaurant = (function() { // 私有属性 var _total = 10; // 私有方法 function _buyFood() { _total--; } // 构造函数 function restaurant(name) { this.name = name; this.getTotal = function() { return _total; } } restaurant.prototype.buy = function() { console.log(_total); // 10 _buyFood(); } restaurant.prototype.getName = function() { return this.name; } return restaurant; }) (); var McDonald = new Restaurant('McDonald'); console.log(McDonald.getName()); // 'McDonald' McDonald.buy(); console.log(McDonald.getTotal()); // 9
Di atas adalah keseluruhan kandungan artikel ini. Penyunting hanya merumuskan sebahagian kecil daripadanya berguna kepada pemula.