Inheritance mode in Yui 3 and Its Usage

Document directory

• Inherit and join new members
• Parent Class Object (superclass)
• Access methods that have been overwritten
• Prototype inheritance
• What about the new ecmascript 5?

Inheritance mode in Yui 3 and Its Usage

January 6, 2010 at 6:30 AM by Stoyan Stefanov

Yui
3

Two Methods of code reuse: class-based inheritance (classical inheritance pattern) and Prototypal
Inheritance) mode.

Dependency

There is a core Yui in the seed file yui-min.js
3. API

The prototypal pattern is inherited. If classical pattern is requiredoop

But in general, you do not need to do this, because the entire Yui requires this OOP module to complete the work, so it is generally referenced. If you want to create a simple page and only test it, you must meet the following Yui dependencies:

<SCRIPT type = "text/JavaScript" src = "http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"> </SCRIPT>

<SCRIPT>

Yui (). Use ('oop ', function (y ){



// Write your code here. Y is a Yui instance.

});



</SCRIPT>

Class inheritance (pseudo-class pseudo-do classical)

You can call this mode "classical mode" -- but it is not a classic
The meaning of Greece is to make everyone understand the meaning of class. JavaScript does not have a real class (it is described as "pseudo do"), but it acts as a constructor.

In Java or other languagesProgrammer

Class directly inherits fromPerson

Class. However, in JavascriptProgrammer

Is a constructor,Person

It is also a constructor. Our goal is to make the constructorProgrammer

The generated object is the abilityPerson

The generated attributes and methods are inherited from themselves.

Suppose there are two constructed functions:

// Parent class <br/> function person () {<br/> // "itself" member <br/> This. name = "Adam"; <br/>}< br/> // attributes of the parent class prototype <br/> person. prototype. getname = function () {<br/> return this. name; <br/>}; <br/> // subclass <br/> function Programmer (){}

In Yui 3oop

The module provides an inheritance method.Y.extend(...)

The usage is as follows:

Y. Extend (programmer, person );

In this way, you can test it.getName()

Is an inherited method:

VaR guru = new Programmer (); <br/> alert (typeof guru. getname); // "function"

Note:Y.extend(...)

It is a Member that inherits prototype and is not a "itself" member. How can this be considered a good practice? It is to write the reusable functions on prototype, and the attributes are passed throughthis

To add all instance properties. In the preceding example, onlygetName()

Inherited, andname

It is not inherited (the "prototype inheritance" Scheme mentioned later in the text allows inheriting prototype members and "itself" members ).

Inherit and join new members

Allows youY.extend(...)

When inheriting the parent class, you can add new members to the subclass. In fact, this is the pattern used to build "class" extensions in the Yui project.

Specifically,Y.extend(...)

The third parameter is where you add new members to the subclass and add them to the prototype of the subclass constructor. The fourth parameter is the property of the subclass constructor itself (that is, the static class property class static
Properties ).

The following is an example of inheritance and Extension: An Example of inheritance and extension:

Y. extend (programmer, person, {grokshtml: true}, {limit: "sky "}); <br/> // grokshtml is now an attribute of the subclass prototype <br/> alert (typeof programmer. prototype. grokshtml); // "Boolean" <br/> // The new instance has a new property. <br/> var Bob = new Programmer (); <br/> alert (Bob. grokshtml); // This member is added to the constructor itself. It is more like a "static" attribute and generally acts as a constant. <Br/> alert (programmer. Limit); // "sky" <br/> var Limit = Bob. limit; // undefined

Parent Class Object (superclass)

In the seemingly class mode, to access the prototype of the parent class, you must use the static attribute below the constructor.superclass

, -- This special entry.

superclass

Is the reference of the parent class prototpye, sosuperclass.constructor

It points to the constructor function of the parent class. Example:

// Inherit <br/> Y. extend (programmer, person); <br/> // access the constructor of the parent class from the subclass. <br/> var parent = programmer. superclass. constructor; <br/> // test <br/> alert (parent = person); // true, that's right! <Br/> // access the constructor of the parent class from the stone forest of the subclass <br/> var guru = new Programmer (); <br/> guru. constructor. superclass. constructor = person; // true

As mentioned above, under the class inheritance model, you can only inherit those prototpye members. Howeversuperclass

