Although the topic covered in this article is very basic and considered a trick by many people, it is a comprehensive topic in the basic knowledge of JavaScript. This will involve knowledge of object attribute encapsulation, prototypes, constructors, closures, and immediate execution of expressions .
Public methods
Public methods are methods that can be accessed and called externally.
// 在对象中 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; }
Private methods and Privileged methods
These two methods are generally discussed together because the privileged method we define refers to the public method that has access to internal private properties and private methods, while the private method refers to the external invisible and inaccessible method. method.
There are usually two ways to define an object, one is to use Object instantiation or object expression, and the other is to use a constructor. Similarly, the forms of defining private methods and privileged methods are also different in different ways.
in object
Here we use Object expression to create an object and add some properties and methods, and then call it directly in a static way. The object's private data is placed in an anonymous function immediate execution expression (IIFE). This means that this function only exists at the moment it is called, and is destroyed immediately after execution.
The way to create private data in an object is called the module pattern in the object mode (referring to the mode of creating objects). Its basic format is as follows:
var yourObject = (function() { // 私有属性和方法 return { // 公有方法和属性 } }) ();
In module mode, the returned object literal only contains properties and methods that can be exposed.
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
Note that we use closures to indirectly use internal private variables and initialize the name of the restaurant.
In constructor
When creating private methods in the module pattern introduced above, there is no essential difference between public methods and privileged methods. The reason is that this concept is defined when using constructors to create private data.
It is convenient to define private properties and methods in the constructor. We do not need to use closures and can initialize the data when calling.
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
Two in one, more flexible way
Using the module pattern we can call it multiple times and it will be destroyed after each execution. Some initialized data can be passed in using the constructor method, but private member properties cannot be accessed in public methods. If there are many public methods that need to access private data, we will write them all in privileged methods, and finally bring them to each instance. Many unnecessary methods. Therefore, combining the two can complement each other, and the combination method is also very simple
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
The above is the entire content of this article. The editor has only summarized a small part of it. There are still many knowledge points that have not been mentioned. You can explore and study by yourself. I hope this article can be helpful to beginners.