JavaScript overview of Object-oriented easy Entry (demo by ES5, ES6, TypeScript)

write it in front.

This is a JavaScript object-oriented series of articles, this article is mainly about the overview, the introduction of object-oriented, the following plan will also have 5 articles, the abstract, encapsulation, inheritance, polymorphism, and finally a synthesis.

To tell the truth, write JavaScript Object-oriented article is too many, online a search a lot, many books also introduced in very detailed. But the author was very difficult to learn the object-oriented time, especially in the habit of the process-oriented programming situation, do not know that everyone has this feeling.

The author analyzes the reasons for this, probably because there are too many concepts involved: prototypes, prototype chains, inheritance,this,constructor, call, etc. , all of which are to be understood. The introduction is like pulling out the radish to bring out a lot of mud, knowledge points between the coupling is too high, a bit does not conform to the characteristics of object-oriented encapsulation.

So the authors are not going to introduce these concepts in this series of articles, only to say what they are used for here. The author assumes that the reader is ignorant of these concepts and does not expect readers to have a very deep understanding of object-oriented after reading these articles.

The positioning of this series of articles is QuickStart, introducing JavaScript Object-oriented most commonly used things, so that readers can immediately after reading, imitate the inside of the demo write the object-oriented style of code, and so much more to go back to learn the principles, I believe this time will be much easier.

want to know more? Sorry, read the book,JavaScript advanced Programming,JavaScript authoritative guide is more detailed than the author, the single-inheritance method ofJavaScript There are 5 types of advanced programming .

what is Object-oriented (OOP) ?

In the author's view, the narrow object-oriented is a kind of programming way, using abstract, encapsulation, inheritance, polymorphism of these design methods, the difficult to read code to abstract into objects, enhance the readability of the code, reliability, extensibility, is a summary of the experience of programming.

Push to the broad sense, the object-oriented has been more programming and software development , the author thinks object-oriented is a way of thinking, not limited to programming language, and even not limited to programming itself, it cobwebs complex requirements, business logic, and analysis.

This series of articles the author will try to use some object-oriented thinking to write, is not cool?

why use object-oriented programming?

when there was no object-oriented concept at first, people wrote code according to computer thinking (also called process-oriented, assembly and C is generally used in this way), but people understand the computer thinking is more difficult, the more the code is more difficult to maintain the latter, so people invented the object-oriented programming, so the derivation of many object-oriented high-level language C + +, C # , Java and so on, our front-end engineers use the JavaScript is one of them.

Object-oriented has the following benefits:

1. Strong readability. If you are programming in a process-oriented way, you may forget the meaning of your code in two or three months, not to mention letting other people understand your code. Object-oriented can make your code follow certain specifications, whether it is you or the team other people understand your code to be easier, very convenient for many people to co-develop.

2. Strong expandability. Object-oriented emphasis on the encapsulation of code, reducing the coupling between code modules, which greatly enhance the flexibility of the Code, extensibility.

3. Re-use code. Object-oriented can split the business logic into objects, such as cats and dogs can abstract the tail into an object, both cats and dogs can use the tail object.

4, easy to maintain. As the program is abstracted into objects, then the immediate change is the need to modify the corresponding object, so it is very convenient to maintain.

If you have been programming for a while, you must have heard of the famous "design pattern", which is the basis for design patterns (which can be understood as "pre-skills").

when is the front-end area suitable for object-oriented?

to be honest, there are few people in the front-end domain that use object-oriented programming, the main reason is that many Web programs are relatively simple and process-oriented programming is sufficient to meet the needs of people just write Web Effects with JavaScript, submit a form or something. But with the development of the Internet, a variety of Web -based complex needs are constantly emerging,Web programs More and more complex, a SPA( single page Web application Web app) can have hundreds of thousands of or even millions of lines of code, requiring more than one person to develop and maintain.

When you have these feelings, it means that you should learn to object-oriented.

1, the project code more and more, feel more and more difficult to maintain;

2, the project a lot of demand is very similar, some code body feel almost;

3, need to cooperate with others to develop, others may change your code, you may also change the code of others, and feel the communication is very troublesome;

4, two months did not look at the code feel is not written by themselves;

5, The program often out of the bug, and need to spend a long time to find the cause;

6, the product manager said , "this need to change," the heart of 10,000 grass mud horse ran;

7, technology growth has been caught in the bottleneck.

Object-oriented JavaScript

I believe that beginners in Java,C + + and other languages are not so hard to learn about object-oriented Because these object-oriented languages already incorporate object-oriented syntax, the syntax forces you to program in an object-oriented way, even if you don't know why.

JavaScript is a simulation to achieve object-oriented, this is a very annoying place, understand the difficulties, it is cumbersome to write, the code is not clean.

of course, not to say JavaScript is not as good as these languages,JavaScript is more flexible than these languages, which makes it more possible to emulate the features of many programming languages,JavaScript It is justified to be the most proportional programming language.

and not all needs have to be addressed with an object-oriented approach, with many needs (especially WEB programs) directly with a process-oriented solution may be more convenient and faster.

Why use ES5,ES6,TypeScript to demo ?

Let's introduce these three concepts:

ES5:

Full Name ECMAScript5, which can be understood as our regular JavaScript(in fact JavaScript also contains the DOM and the BOM ), which is currently supported by most browsers JavaScript syntax characteristics, in ES5 before that, there was ES3 .

ES6:

It is the ECMAScript Language Specification , which expands the new grammatical features on the basis of ES5, and represents JavaScript 's future, but is not yet compatible with most browsers, and can be converted to ES5 using tools such as Babel.

TypeScript:

TypeScriptin theES5,ES6added new features such as type detection,Javavery much like, while retaining theJavaScriptflexibility that is ideal for large applications. TypeScriptis notES5,ES6This official product, not supported by the browser, requires the use of official tools to convert toES5,ES6. Becauseangular2is to useTypeScriptwritten, which madeTypeScriptrecently the fire, the author also because to useangular2to do project contactTypeScript(Secretly tell you:TypeScriptwrite code to be very cool).

ES5 ->es6-> TypeScript Object-oriented evolution:

from ES5 to ES6 to TypeScript, the object-oriented taste is getting thicker. ES5 inside to the object by simulation, ES6 already have the concept of class , but not perfect; TypeScript to the extreme of the object-oriented, which is no worse than Java . So the author put the three together to compare and confirm.

Novice can only see ES5 part, learn to have the ability and the veteran can take three part of the demo together to see.

something

This series of later articles (abstract, encapsulation, inheritance, polymorphism, synthesis), the author as far as possible to write a week, you crossing if you think the article is OK, may wish to collect, and so the author updated the first time to read.

If you feel that there is anything you need to add or modify, please do not hesitate to send a message.

JavaScript overview of Object-oriented easy Entry (demo by ES5, ES6, TypeScript)