Js Object-Oriented Programming

When it comes to js, a lot of people will say that I am very familiar with it and it is often used in daily web development. Is your js Code in line with the object idea? Then you will ask me what is wrong with process-oriented js Code? My feeling is that the JavaScript code for objects is more concise, reduces confusion, and can be maintained and enhanced. It is suitable for applications when writing rich clients.

Okay. First, let's take a look at how to define objects in js:

You can use the firebug console to view the running results. In this very simple code, we have a new Object type Object. If you have learned an object-oriented language like java or C, you must be familiar with the object definition method, except that the variable definition at the beginning is changed to var, Which is because js is of a weak type.

Object belongs to the built-in Object type of js. After obj is defined, values are assigned to the name and age attributes of obj. Note that js objects can dynamically add attributes and Methods. Unlike java, objects can only contain Class content. In the above Code, we add two more methods:

var obj=new Object();obj.name='josh';obj.age='26';obj.getName=function(){return this.name;}obj.getAge=function(){return this.age;}console.log(obj.getName());console.log(obj.getAge());      
Since it can be added, it can also be deleted:

var obj=new Object();obj.name='josh';obj.age='26';obj.getName=function(){return this.name;}obj.getAge=function(){return this.age;}delete obj.age;delete obj.getAge;console.log(obj.age);  //undefinedconsole.log(obj.getAge()); //obj.getAge is not a function



So what is the mechanism for dynamically adding attribute methods to js objects? At the most fundamental level, a js object is a set of attributes, which is very similar to a hash table in other languages or a map that is more commonly used in java, so we can dynamically add attributes or methods at any time.




In js, an object is considered a reference type. If the same object is assigned to different variables, the same object is executed.

var obj=new Object();obj.name='josh';obj.age='26';obj.getName=function(){return this.name;}obj.getAge=function(){return this.age;}obj1=obj;obj.age='30';console.log(obj1.getAge());

Well, the above object Object belongs to the built-in js object, except for the Function, Array, Date, Error, Regexp of the Object type. These built-in object types all belong to the reference type.


var func=new Function('console.log("Hi");');var arr=new Array('Eric','lisa','josh');var date=new Date();var error=new Error("something bad happen");var reg=new RegExp('\\d+');

Js also provides 5 original types: Boolean, Number, String, Null, Undefined.


//stringvar name='Eric';var selection='a';//numbervar num=10;var f=1.1;//booleanvar flag=false;//nullvar obj=null;//undefinedvar ref;
What you need to know is that the Number type can contain both integer and floating point types. Here we also need to talk about the difference between null and undefined. undefined indicates that the variable is defined, but not initialized. null indicates that the object does not exist.



The reason for introducing the original type is that we usually see such code:

var name='Eric';var lowcasename=name.toLowerCase();   //ericvar fistLetter=name.charAt(0);  //E
The method is called on the original type of variables. This is actually a Packing Mechanism Implemented by js content for us.


Var name = 'Eric '; // use new to create a corresponding object type var temp = new String (name); var lowcasename = temp. toLowerCase (); // ericvar fistLetter = temp. charAt (0); // E


In addition to the new resume object, you can also use the literal Form (string) method.

// New object method var obj = new Object (); obj. name = 'Josh '; obj. age = '26'; obj. getName = function () {return this. name;} obj. getAge = function () {return this. age;} // literal Formvar obj1 = {name: 'Josh ', age: '26', getName: function () {return this. name ;}, getAge: function () {return this. age ;}// the new Array method var arr = new Array ('Eric ', 'lisa', 'Josh '); // literal Formvar arr1 = ['Eric ', 'lisa ', 'Josh'];





So far, this article describes the dynamic addition and deletion attributes of js objects and their mechanisms. The built-in primitive type and reference type of js also have two definition methods of objects. With these basics, later, we will explain all aspects of js objects, including inheritance, encapsulation, and polymorphism.