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:
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}; } var b=new Book('html5') console.log(b.num); //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.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
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:
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: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
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.