Encapsulation in JavaScript
encapsulation simply means that the outside world can only access the objects ' common variables and functions, hiding details and data.
JS in three ways to create objects, respectively, for the portal open, with the naming convention to distinguish between private variables, closures to create real private variables three kinds.
1. Portal open type, is the most basic way to achieve the object, all methods and variables are shared by the outside world can be accessed.
var book = function (name) {
if (This.check (name)) {
Console.log ("error");
throw new Error ("name null");
}
this.name = name;
Book.prototype = {
check:function (name) {
if (!name) {return
true;
}
},
getName: function () {return
this.name;
}
}
var book = new book ("haha");
Output: Haha
console.log (book.name,book.getname ());
This example is a typical portal open type, the outside can directly access the object's properties and methods. You can notice that both the property and the variable have "this" to create.
2. Using a naming convention to differentiate private variables, this method is an optimized version of the Portal wide open type, except for "_" in front of the private variable or method, and if programmers intentionally use the _getname () method to invoke the method, it is not possible to prevent it, and not actually hide the variable.
3. The closure creates a real private variable that uses the properties in JS that only functions have scope, and defines the relevant variables in the scope of the constructor that can be accessed by all functions in that scope.
var Book2 = function (name) {
if (check (name)) {
Console.log ("error");
throw new Error ("name null");
}
name = name;
function check (name) {
if (!name) {return
true;
}
}
This.getname = function () {return
name;
}
}
Book2.prototype = {
display:function () {
//cannot directly access
the name return "display:" +this.getname ();
}
}
var book2 = new Book2 ("haha");
output:undefined "haha" "Display: Haha"
console.log (Book2.name,book2.getname (), Book2.display ());
As you can see, in this example, direct access to name returns the result of undefined. You can see the difference between this example and the portal open type, the variable in the portal open type uses "This" to create, and this example uses Var to create it, so the check function makes the name and check function accessible only in the scope of the constructor and cannot be accessed directly by the outside world.
This method solves the problem of the first two methods, but it also has some drawbacks. In the Portal large open object creation mode, all methods are created in a prototype object, so no matter how many object instances are generated, the methods have only one copy in memory, and using this method, each generated new object creates a new copy of each private variable and method, which consumes more memory.
Inheritance in JavaScript
Book base class:
var book = function (name) {
if (This.check (name)) {
Console.log ("error");
throw new Error ("name null");
}
this.name = name;
Book.prototype = {
check:function (name) {
if (!name) {return
true;
}
},
getName: function () {return
this.name;
}
}
Inheritance method:
function Extend (SUBCLZ,SUPERCLZ) {
var F = function () {}
f.prototype = Superclz.prototype;
Subclz.prototype = new F ();
SubClz.prototype.constructor = SUBCLZ;
Subclz.superclass = Superclz.prototype;
if (SuperClz.prototype.constructor = = Object.prototype.constructor) {
superClz.prototype.constructor = Superclz ;
}
Using the null function f as a bridge avoids the extra overhead of invoking the parent class when the parent class is directly instantiated, and when the constructor of the parent class has parameters, you want to pass Subclass.prototype = new superclass () directly; It is not possible to implement the invocation of the parent constructor and the inheritance of the prototype chain.
Subclz.superclass = Superclz.prototype;
if (SuperClz.prototype.constructor = = Object.prototype.constructor) {
superClz.prototype.constructor = Superclz;
}
Adding these three sentences prevents subclasses from inheriting the parent class write Book.call (This,name), but simply writing ArtBook.superClass.Constructor.call (This,name).
And when the subclass overrides the parent class method, you can call the method to the parent class:
ArtBook.prototype.getName = Functiion () {return
ArtBook.superClass.getName.call (this) + "!!!";
}
Artbook Subclass:
var artbook = function (name,price) {
ArtBook.superClass.Constructor.call (this,name);
This.price = Price;
}
Extend (Artbook,book);
ArtBook.prototype.getPrice = function () {return
this.price;
}
ArtBook.prototype.getName = function () {return
ArtBook.superClass.getName.call (this) + "!!!";