IT Ninja Turtles understanding review object-oriented JavaScript and Ninja Turtles javascript

IT Ninja Turtles understanding review object-oriented JavaScript and Ninja Turtles javascript

The features of JavaScript functional scripting language and its seemingly casual writing style have led to a long-standing misunderstanding of this language, that is, JavaScript is not an object-oriented language, or some of them have some object-oriented features. This article will return to the object-oriented intent and explain why JavaScript is a thorough object-oriented language and how to use it correctly.

Suitable for reading users

JavaScript is widely used today, and various applications depend on it daily. Web programmers have gradually become accustomed to using a variety of excellent JavaScript frameworks to quickly develop Web applications, thus ignoring the learning and in-depth understanding of native JavaScript. Therefore, it is often the case that many programmers who have developed JavaScript for many years cannot clearly understand closures, functional programming, and prototypes. Even if the framework is used, its code organization is also very bad. This is a manifestation of insufficient understanding of native JavaScript language features. To master JavaScript, first of all, we must discard the interference of some other advanced languages such as Java, C #, and other class-oriented Object-oriented thinking, fully understand the features of the original JavaScript object-oriented model from the perspective of functional language. After grasping this point, it is possible to use this language further. This article is suitable for: programmers who have used the JS framework but lack an understanding of the nature of the JS language, have development experience in Java, C ++ and other languages, and are ready to learn and use JavaScript, and JavaScript fans who have been vague about whether JavaScript is object-oriented, but want to know the truth.

New Understanding of object-oriented

To demonstrate that JavaScript is a thorough object-oriented language, it is necessary to start with the object-oriented concept and discuss several concepts of object-oriented:

• Everything is an object
• Objects are encapsulated and inherited.
• Communication is used between objects to hide information.

Based on these three points, C ++ is a semi-object-oriented semi-process language, because although it implements class encapsulation, inheritance, and polymorphism, however, there are non-object global functions and variables. Java and C # are completely object-oriented languages. They organize functions and variables in the form of classes so that they cannot be separated from objects. But here the function itself is a process, only attached to a class.

However, object-oriented is just a concept or programming idea. It should not depend on a language. For example, Java uses the object-oriented idea to construct its language, which implements mechanisms such as class, inheritance, derivation, polymorphism, and interface. However, these mechanisms are only a means to implement object-oriented programming, rather than necessary. In other words, a language can choose an appropriate method based on its own characteristics to implement object-oriented. Therefore, most programmers first learn or use advanced compilation languages such as Java and C ++ (although Java is semi-compiled and semi-interpreted, it is generally explained as a compilation type ), therefore, the "class" Object-Oriented implementation method is accepted first, so that when learning the script language, it is customary to use the concepts in class-based object-oriented language to determine whether the language is an object-oriented language or whether it has the object-oriented feature. This is one of the important reasons that impede programmers from learning and mastering JavaScript.

In fact, the JavaScript language implements object-oriented programming through a prototype method. Next we will discuss the differences between class-based object-oriented methods and prototype-based Object-Oriented Methods in constructing the objective world.

Comparison between class-based and prototype-Based Object-Oriented Methods

In the class-based object-oriented approach, objects are generated by classes. In the prototype-based object-oriented approach, objects are constructed by constructor using prototype. Here is an example of the objective world to illustrate the differences between the two methods of cognition. For example, a factory creates a car. On the one hand, a worker must refer to an engineering drawing to design how the car should be made. The engineering drawings here are like classes in languages, and cars are made by class. On the other hand, workers and machines (equivalent to constructor) the vehicle is constructed using various components, such as the engine, tires, and steering wheel (equivalent to the prototype attributes.

As a matter of fact, there is still debate about who expresses the idea of object-oriented more thoroughly. However, I believe that the original type of object-oriented method is a more thorough object-oriented method, for the following reasons:

First of all, objects in the objective world are produced by the construction of other objects. Abstract "drawings" cannot produce "cars". That is to say, A class is an abstract concept rather than an entity, and an object is generated;

Secondly, according to the most basic object-oriented rule that everything is an object, the class itself is not an object. However, constructor in the prototype method) prototype is also an object constructed by other objects in prototype mode.

Thirdly, in the class-Oriented Object Language, the object state is held by the object instance, and the object behavior method) it is held by the class that declares the object, and only the structure and method of the object can be inherited. In the original type object-oriented language, the behavior and status of the object belong to the object itself, and can be inherited together (reference resources), which is closer to objective reality.

