Java programmer's JavaScript learning notes (2 -- copying and inheriting attributes)

Java programmer's JavaScript learning notes (2 -- copying and inheriting attributes)
We plan to complete this note in the following order: idea. Copy and inherit attributes. This/call/apply. This/closure/getter/setter. Prototype. Object-Oriented Simulation. JQuery basic mechanism. JQuery selector. JQuery tool method. JQuery-extension at the class level. JQuery-extensions at the "object" level. JQuery-extension selector. JQuery UI. Extend the jQuery UI.

This is Part 1 of the notes. Let's talk about how to copy and inherit attributes. It is also very important.

All objects

Attributes are relative to objects, so the problem arises:What is an object?The object is a class instance. Okay, that's enough. This is the idea of a Java programmer.

How can we consider this issue from the JavaScript perspective.

First,

Why object?

Simple and basic data types are not suitable for complex business logic. Therefore, we need a more complex data structure tailored to the problems to be solved.

Therefore, we need objects (such as dates). We want objects to have their own properties, methods, and even events.

What is an object?

In JavaScript, arrays, dates, and RegExp are all objects. They have their own attributes, methods, and even events. It is a self-contained entity that describes a type of things and completes specific functions.

In the Java World, "Everything is an object", can the same slogan be shouted in JavaScirpt? Yes, we can!

In JavaScript:

Simple data types include encapsulation type, Number, and Boolean. Array, var arr = []; and var arr = new Array (); all get Array objects. Functions are also objectsIt is more thorough than Java and truly achieves everything as an object. An Object is an Object created using the following statement: var o = {}; or var o = new Object (); or var o = Object. create ({}). The main battlefield and dom of JavaScript are also objects.

How to Get objects?

You can use the following statement to obtain the object.

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

The preceding two methods are used to obtain custom objects. This is the simplest method, and there are other methods.

Briefly introduces the role of the prototype attribute. Each function object has a prototype attribute pointing to the "prototype" of the created function ".

The following code:

Function UiObject (){}
UiObject. prototype = {
Type: "RootUiObject" // attributes of the UiObject prototype
}
Var u1 = new UiObject (); // create two UiObject instances
Var u2 = new UiObject ();

Console. log (u1.type); // output: RootUiObject. The prototype attributes can be shared among instances.

Console. log (u1.type === u2.type); // output: true, referencing the same

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

Function MyFunc (){}

MyFunc. prototype = {}

Var myObj = new MyFunc ();

Next, let's take a look at the copying of Object Attributes and attributes, including copying methods as attributes.

Copying Properties

In article 1st, we talked about"Equality of all beingsProperty is not just a numeric attribute of an object.

We can use the o ['name'] = 'liuhailong'; statement to set the name attribute of the object o to a string value.

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

There is no difference between the two.

Therefore, when we mention "property inheritance and replication", the concept of "property" is broadly defined. It refers to all attributes and methods of the object (the "all" statement is not accurate. In the future, we will know that attributes also have their own characteristics, some cannot be traversed, some are read-only, some cannot be extended, and these complicated situations will be considered later ).

You can copy all source attributes to the destionation object by using the following method.

function(destination, source) { for (var property in source) {    destination[property] = source[property]; }return destination; }

How to inherit? What is inheritance?

Inheritance refers to the fact that the object of a child element does nothing.Specify the relationship with the parent ElementAnd automatically has the features and capabilities of the parent element.

How to Implement inheritance?

The main points of inheritance are:Specify the relationship with the parent object.

/* Define the root object */function UiObject () {} UiObject. prototype = {type: "UiObject", author: 'liuhailong', render: function () {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 (); console. log (p. author); // ouput: liuhailong p. render (); // output: render me

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

/* Define the root object */function UiObject () {} UiObject. prototype = {type: "UiObject", author: 'liuhailong', render: function () {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 1 var p = new UiPanel (); console. log (p. author); // ouput: liuhailong p. render (); // output: render me * // * extends the "parent class" function */UiObject. prototype. init = function () {console. log ("Init the Ui Control");}/* Test 2 * // * Test 2 */var p1 = new UiPanel ); var p2 = new UiPanel (200,60); p1.init (); // output: Init the Ui Control console. log (p1.author === p2.author); // true

You can add sub-classes by extending the parent class.

O.