Chapter 1: JavaScript Design Patterns--Object-Oriented Encapsulation

Keywords: Javascript html5 Programming Attribute

JavaScript is an object-oriented language, to understand object-oriented, we must first understand the way before object-oriented - process-oriented.

Procedure-oriented code is actually no stranger to Xiaobai programmers, learning a language, especially after learning function, everyone will not write a lot of process-oriented code. The process-oriented approach is to declare a bunch of methods according to the process of solving the problem, and then call methods to solve the problem.

What about object-oriented? Object-oriented is /* to abstract your needs into an object, and then analyze the characteristics (attributes) and actions (methods) of the object. All of these are nonsense, so comment them out. */ First create the object, then call the method of the object to solve the problem. Why do you do this? Isn't it good to declare functions and then call them? Let's start with a simple example: you're moving. You have 1000 things in your house (clothes, socks, underwear, slippers, toiletries, electronic products, books, bedding sets, all kinds of cards, dare you say you don't have 1000 things in your house?) Would you move them one by one or pack them and move them again? You move, you write code.

Let's start with the n ways to create objects: direct quantities, new Object s, constructors (classes)...

But the most used way is constructor (class). Why? First, because other languages are written in this way. Second: Because it is easy to use, it can realize encapsulation and inheritance.

If you don't use a constructor, or haven't heard of encapsulation and inheritance, please go to Baidu by yourself and come back later, because the following content may not be suitable for you, it will cause you some discomfort.

Today, let's talk about the advanced usage of encapsulation and inheritance.

Encapsulation, to put it plainly, is the declaration constructor (declaration class)

Tip: The following constructor I will use'class'instead, why? Because class is a word, I only say it once.

Let's first look at the private and common properties of classes:

    function Book(name){
        //Private attributes/methods
        var num=1;

        //Common attributes/methods
        this.getName=function(){console.log(name)};

        //Privileged methods can manipulate private attributes, methods
        this.getNum=function(){console.log(num)};
        this.setNum=function(n){num=n};
    }
    var b=new Book('html5')
    console.log(b.num);       //undefined
Let's look at common attributes and / or methods, class static common attributes / methods:
    function Book(name){
        //Private attributes/methods
        var num=1;

        //Common attributes/methods
        this.getName=function(){console.log(name)};

        //Privileged methods can manipulate private attributes, methods
        this.getNum=function(){console.log(num)};
        this.setNum=function(n){num=n};
    }
    //Class static shared properties (objects cannot be accessed)
    Book.isChinese=true;
    //Class static common methods (objects cannot be accessed)
    Book.resetTime=function(){
        console.log(new Date());
    };
    Book.prototype={
        //Common attributes
        isJSBook:true,
        //Common methods
        display:function(){}
    };
    var b=new Book('JavaScript');

    console.log(b.num);       //undefined
    console.log(b.isJSBook);  //true
    console.log(b.isChinese);  //undefined
Common properties / methods are used to create objects and then call them. Class static attributes and method objects can not be called, but classes can (class is a function, function is an object, object has attributes and methods, have not heard? Did you hear about the prototype attribute of the constructor? Private attributes/methods are generally not intended to be modified, but privileged methods are reserved for their acquisition.


Next, let's look at the way closures implement private attributes.

    var Book=(function(){
        //Static private variables
        var bookNum=0;
        //Return constructor
        return function(id,name,price){
            //private variable
            var name,price;
            //privileged method
            this.getName=function(){};
            this.setName=function(){};
            //Public attributes/methods
            this.id=id;
            this.copy=function(){};
            //Calling static private variables
            bookNum++;
            if(bookNum>100){throw new Error('We only publish 100 books.')}
        }
    })();
    //Class static shared properties (objects cannot be accessed)
    Book.isChinese=true;
    //Class static common methods (objects cannot be accessed)
    Book.resetTime=function(){
        console.log(new Date());
    };
    Book.prototype={
        //Common attributes
        isJSBook:true,
        //Common methods
        display:function(){}
    };
    var b=new Book('JavaScript');

    console.log(b.bookNum);   //undefined
    console.log(b.isJSBook);  //true
    console.log(b.isChinese); //undefined

Closure implements private attributes in two ways - returning a complete class directly:

		var Book=(function(){
			//Static private variables
			var bookNum=0;
			//Return constructor
			function _book(id,name,price){
				//private variable
				var name,price;
				//privileged method
				this.getName=function(){};
				this.setName=function(){};
				//Public attributes/methods
				this.id=id;
				this.copy=function(){}
				//Calling static private variables
				bookNum++;
				if(bookNum>100){throw new Error('We only publish 100 books.')}
			}
			//Class static shared properties (objects cannot be accessed)
			_book.isChinese=true;
			//Class static common methods (objects cannot be accessed)
			_book.resetTime=function(){
				console.log(new Date());
			};
			_book.prototype={
				//Common attributes
				isJSBook:true,
				//Common methods
				display:function(){}
			};
			return _book;
		})();

		var b=new Book('JavaScript');

		console.log(b.bookNum);   //undefined
		console.log(b.isJSBook);  //true
		console.log(b.isChinese); //undefined
Finally, because many small white users are instantiating objects. In fact, it's creating objects through new) when we honestly forget to write new, so let's look at the security mode of encapsulation:

		function Book(name){
			//Determine whether this points to the current object at execution time
			//If it says that it was created by new
			if(this instanceof Book){
				this.name=name;
			//Otherwise, create new objects
			}else{
				return new Book(name);
			}
		}
		var h=new Book('html5');
		var j=Book("JavaScript")
		console.log(h.name);
		console.log(j.name);

Finally, there are some tips about adding methods and chain operations to the prototype of a class (constructor prototype):

		//Add method addMethod to Function prototype
		//Method has two parameter method names and methods
		Function.prototype.addMethod=function(name,fn){

			//Put the second parameter method in the prototype of the object calling this method, with the name of the first parameter method
			this.prototype[name]=fn;

			return this;//Return this for chain addition
		};


		//Declare a constructor
		var methods=function(){};


		//Call the addMethod method of function to add methods
		methods.addMethod('checkName',function(){
			//Code to verify user names
			console.log('check User name')
			return this;  //Return this for chain operation
		}).addMethod('checkEmail',function(){
			//Verify mailbox code
			console.log('check Password')
			return this;  //Return this for chain operation
		});

		//Instantiating methods classes
		var a=new methods;
		a.checkName().checkEmail()

Here are some tips on encapsulation in object-oriented programming. The next article will introduce some tips on inheritance in object-oriented programming.

Posted by mika79 on Mon, 24 Jun 2019 13:39:42 -0700