A simple understanding of the encapsulation and inheritance features in JavaScript, javascript features

A simple understanding of the encapsulation and inheritance features in JavaScript, javascript features

Encapsulation in JavaScript
In simple terms, encapsulation allows the outside world to only access the common variables and functions of objects, and hide details and data.
There are three methods to create objects in js: portal wide-opening, distinguishing private variables with naming conventions, and creating real private variables with closures.
1. The wide-open portal is the most basic method for implementing objects. All methods and variables are accessible from the outside.

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 example of a wide-open portal. The attributes and methods of objects can be directly accessed by the outside world. Note that both attributes and variables are created using "this.
 
2. use naming rules to differentiate private variables. This method is an optimized version of the wide-open portal type, except that "_" is used before private variables or methods. If a programmer intentionally uses _ getName () the method to call the method still cannot be blocked, rather than truly hiding the variable.
 
3. the closure is used to create real private variables. In this method, only the functions in js have the scope feature and the relevant variables are defined in the scope of the constructor, these variables can be accessed by all functions in the scope of the defined domain.

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 () {// you cannot directly access 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, the result in this example, directly accessing the name will return the undefined result. We can see the difference between this example and the portal wide-open type. variables in the portal wide-open type are created using "this", and var is used in this example. The check function is also used, so that the name and check functions can only be accessed in the scope of the constructor, and the outside cannot be accessed directly.
This method solves the problems of the first two methods, but it also has some drawbacks. In the portal large-size object creation mode, all methods are created in the prototype object. Therefore, no matter how many object instances are generated, these methods only exist in the memory, every time a new object is generated, a new copy is created for 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 null function F as a bridge can avoid extra overhead of calling the constructor of the parent class when the parent class is directly instantiated. Also, when the constructor of the parent class has parameters, You Want To directly use subClass. prototype = new superClass (); it is impossible to call the parent class constructor and inherit the prototype chain.

subClz.superClass = superClz.prototype; if(superClz.prototype.constructor == Object.prototype.constructor){   superClz.prototype.constructor = superClz; } 

 
By adding these three sentences, you can avoid the Child class inheriting the parent class from writing Book. call (this, name); instead, you can simply write ArtBook. superClass. Constructor. call (this, name.
When the subclass overrides the parent class method, you can call the method of 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)+"!!!";  } 

Articles you may be interested in:

• Javascript is based on three main features of objects (encapsulation, inheritance, and polymorphism)
• Analysis on inherited usage of constructors in js Encapsulation
• Javascript object-oriented encapsulation and inheritance
• Introduction to the encapsulation of JavaScript inheritance
• Modularization of JavaScript: encapsulation (closure), inheritance (prototype) Introduction
• Javascript Functions, object creation, encapsulation, attributes and methods, and inheritance
• Javascript learning notes 9 prototype encapsulation inheritance