Java Programmer's JavaScript Learning notes (2--property copy and inheritance)

plan to complete this note in the following order:

2. Idea.
4. Property replication and inheritance .
6. This/call/apply.
8. this/Closure Package/getter/setter.
10. Prototype
12. Object-oriented simulation.
14. The basic mechanism of jquery.
16. jquery selector.
18. jquery Tool method.
20. jquery-extends at the class level.
22. jquery-extends at the "object" level.
24. jquery-extension Selector.
26. JQuery UI.
28. Extend the jquery UI.

This is the 2nd note, to talk about attributes copying and inheriting things. Very basic, same, and very important.

All Objects

property is relative to the object, so the question is: What is an object? An object is an instance of a class. Well, that's enough, that's the idea of a Java programmer.

How to think about this from a JavaScript perspective.

First of all

Why should I have an object?

Simple basic data types are not as easy to use in the face of complex business logic, so we need more complex data structures tailored to the problem to be solved.

So we need objects (such as dates), we want the objects to have their own properties, we can have our own methods, and even need events.

What is an object?

In JavaScript, arrays, dates (date), regular expressions (REGEXP) are objects, and they have their own properties, methods, and even events. Self-contained, describe a class of things and accomplish certain functions.

In the Java world, "Everything is the object", in the Javascirpt, can also shout out the same slogan? Yes,we can!

In javascript:

1. Simple data type, with its package type, Number,boolean.
2. Array, var arr = []; and var arr = new Array (); The resulting array object.
3. The function is also the object, more thorough than Java, really do all objects.
4. Object is an object that refers to an object created by the following statement: var o = {}; or var o = new Object (); or var o = object.create ({}).
5. JavaScript's main battlefield (window) and where it comes in (DOM) are also objects.

How do I get an object?  

The object can be obtained by using the following statement.

var str = "I am a String object." "
var obj = {intro: "I am an object." " };
var fun = function () {
Console.log ("I am a Function object.") ");
};

It shows the two ways to get a custom object, which is the simplest way, and there are other ways.

Simply mention the effect of the prototype attribute. Each function object will have a prototype property that points to the prototype that created the function.

The following code:

function UiObject () {}
Uiobject.prototype = {
Type: Properties of the "Rootuiobject"//uiobject prototype
}
var u1 = new UiObject (); Create an instance of two UIObject
var U2 = new UiObject ();

Console.log (U1.type); // output:Rootuiobject, the properties of the prototype can be shared between instances

Console.log (U1.type = = = U2.type); Output: True, referring to the same

Just because of the power of prototype, we use the code above, create functions, set function prototypes, and create function instances. The process is as follows:

function MyFunc () {}

Myfunc.prototype = {}

var myObj = new MyFunc ();

Next, look at the copy of the object's properties and properties, including the method that acts as a property.

Replication of properties

In the 1th chapter, we talk about the "equality of all sentient beings ", which is not simply a property of the numeric type of the object.

We can pass o[' name '] = ' liuhailong '; The Name property of the statement set object o is a string value.

You can also use o[' write ' = function () {return ' I am writing study notes on JavaScript '; } statement to set the Write property of the object o to a function.

There is no difference between the two.

So when it comes to "attribute inheritance and replication," the concept of "attribute" is generalized, referring to all properties and methods of the object ("All" is not very accurate.) Later we will know that attributes also have their own characteristics, and some can not be traversed, some read only, and some can not be extended, these complex circumstances later considered.

It is possible to copy all of the properties of source to the Destionation object by using the following method.

function (destination, source) {<span style= "White-space:pre" ></span>for (Var property in source) {    <span style= "White-space:pre" ></span>destination[property] = Source[property]; <span style= "White-space:pre" ></span>}<span style= "White-space:pre" ></span>return Destination }

How to inherit?What is inheritance?

Inheritance means that the object of a child element does nothing, and it automatically has the attributes and abilities of the parent element, just by specifying the relationship with the parent element .

How do I implement inheritance?

The main point of inheritance is to specify the relationship to the parent object .

   /* Define root Object  */function UiObject () {} Uiobject.prototype = {type: "UiObject", Author: ' Liuhailong ', render:funct Ion () {Console.log (' Render me! ');}}   /* Define Panel */function UIPanel (height, weight) {     This.type = "UIPanel";     this.height = height;     This.weight = weight;  }  Uipanel.prototype = new UiObject (); Specify the inheritance relationship/   *   Test */var p = new UIPanel (100,60); Console.log (p.author);//ouput  : Liuhailong p.render ();//Out Put:render Me

Next, add a "method" to the "parent" class to see if the subclass can be used directly.

   /* Define root Object  */function UiObject () {} Uiobject.prototype = {type: "UiObject", Author: ' Liuhailong ', render:funct Ion () {Console.log (' Render me! ');}}   /* Define Panel */function UIPanel (height, weight) {     This.type = "UIPanel";     this.height = height;     This.weight = weight;  }  Uipanel.prototype = new UiObject (); Specify an inheritance relationship/   *   Test 1   var p = new UIPanel (100,60); Console.log (p.author);//ouput  : Liuhailong p.render () ;//Output:render Me */  *  extend the function of "parent class"    */UiObject.prototype.init = function () {Console.log ("init the Ui Co Ntrol ");  }   /*   Test 2   */* Test 2 */var p1 = new UIPanel (100,60), var p2 = new UIPanel (200,60); P1.init ();                            Output:init the Ui Control console.log (p1.author = = = P2.author); True

By extending the parent class, you can increase the functionality of the child class.

O.

Java Programmer's JavaScript Learning notes (2--property copy and inheritance)