Finally, in order to make up for the inconvenience of using global functions and variables in the process-oriented language, the Class-oriented object-oriented language such as Java allows you to declare static attributes and static methods in the class. In fact, there is no static concept in the objective world, because everything is an object! In the original type object-oriented language, in addition to the built-in object, the existence of global objects, methods, or attributes is not allowed and there is no static concept. All language elements (primitive) must depend on objects. However, due to the features of functional language, the language elements depend on objects that change with the context of the runtime. this is reflected in the changes of the this pointer. It is precisely this kind of feature that is closer to the natural viewpoint that "Everything belongs, and the universe is the foundation of the survival of everything. In program list 1, window is similar to the concept of the universe.

Listing 1. Context dependency of an object

<Script> var str = "I Am A String object. I declare it here, but I do not exist independently! "Var obj = {des:" I am an Object. I declare that it does not exist independently. "}; Var fun = function () {console. log (" I Am a Function object! Who calls me, who I belong to: ", this) ;}; obj. fun = fun; console. log (this = window); // print true console. log (window. str = str); // print true console. log (window. obj = obj); // print true console. log (window. fun = fun); // print true fun (); // print I am a Function object! Who calls me and who I belong to: window obj. fun (); // print that I am a Function object! Who calls me and who I belong to: obj fun. apply (str); // print that I am a Function object! Who calls me, who I belong to: str </script>

Basic object-oriented

ECMAScript is a thoroughly object-oriented programming language (resource reference). JavaScript is a variant of it (variant ). It provides six basic data types: Boolean, Number, String, Null, Undefined, and Object. To achieve object-oriented design, ECMAScript has designed a very successful data structure-JSON (JavaScript Object Notation ), this classic structure can be separated from the language and become a widely used data interaction format (reference resources ).

It should be said that ECMAScript with basic data types and JSON construction syntax can basically implement object-oriented programming. Developers can construct an object in the literal notation method at will, assign values directly to attributes that do not exist, or delete attributes using delete (note: the delete keyword in JS is used to delete object attributes. It is often mistakenly used as the delete keyword in C ++, and the latter is used to release objects that are no longer used), such as program list 2.

Listing 2. literal notation object Declaration

Var person = {name: "Zhang San", age: 26, gender: "male", eat: function (stuff) {alert ("I am eating" + stuff) ;}}; person. height = 176; delete person ["age"];

In the actual development process, most beginners or developers who do not have high requirements for JS applications can simply use this part of content defined by ECMAScript to meet basic development requirements. However, such code reusability is very weak, and it is somewhat dry compared with other class-oriented object-oriented strong language that implements inheritance, derivation, polymorphism, and so on, cannot meet complex JS application development requirements. Therefore, ECMAScript introduces prototype to solve the Object Inheritance Problem.

Back to Top

Construct an object using the function Constructor

In addition to the literal notation method, ECMAScript allows the constructor to create objects. Each constructor is actually a function object that contains a prototype attribute for prototype-based inheritance) and shared properties ). The object can be created by using the "new Keyword + constructor call" method, such as program listing 3:

Listing 3. Using constructor to create an object

// The constructor Person itself is a function object function Person () {// you can perform initialization here} // It has a property Person named prototype. prototype = {name: "zhangsan", age: 26, gender: "male", eat: function (stuff) {alert ("I am eating" + stuff );}} // use the new keyword to construct the object var p = new Person ();

Since the inventor of JavaScript in the early days, in order to bring the language to the famous Java language (although we know that the two are the relationship between Lei Feng and Lei Feng ), the new keyword is used to restrict the constructor to call and create an object, so that it looks similar in syntax to the way Java creates an object. However, it should be noted that the new meanings of these two languages are irrelevant because the object construction mechanism is completely different. It is precisely because the syntax is similar here that many programmers who are used to the object creation method in class-Oriented Object language cannot fully understand the method of JS object prototype construction, because they always don't understand Why "function names can be class names" in JS language. In essence, JavaScript only borrows the keyword "new". In other words, ECMAScript can use other non-new expressions to call the constructor to create objects.

A thorough understanding of prototype chain)

In ECMAScript, each object created by the constructor has an implicit reference pointing to the prototype attribute value of the constructor. This reference is called prototype ). Furthermore, each prototype can have an implicit reference (prototype chain) pointing to its own prototype ). In a specific language implementation, each object has a _ proto _ attribute to implement implicit reference to the prototype. Program list 4 illustrates this.

Listing 4. Object _ proto _ attributes and implicit references

Function Person (name) {this. name = name;} var p = new Person (); // the implicit reference of the object points to the prototype attribute of the constructor, so true console is printed here. log (p. _ proto _ = Person. prototype); // The prototype itself is an Object, so its implicit reference points to the prototype attribute of the // Object constructor, so print true console. log (Person. prototype. _ proto _ = Object. prototype); // The constructor Person itself is a function object, so print true console here. log (Person. _ proto _ = Function. prototype );

