JavaScript Object-oriented

An object is actually a reference type. The value of the object is an instance of the reference type.

A reference type is a data structure in JavaScript that organizes data and functionality together. It is also often called a class, but there is no class concept in JavaScript . Although JavaScript is an object-oriented language, it does not have the basic structure of classes and interfaces supported by traditional object-oriented languages.

First, object creation and common operations

1. Using the new operator

    var user = new Object ();        Use the new operator to create an object User.Name = ' programmers ';        Adding an attribute to an object user.age = 22; user.address = ' Sichuan ';  

　　

2. Object literal (JSON mode)

var user = {    name: ' Programming talent ',    age:22,    address: ' Sichuan '    };

　　

3. Simple Way (traditional assignment method)

var user = {}; User.Name = ' programming talent ';        Adding an attribute to an object user.age = 22; user.address = ' Sichuan ';

　　

4. Invocation of attributes

There are two ways to call object properties:

① Method One

Alert (User.Name + "" +user.age);   Return value for ' Programming the talent Sichuan '

　　

② Method Two

Alert (user[' name '] + "" +user[' age ');//Return to ' programming talent Sichuan '

　　

5. How to add

var user = {    name: ' Programming Guru ',        //Add attribute to Object    age:22,    address: ' Sichuan ',    showinfo:function () {   ///Tim　　　　Add a Method        alert (this.name+ "" +this.age+ "" +this.address);    },    Showhello:showhello   //Adding methods outside the object to the object　　　　};　　　　function Showhello () {    alert ("hello!");    } user.showinfo ();  Call Method User.showhello ();  

　　

Second, the drawbacks of simple and intuitive creation of objects

　　1. Simple code to create objects

var user = new Object ();  User.Name = ' programming talent ';　　　　User.age = 22; user.address = ' Sichuan ';  

　　

2. Disadvantages

Creating objects in this way is simple and intuitive, and is the most basic way to create objects in JavaScript. But there is a problem, if we need to create multiple objects, then I have to write a lot of duplicate code. For example, we want to create another object user1, we have to re-write the above code again, which is not appropriate in the actual development process, so if the object is too large, the amount of code will be greatly increased.

To solve this problem, we can use a method called Factory mode , which is to solve the problem that the instantiated object produces a lot of duplicate code.

Third, Factory mode

function Create (name, age) {var obj = new Object (); 　　　　Obj.name = name;　　　　Obj.age = age;　　　　Obj.show = function () {return this.name + ' + this.age;　　　　};　　return obj; } var obj1= create (' daily ', +);    The first instance of Var obj2= create (' Andy ');    The second instance of alert (Obj1.show ()); Alert (Obj2.show ());  

　　

From the code above we can see that the factory pattern solves the problem of the code duplication at the time of instantiation, but there is a problem, that is to identify the problem, we simply can not find out exactly which object they are an instance of. Like what

Alert (typeof obj1);  Object Alert (obj1 instanceof object);  True

　　

The above code indicates that Obj1 is an object, but we cannot know which object was created.

Four, Constructors ( construction Methods )

function User (name, age) {    //constructor mode this.name = name;　　　　This.age = age; This.show = function () {return this.name  

　　

When creating an object, use the new operator:

var user1 = new User (' daily ', +);    The first instance of var user2 = new User (' Andy ');    A second instance

　　

To create a new instance of the user object, use the new operator to build the instance object in this way, which takes the following 4 steps:

① create a new object;

② the scope of the constructor to the new object (hence this new object that this is pointing to).

③ executes the code within the constructor (adding attributes to the new object);

④ returns the new object.

　　Constructors are also functions

The only difference between a constructor and a function is that it is called differently, but after all, the constructor is also a function, and there is no special syntax for defining constructors. Any function, as long as it is called by the new operator, can be thought of as a constructor, and any function, if not called by the new operator, is no different from a normal function, such as the previously defined user:

Call Var user1 as a constructor = new User (' daily ', +);  User1.show ();　　　　Every day 22;　　　　Call the User as a normal function (' daily ', 22); Window.show (); Every day 22;  

　　

There is no difference in the results, but as you can see, as a normal function call, the function of this object is pointing to the window global object. In the case of the New keyword, this point is the object, so you can write it in this way:

　　

Using the function method call to redefine the scope of the object is actually to change The point of this

problems with constructors

Alert (User1.show = = user2.show);   The result returned is False

　　

The result is false, which means that the method is actually a reference address. If we also repeatedly create multiple objects, the methods in each object will open up new space in memory, thus wasting more space. To solve this problem, we need to use instance properties or method sharing. We can use a workaround to achieve the effect we want, that is, to let the Show method not repeat the creation

function User (name, age) {    this.name = name;　　　　　　This.age = age;　　　　This.show = Show; } function Show () {    

　　

Move the Show method outside, equivalent to the Show method as a global function, and then to the inside of the user constructor to refer to the Show method, In this way, the internal this.show of the user points to the same global function show, so the User1 and User2 we instantiate are shared and can be called again:

Alert (User1.show = = user2.show);    The result returned is true  

　　

JavaScript Object-oriented