You can retrieve the parent class constructor from the subclass, or retrieve the attributes of the parent class as the attributes of the subclass.

You can callProgrammer

To modifyProgrammer

Its construction process, that isapply()

This is sent to the current instance to change the current scope of the parent class. Of course, there are also initialization parameters for the parent class.

//... As always, the parent class is defined... <br/> // subclass <br/> function Programmer () {<br/> // initialize the parent class. At this moment, "this" is the current subclass <br/> programmer. superclass. constructor. apply (this, arguments); <br/>}< br/> // run the inherited command <br/> Y. extend (programmer, person); <br/> // test <br/> var pro = new Programmer (); <br/> alert (Pro. name); // "Adam"

As you can see, the instance programmer now has its ownname

Attribute.

Alert (PRO. hasownproperty ('name'); // true <br/> alert (PRO. hasownproperty ('getname'); // false

Access methods that have been overwritten

Sincesuperclass

Pointing to the parent class prototype object, the subclass can also access methods and attributes, including the methods and attributes that have been overwritten. SeeTriangle

InheritanceShape

Example:

// Parent class <br/> function shape () {}< br/> shape. prototype. tostring = function () {<br/> return "shape"; <br/>}; <br/> // subclass <br/> function triangle () {}< br/> // execute the inherited command <br/> Y. extend (triangle, shape); <br/> // although child covers the tostring () method of the parent class on the surface, the superclass object retains the path to the original parent class method, we can still address it. <Br/> triangle. prototype. tostring = function () {<br/> return triangle. superclass. tostring () + ", triangle"; <br/>}; <br/> var acute = new tacute. tostring (); "shape, triangle"

Prototype Inheritance Method

This is Douglas.
The inheritance mode proposed by crockford, when you get rid of the class way of thinking, you can use other ideas to make a new object, inherit from another object, for the purpose of inheritance, for example:

// Parent object, an object literally <br/> var parent = {<br/> name: "John", <br/> family: "Wayne ", <br/> say: function () {<br/> return "I am" + this. name + "" + this. family; <br/>}< br/>}; <br/> // inherits the magic and copies a new one from the existing object. <br/> var Batman = y. object (parent); <br/> // perform custom operations on the new object <br/> Batman. name = "Bruce"; <br/> // use ...... <Br/> Batman. Say (); // I am Bruce Wayne

When using this mode, you have gone through two steps to set your object:

1. Based on existing objects, a new object is completely copied, and all attributes and methods are inherited.
2. To customize this new object, you can overwrite or add members.

Please understandY.Object(...)

It is available in Yui core code and does not need to includeoop

Module.

Prototype inheritance

If you are curious about how prototype inheritance came from, and want to unveil the essence behind the mystery, you can look at Douglas
What did crockford say?

For more information.

In this mode, the prototype
To inherit the members of the parent class. In this way, even if the subclass has attributes with the same name, it will not overwrite the parent class, but it will take precedence. In other words, you can redefinesay

Method:

Batman. say = function () {<br/> return "can't tell you my real name"; <br/> }; <br/> // test <br/> Batman. say (); // "can't tell you my real name"

Unlike class inheritanceY.extend

Providedsuperclass

To referencesay

However, if you delete the sub-Objectsay

Method of the parent objectsay

The method will return.

Delete bbatman. Say (); // "I am Bruce Wayne"

What about the new ecmascript 5?

Latest Version of ecmascript Standard

It includes native methods to implement the prototype inheritance mode, calledObject.create(...)

.

// Yui3 <br/> var Batman = y. object (parent); <br/> // ecmascript 5 (new syntax in the future) <br/> var Batman = object. create (parent );

Additional reading

Thank you for reading! For more information and examples of the two modes, refer to the following link:

• Todd
  Kloot's "Yui 3 syntactic sugar" slide

  From yuiconf on Yui theater

• Oop Module

  API documentation

• Oop Module

  Highlighted code

• For extend

  Special Example

• Y. Object

  Source code

• Additional information: Use the super keyword in Ext. Extend ()

Note: The Inheritance of Yui and ext is in the same line, and the principle is almost the same. Now there are new versions available for both of them. Obviously, Yui is greatly improved. -- I don't know if the classic inheritance of ext will collect new inspiration from Yui?