With the prototype chain, you can define a so-called property hiding mechanism and implement inheritance through this mechanism. ECMAScript specifies that when an object attribute is assigned a value, the interpreter searches for the first object in the prototype chain of the object that contains this attribute (Note: The prototype itself is an object, the prototype chain is the chain of a group of objects. The first object in the prototype chain of an object is the object itself. Otherwise, if you want to obtain the value of an object property, the interpreter naturally returns the object property value that first has this property in the prototype chain of the object. Figure 1 shows the hidden mechanism:

Figure 1. Property hiding mechanism in the prototype chain

In Figure 1, object1-> prototype1-> prototype2 forms the prototype chain of the object object1. Based on the property hiding mechanism described above, we can clearly see that the property4 attribute in prototype1 object and the property3 attribute in prototype2 object are hidden. After understanding the prototype chain, it is very easy to understand the prototype-based inheritance implementation principle in JS. program list 5 is a simple example of using the prototype chain to implement inheritance.

Listing 5. Use the prototype chain Horse-> Mammal-> Animal to implement inheritance

// Declare Animal object constructor function Animal () {}// point the prototype attribute of Animal to an object, // You can also directly understand Animal as the prototype of the specified Animal object. prototype = {name: animal ", weight: 0, eat: function () {alert (" Animal is eating! ") ;}// Declare the Mammal object constructor function Mammal () {this. name =" mammal ";}// specify the prototype of the Mammal object as an Animal object. // In fact, this is the prototype chain Mammal between the create Mammal object and the Animal object. prototype = new Animal (); // declare the Horse object constructor function Horse (height, weight) {this. name = "horse"; this. height = height; this. weight = weight;} // specify the prototype of the Horse object as a Mamal object and continue to build the prototype chain Horse between the Horse and Mammal. prototype = new Mammal (); // specify the eat method again. This method will overwrite the eat method Horse inherited from the Animal prototype. prototype. eat = function () {alert ("Horse is eating grass! ") ;}// Verify and understand the prototype chain var horse = new Horse (100,300); console. log (horse. _ proto _ = Horse. prototype); console. log (Horse. prototype. _ proto _ = Mammal. prototype); console. log (Mammal. prototype. _ proto _ = Animal. prototype );

The key to understanding the implementation of the Object prototype inheritance logic in listing 5 is the code of Horse. prototype = new Mammal () and Mammal. prototype = new Animal. First, the result on the right of the equation is to construct a temporary object, and then assign this object to the prototype attribute of the object on the left of the equation. That is to say, the new object on the right is used as the prototype of the object on the left. The reader can replace these two equations with the corresponding program list. 5. The final two-line equations of the code can be self-understood.

Implementation of JavaScript class inheritance

From the code list 5, we can see that although the prototype-based inheritance method achieves code reuse, It is loose and not fluent, and has poor readability, it is not conducive to implementation of expansion and effective organization and management of source code. I have to admit that the class inheritance method is more robust in language implementation and has obvious advantages in building reusable code and organizational architecture programs. This allows programmers to find a way to encode JavaScript in the class inheritance style. From an abstract point of view, since both class inheritance and prototype inheritance are designed to achieve object-oriented design, and their respective carrier languages are equivalent in terms of computing power (because the computing power of the Turing machine is equivalent to that of the Lambda algorithm), can we find a transformation, so that the original type inheritance language can implement the class inheritance encoding style through this transformation?

Currently, some mainstream JS frameworks provide such conversion mechanisms, that is, class declaration methods, such as Dojo. declare () and Ext. entend. Using these frameworks, you can easily and amicably organize your own JS Code. In fact, before the emergence of many frameworks, the JavaScript master Douglas Crockford first used three functions to expand the Function object to implement this transformation. For details about its implementation, see resources ). In addition, there is a well-known Base. js (reference resources) implemented by Dean Edwards ). It is worth mentioning that John Resig, the father of jQuery, has implemented his Simple Inheritance with less than 30 lines of code after the startup of the family. Using the extend method provided by OSS to declare a class is very simple. Program Listing 6 is an example of using the Simple Inheritance library to implement class declaration. The last printed output statement is the best description of Simple Inheritance class Inheritance.

Listing 6. Use Simple Inheritance to implement class Inheritance

