JavaScript object-oriented Walkthrough (Part One)

Always wanted to write an object-oriented article about JavaScript, recently started, originally thought will not write very long, but later found that there are a lot of things to write, we first look at this part of the bar, the back has more advanced characteristics of follow-up, rest assured, is definitely not a eunuch stickers ah, People who are not familiar with JavaScript objects or do not know how to take a closer look at Oh, there are errors in everyone to correct me oh, my level is limited

(1) Why to object-oriented

A decade ago, or perhaps later, JavaScript was a language used as a toy, and most of the time, no one was interested in delving into its features, but only used it to show off their technology with a variety of flashy effects. For a while, all kinds of websites were filled with the noise of so-called special effects, until today, there are still many people do not wake up. But the advent of Ajax may have prompted a large number of designers to start focusing on JavaScript, reversing the performance of the Internet. Indeed, the Internet is a user-friendly place, not a display of personal skills, simple and easy to use is the principle we should adhere to.

The internet tends to be easy to use, so what does JavaScript mean? A lot of people say it's just a toy! Compared with flash,silverlight, it's a very monotonous form, but JavaScript is far from naïve It is a language that has been developed for nearly 20 years and is perfect in every aspect, it is rich in graphics, although it has some drawbacks, but in the interaction with the HTML it has a very powerful function, although it is very simple in many features, but it is really a very flexible language.

For JavaScript, many beginners like to use it as a functional language similar to C, which is characterized by the addition of global variables is a function, so write code is also OK, but it has congenital drawbacks, first of all, it will create a large number of global variables, the global variable too much will cause memory leaks ( If it is not manually recycled after use, and the global variable is visible anywhere in the script, it is often careless to define a variable with the same name as the global variable in a function, which is fatal. The second disadvantage is why all languages now use object-oriented as their selling point because, as the program logic becomes more and more complex, code relationships are becoming more complex, imagine 1000 lines of code, 50 functions, and the relationships between the 50 functions are interdependent. When you write to line 1001th and suddenly think of inserting a function into a relationship, do you remember where the chain of relationships is? And what about the relationship? If you can write code in this way and remember countless complicated relationships, you are a genius even if you don't forget to sleep. Unfortunately, genius is not written in this code, high handwriting code will consider a lot of things, such as: loose coupling, reusability, memory recycling, closure characteristics, encapsulation, the following will involve a number of related things.

(2) Objects and functions

What is the object of JavaScript? Let's start by thinking about what it is in other object-oriented languages, in fact object-oriented in my understanding is a way of organizing code that encapsulates attributes and methods into a class that is most often the real world's abstract expression, and then it can inherit, Can be polymorphic and can be instantiated.

In JavaScript, I think its object-oriented and other language objects are fundamentally different, because there is no concept of class in JavaScript, everything is an object, yes, everything is an object, but everything can be written in the form of a shadow of no object at all, Objects in JavaScript are conceptually different from object-oriented objects, and objects in JavaScript are a basic entity, such as a button in an HTML element, a button object that is not instantiated from any class, but you can manipulate it flexibly, can generate it out of thin air, it can also be deleted dynamically, and it seems to us that it is more in line with the way we understand the world, that we don't need any abstraction, that what we see is an object, that we don't have to imagine its original abstraction, just know that it is a real object. In other languages, you have to create an abstract representation (class) to create an object. And then instantiate, it's more like a way to organize your code than a real-world experience, so I feel that JavaScript is more of an exciting element than any other language.

Like many programming languages, top-level objects in JavaScript are object (), which is the parent object of all objects, so you can define an object in JavaScript using the var myobject=new object (). But in practice this kind of writing doesn't make sense, because the variables in JavaScript are weakly typed, and even if you define VAR myobject=0 at the time of initialization, you can still assign an object to the MyObject variable later, which is the basic feature of all scripting languages. , it makes you need not care too much about the type of variable being manipulated.

JavaScript is a very strange and flexible language, from the function () at the top of the object can be seen, the function object is a top-level object, what does this mean? Example above:

More often in JavaScript we create a basic object:

1 var myobject=function(param1,param2){
2　　 this.name=param1;
3　　 this.age=param2;
4　　 this.showmsg=function(){
5　　 alert("name:"+this.name+"<br />"+"age:"+this.age);
6　　 }
7 }

This basic object has two properties and one method. If you haven't touched object-oriented JavaScript before, you'd say I've defined a function, but you might be confused about this pointer within a function, in fact, we do define a function, But in JavaScript, a function is a top-level object (rather than just a function that encapsulates a small subset of the functionality in other languages), the code above is equivalent to defining an object, and this is pointing to the MyObject object you define.

The object to which this pointer refers is actually not within the scope of this tutorial, but within an object it points to the object of which it belongs, and in an event handler, it points to a DOM element that accepts the event, which can be Google-specific.

As for how the JavaScript interior implements the object mechanism, there may be no need to focus too much on how to define the object and how to manipulate the object, in fact, the object inside JavaScript is an associative array, consisting of fields and methods with names as keys. This can be seen from how to traverse a JavaScript object, take the MyObject defined above, and iterate through the following methods:

var mynew=new myobject('a','b');//首先初始化一个对象,像这种带有参数的对象需要先初始化
for(obj in myobject){
alert(myobject[obj]);//弹出对象包含的所有元素
}

The results will pop up three windows, respectively A,b,function () {...}

There are a number of ways to define objects (functions), which are listed below:

1.function myobject(){}
2.var myobject=function(){}
3.var myobject=new Object();
myobject.name="";
myobject.age="";

4.JSON way, this is a special but commonly used way, and JSON can be used to interact with the server information, its format is obvious, clear structure, with more inherent advantages than XML, and it is a pure string, can easily transfer between the server and the client, Specific can go to Google search, because it involves a larger area, and our purpose is to introduce some of the advanced features of JavaScript, so do not mention JSON