JS design mode OOP object-oriented programming

Source: Internet
Author: User

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

    function checkName(){        //验证姓名    }    function checkEmail(){        //验证邮箱    }    function checkPassword(){        //验证密码    }

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

 varCheckobject = {checkname: function(){}; Checkemail: function(){}; Checkpassword:funcion () {}; }//can also be written like thisvarCheckobject = {}//| | function () {}Checkobject.checkname = function(){};checkobject.checkemail = function(){};checkobject.checkpassword = function(){};//Above these two types of writing can not be copied, that is, the new method when creating new objects can not inherit these methods

The above is used directly instead of the new object to copy one, copy it so you can write it

    varfunction(){        return {            checkName:function(){},            checkEmail:function(){},            checkPassword:function(){}        }    }//使用的时候 可以var a = checkObject();a.checkName();这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系于是我们可以采用构造函数的方式书写代码
    varCheckobject = function(){         This. CheckName = function(){} This. Checkemail = function(){} This. Checkpassword = function(){}    }///Like this we can use Checkobject to create new objects, create objects with new, each created object will copy the properties on this, but to do so, each will have relatively large consumption, for the common method, We can put it on the prototype of the object.varCheckobject = function(){};checkobject.prototype.checkname = function(){};//...//This writes to write the prototype many times, so we can write this and implement a chained call that returns thisvarCheckobject = function(){};checkobject.prototype={CheckName: function(){        //Verify name        return  This; }, Checkemail: function(){        //Verify Mailbox        return  This}, Checkpassword: function(){        //Verify password        return  This; }   }//These two methods can not be mixed, or the back will overwrite the front, at this time we call justNewCheckobject (). CheckName (). Checkemail (). Checkpassword ();

The following is an introduction to object-oriented and process-oriented programming. Page 10

Multiple function Writing method is a process-oriented writing code implementation, adding a lot of global variables and not to reuse, you can not modify when others use, we may instead of using object-oriented approach to rewrite, we put the requirements of an object, this object is called a class, An important feature of object-oriented is encapsulation, which encapsulates properties and methods in an object, like placing items in a suitcase, so that it is convenient to use and manage us, although sometimes it is convenient to put them on the outside, but there is a lot of things that are not conducive to management.

   varBook = ( function () {        //static private variable        varBooknum =0;//Static Private method         function Checkbook() {}//Return constructor        return  function (newId, NewName, Newprice) {            //Private variable            varName, Price;//Private method             function checkid(id) {}//Privileged Methods             This. GetPrice = function () {}; This. GetName = function () {}; This. SetName = function (name) {                 This. Name = name}; This. Setprice = function () {};//Public Properties             This. id = newId;//Public method             This. Copy = function () {}; booknum++;if(Booknum > -)Throw New Error(' oop JavaScript ');//constructor called method during instantiation             This. SetName (name); This. Setprice (price);    }    })(); Book.prototype = {//Static public propertiesIsjsbook:false,//static public methodDisplay function () {}    };//Contrast Java don't get mixed up with these names from JS. In fact, JS imitates a new other Java-like basic class global variable method has its own understanding is better than before to understand    //Java Why is that so?

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

  varBook = ( function () {        //static private variable        varBooknum =0;//Static Private method         function Checkbook() {}//Return constructor          function _book(newId, NewName, Newprice) {            //Private variable            varName, Price;//Private method             function checkid(id) {}//Privileged Methods             This. GetPrice = function () {}; This. GetName = function () {}; This. SetName = function (name) {                 This. Name = name}; This. Setprice = function () {};//Public Properties             This. id = newId;//Public method             This. Copy = function () {}; booknum++;if(Booknum > -)Throw New Error(' oop JavaScript ');//constructor called method during instantiation             This. SetName (name); This. Setprice (price); } _book.prototype = {//Static public propertiesIsjsbook:false,//static public methodDisplay function () {}        };return_book; })();

The following describes a safe mode for creating objects

    //注意 执行new Book 方法之前 this.title 会先执行一次   varfunction (title) {        if (thisinstanceof Book) {            alert(1);            this.title = title;        }else{            returnnew Book(title);        }    };    varnew Book(‘js‘);    alert(book.title);

JS design mode OOP object-oriented programming

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.