// Declare the Person Class var Person = Class. extend ({_ issleeping: true, init: function (name) {this. _ name = name ;}, isSleeping: function () {return this. _ issleeping ;}}); // declare the Programmer class and inherit the Person var Programmer = Person. extend ({init: function (name, issleeping) {// call the parent class constructor this. _ super (name); // set your own status this. _ issleeping = issleeping;}); var person = new Person ("Zhang San"); var diors = new Programmer ("Zhang Jiangnan", false); // print the true console. log (person. isSleeping (); // print false console. log (diors. isSleeping (); // print true console because all values are true. log (person instanceof Person & person instanceof Class & diors instanceof Programmer & diors instanceof Person & diors instanceof Class );

If you have a full understanding of the prototype, function constructor, closure, and context-based this, it is not quite difficult to understand the implementation principle of Simple Inheritance. In essence, var Person = Class. extend (...) in this statement, the Person on the left actually obtains a constructor returned by Class calling the extend method, that is, a reference to a function object. Following this train of thought, we will continue to introduce how Simple Inheritance achieves this, and then implement the conversion from prototype Inheritance to class Inheritance. Figure 2 shows the source code of Simple Inheritance and its accompanying annotations. For ease of understanding, add instructions to the code line by line in Chinese.

Figure 2. Simple Inheritance source code parsing

Aside from the second part of the code, the first part and the third part of the code consistently found that the fundamental purpose of the extend function is to construct a new constructor with new original attributes. We can't help but lament John Resig's Master's handwriting and his delicate grasp of the essence of JS language. As for how John Resig came up with such a subtle implementation method, interested readers can read this article (refer to resources), which details the thought process of the initial design of Simple Inheritance.

JavaScript private member implementation

So far, if you are skeptical about JavaScript object-oriented, this suspicion must be that JavaScript has not implemented information hiding in object-oriented systems, that is, private and public. Unlike other class-oriented objects that explicitly declare private public members, JavaScript Information Hiding relies on closures. See program list 7:

Listing 7. Using closures to hide information

// Declare the User constructor function User (pwd) {// define the private property var password = pwd; // define the private method function getPassword () {// return the password return password in the closure;} // privileged function declaration, used for other public methods of this object to access private members through this privileged method this. passwordService = function () {return getPassword () ;}// Public Member declares User. prototype. checkPassword = function (pwd) {return this. passwordService () === pwd ;}; // verify the hidden var u = new User ("123456"); // print the true console. log (u. checkPassword ("123456"); // print the undefined console. log (u. password); // print true console. log (typeof u. gePassword = "undefined ");

JavaScript must rely on closures to hide information, which is determined by its functional language features. This article will not discuss Functional Languages and closures, just as you have understood the context-based this in JavaScript by default. For information hiding in JavaScript, Douglas Crockford has a more authoritative and detailed introduction in Private members in JavaScript (reference resources.

Back to Top

Conclusion

JavaScript is considered to be the most misunderstood programming language in the world, because it is covered by the c-language family, it represents the functional language features of the LISP style; no class, but it has completely implemented object-oriented. To have a thorough understanding of the language, you must open the coat of its c language, return to the functional programming perspective, and discard the object-oriented concept of the original class to learn and understand it. With the popularity of Web applications and the rapid development of JS language in recent years, especially the emergence of backend JS engines (such as NodeJS Based on V8), we can foresee that, originally, JS, which is just used as a page for compiling toys, will gain a broader development world. Such a development trend also puts forward higher requirements for JS programmers. Only by thoroughly understanding this language can we exert her power in a large JS project.

//Create a site constructor. name and url are its parameters.function Site(name, url){        this.url = url;        this.name = name;}//Add a method for Site to display the URLSite.prototype.show = function(){        return this.name+"URL:"+this.url;};//Create a site set constructor with sites as its parameterfunction Sites(sites){        this.sites = sites;}//Add a method for Sites to display the URLSites.prototype.show = function(){        var retstr = "";        for(var i=0;i<this.sites.length;i++)        {                retstr+=this.sites[i].show()+"<br />";        }        return retstr;};//Create a site collection, including mengzhidu, Baidu, and Googlevar mySites = new Sites([new Site("dream du", "www.dream du.com"), new Site("baidu", "www.baidu.com"), new Site("google", "www.google.com")]);//Print site URLdocument.write(mySites.show());

Javascript is object-oriented and can reflect its inheritance.

...... JS is only based on object-oriented, rather than the real object-oriented, because the three main features of object-oriented: encapsulation. Inheritance and polymorphism!

Question about javascript object-oriented programming?

It is hard to understand object-oriented programming from javascript.
Because javascript Functions are both functions and classes.
We do not recommend that you understand object-oriented as such.
The first section of your code is a class. The constructor has two parameters: html and high.

The second code is to add a method to the boxPlug class. Prototype is used to make the boxPlug Instance Object use the method.
It is recommended that you first understand object-oriented and then understand javascript object-oriented. Because javascript object-oriented is awkward.