Simple understanding of the encapsulation and inheritance features in JavaScript _ basics

Source: Internet
Author: User
Tags extend inheritance naming convention

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) + "!!!"; 
 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.