Javascript OOP design Pattern Object-oriented Programming Simple example Introduction _javascript skill

Javascript OOP design Pattern Object-oriented programming

When we first wrote the JS code, it was written like this.

 function CheckName () {
    //verify name
  }

  function Checkemail () {
    //verify mailbox
  }

  function Checkpassword () {
    //Verify password
  }

This way can cause serious pollution of global variables, and then transition to

var checkobject = {

  checkname:function () {};
  Checkemail:function () {};
  Checkpassword:funcion () {}; 

}

You can also write
var checkobject = {}//| | function () {}
checkobject.checkname = function () {};
Checkobject.checkemail = function () {};
Checkobject.checkpassword = function () {};


These two types of writing cannot be copied, meaning that new objects cannot inherit these methods when new objects are created

The above is used directly, not a new object to copy a copy of the words can be so written

var checkobject = function () {return

    {
      checkname:function () {},
      checkemail:function () {},
      Checkpassword:function () {}
    }
  }
//Can be

var a = Checkobject () when used;
A.checkname ();

It's written so that objects can be replicated but this does not conform to object-oriented, the newly created class has nothing to do with Checkobject
So we can write code in the form of constructors

  var checkobject = function () {
    this.checkname = function () {}
    This.checkemail = function () {}
    This.checkpassword = function () {}
  }
//Like so we can use Checkobject to create new objects, create objects with new, and each object created will replicate the attributes on this. But in doing so, there will be relatively large consumption each time, and for common methods, we can put the object's prototype

var checkobject = function () {};
CheckObject.prototype.checkName = function () {};
//...


This is written so many times, so we can write this, and implement a chained call to return this to the

var checkobject = function () {} prototype;
checkobject.prototype={
  checkname:function () {
    //Verify name return this
    ;
  },

  Checkemail: function () {
    //Verify mailbox return this
  },

  checkpassword:function () {
    //Verify password return this
    ;
  }  

}

These two ways are not mixed, otherwise the front will be covered, and we call just the

new Checkobject (). CheckName (). Checkemail (). Checkpassword ();

Here's a couple of object-oriented and process-oriented programming approaches. Page 10

Multiple function writing is a way to write code for the process of implementation, adding a lot of global variables and is not good for others to reuse, in others use you can not modify, we may instead of the object-oriented approach to rewrite, we put the demand into an object, this object called class, An important feature of object-oriented is encapsulation, encapsulating properties and methods in an object is like putting items in a suitcase so that it is convenient to use and manage (although sometimes it is convenient to put it on the outside, but a lot of things are not conducive to management)

 var book = (function () {//static private variable var booknum = 0;
      Static Private Method function checkbook () {}//returns constructor return function (NewId, newName, Newprice) {//private variable
      var name, Price;
      Private Method function Checkid (ID) {}//privileged Method This.getprice = function () {};
      This.getname = function () {};
      This.setname = function (name) {this.name = name};
      This.setprice = function () {};
      Public attribute this.id = newId;
      Public Method this.copy = function () {};
      booknum++;

      if (Booknum > MB) throw new Error (' oop JavaScript ');
      The method This.setname (name) that is invoked during constructor instantiation;

    This.setprice (price);

  }
  })();
  Book.prototype = {//static public property Isjsbook:false,//Static public method Display:function () {}}; Compared to the Java do not be JS up the names of these mixed up in fact, JS imitate a new other than the Java basic class global variable methods have their own understanding of better than before don't want to understand//Java why so some 

In order to look more like a class, we write the method on the prototype to the inside of the class.

 var book = (function () {
    //static private variable
    var booknum = 0;
    Static Private method
    function checkbook () {
    }

    //Return constructor function
     _book (newId, NewName, newprice) {
      //private variable
      var name, price;
      Private method
      function Checkid (ID) {
      }
      //privileged method
      This.getprice = function () {
      };
      This.getname = function () {
      };
      This.setname = function (name) {
        this.name = name
      };
      This.setprice = function () {
      };
      Public attribute
      this.id = newId;
      Public method
      this.copy = function () {
      };
      booknum++;
      if (Booknum > MB)
        throw new Error (' oop JavaScript ');

      The method
      This.setname (name) that is invoked during constructor instantiation;
      This.setprice (price);

    }
    _book.prototype = {
      //static public property
      Isjsbook:false,
      //static public method
      Display:function () {
      }

    };
    return _book;
  }) ();

Here's a safe mode for creating objects

Note Before executing the new book method, This.title will execute the
  var book = function (title) {
    if (this instanceof book) {
      alert (1) first; 
   
    this.title = title;
    } else{return to
      new book (title)
    ;

  var book = new book (' JS ');
  alert (book.title);


   

Thank you for reading, I hope to help you, thank you for your support for this site!