***** JavaScript object-oriented object-wide solution [half of original] *****

Author: Topcss QQ: 419074376 E-mail: andpai1.0 @ gmail.com Time :2008-11 on

Background: JavaScript quick contacts for two years. From the start of her full of curiosity, and now a lot of study about Her framework. Friend ask me: there are so many frameworks, why should you go study the bottom of this object-oriented? In fact, this question: Another Friend has been answered for me. No matter how future changes in the framework, as long as the understanding of the underlying principle is very easy to learn up-to-use. Well, we begin the study.

1, create the object:

var obj = new Object ();// first approach.

var obj = {};// second method. Passing through a var arr = [] to create an array

2, give the object property assignment

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss'; / / object property can also be called a member of the object. The same as an ordinary variable, JS objects are the property could be strings, arrays, numbers, or even object or function.

3, give the object add object property in fact function if it is, then this property can be called object-Ways

nahao.gender = 'male';

nahao.yearOfBirth = 1989;

nahao.name = 'Topcss';

nahao.info = function () (

var str = 'Name:' +

this.name + ', Sex:' +

this.gender + ', born in the year:' +

this.yearOfBirth;

alert (str);

)

nahao.info ();

4, we can use the following definition of grammar briefly above object:

var nahao = (

gender: 'male',

yearOfBirth: 1989,

name: 'Topcss',

info: function () (

var str = 'Name:' + this.name + ', gender:' + this.gender + ', born in the year:' + this.yearOfBirth;

alert (str);

)

); / / If the call nahao.info (), will be and the same results above. Note that the use of property between the comma-separated, and finally there is no comma after a property.

5, constructor constructor can help us to reduce the code volume. First of all, the constructor is a function. Prototype is as follows:

function Person (){}/ and the definition of an ordinary function is no different. Person on the following constructor to add content:

function Person (name, gender, yearOfBirth, site) (

this.name = name;

this.gender = gender;

this.yearOfBirth = yearOfBirth;

this.site = site;

this.info = function () (

var str = 'Name:' + this.name + ', gender:' + this.gender

+ ', Birth year:' + this.yearOfBirth + 'website:' + this.site;

alert (str);

)

) / / This constructor is complete. We now can use the following statement to define a number of objects:

var nahao = new Person ( 'Top css', male, 1989,' www.javava.org);

var gaoshou = new Person ( 'Widen', 'male', 1980, 'www.baidu.net');

var wudi = new Person ( 'unknown', 'do not know', 'confidential', 'bbs.blueidea.net'); through their approach to the call

nahao.info ();

gaoshou.info ();

wudi.info ();

Note: In the above constructor, the parameter name and the object property names are the same, such as:

this.name = name; While this is legitimate, but if the definition of private property, then on the point of death (behind will be mentioned), but looks a bit confusing. So it would be preferable to amend the constructor as follows:

function Person (nameArg, genderArg, yearOfBirthArg, siteArg) (

this.name = nameArg;

this.gender = genderArg;

this.yearOfBirth = yearOfBirthArg;

this.site = siteArg;

this.info = function () (

var str = 'Name:' + this.name + ', gender:' + this.gender

+ ', Birth year:' + this.yearOfBirth + 'website:' + this.site;

alert (str);

)

)

6, What is a static method of static methods? Is added directly at an object on the property or method, which only an object of effective, such as:

nahao.skill = 'will point XHTML, CSS, now also say that the JavaScript'; Add END after the statement, nahao have a skill on the property. But from the same constructor gaoshou and is not subject to any influence wudi. Of course, we can also give them to add this property:

gaoshou.skill = 'proficiency in HTML, CSS, JS, FLEX, PHP,. NET, Linux Programming, Perl, Ruby, XXX ...';

wudi.skill = 'use of beer bottle cap with hand-polished sand out the basic PC components such as CPU. ';

Similarly, we can also give constructor to add a static method, but it will not affect the same use of the definition of the object constructor. For example:

Person.showName = function () (

alert (this.name);

);

Person.showName ();

nahao.showName ();// we give the definition of a Person ShowName function, but only on the constructor Person itself useful (but no real purpose), if at nahao object calling this method will make mistakes.

7, give the definition of the private members of the target object open? In front of the definition of all objects, all of their property are exposed and can easily access, modify or even fine. For example we can nahao.name direct access to the object's name property and so on. If we want to have a confidential foreign property, you can give the definition of the object of private property:

function Person (nameArg, genderArg, yearOfBirthArg, siteArg, privacyArg) (

... ...

var privacy = privacyArg;

... ...

)

var nahao = new Person ( 'Top css', male, 1989,' www.javava.org ',' there is 10 with the toes');

alert (nahao.privacy); / / to the constructor must make changes, we give the object nahao added a privacy property, if trying to alert its value will be displayed if undefined.

Come take a look at the following private method, if we are on the Person constructor with the following modifications:

function Person (nameArg, genderArg, yearOfBirthArg, siteArg, privacyArg) (

function insideOnly () (

alert ( 'I only can call the internal object!');

)

) / / Then insideOnly will not be able to be outside of the visit, if you try to perform this function will be wrong. Note that private methods and did not bind to the target, it's this keyword does not point to objects. If you need to invoke private methods within the object, then you can use the following methods:

function Person (nameArg, genderArg, yearOfBirthArg, siteArg, privacyArg) (

... ...

var myOwner = this;

function insideOnly () (

alert (myOwner.name);

)

) / / First constructor in the definition of a myOwner variables, this keyword will be assigned to it, and then you can use at private functions of this variable to access the object itself.

8, privileges Ways at private members should not object to external access, the object of the visit should not have what is the use? Ways we can use the privilege to visit these private property. So-called privileges to the use of this keyword is the definition of the function, such as:

function Person (nameArg, genderArg, yearOfBirthArg, siteArg, privacyArg) (

... ...

this.showPrivacy = function () (

var str = 'secret:' + this.name + privacy + '!';

alert (str);

);

)

var nahao = new Person ( 'Top css', male, 1989,' www.javava.org ',' there is 10 with the toes');

nahao.showPrivacy ();

We first give Person constructor to add a privilege showPrivacy methods, methods used in the value of private variable privacy. Finally we call on nahao object of the method, results are as follows:

9, prototype Analysis First, we want to reject this sentence above "on the same Person.prototype changes will affect the use of the definition of the object of Person." See the following code:

Person.prototype = (

mark: 'Person.Proto'

)

var nahao = new Person ( 'Top css', male, 1989,' www.javava.org ');

Person.prototype = (

mark: 'Person.NewProto'

)

alert (nahao.mark);

The output will alert what is it? According to the above experience in the alert before the final changes Person.prototype its mark for the property assignment 'Person.NewProto'. But the actual output: Person.Proto

This is not a bug, but all browsers are the same. Reasons are as follows:

Person.prototype = (

mark: 'Person.Proto'

)

Section of the first volume to create an object literal and give assignment Person.prototype, we call this object literal of Proto.

var nahao = new Person ( 'Top css', male, 1989,' www.javava.org ');

In the creation of objects and in accordance with nahao constructor to initialize the object at the same time, will quietly give nahao target set an internal property, we put all named xxx, and its assignment to Person.prototype value, that is, the above-mentioned the volume of the object literal Proto, JavaScript dynamic inheritance is achieved by the xxx. (This JavaScript implementation of the internal mechanism is not my forehead want to beat out Netscape staff are in an article mentioned, the following procedures will be used to prove that this flow.) And,

Person.prototype = (

mark: 'Person.NewProto'

)

Here we will create another volume of an object literal NewProto, and assignment to Person.prototype. Here is quite clear, although we have amended the Person.prototype, but did not affect the object nahao. When we visited nahao.mark, it first internal look at themselves, unable to find will find xxx, naturally found a Proto, rather than NewProto. Well, the implementation of dynamic inheritance xxx key what is it? In FireFox it is __proto__, have the following code for the card. As for the IE in me xxx what is not found.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of ***** JavaScript object-oriented object-wide solution [half of original] *****

  • Javascript Object Model

    Javascript Object Model

  • Shoes - Construction Ruby client gadget

    Shoes Ruby are cross-platform GUI applications, recently released a new version, it is a very interesting Ruby GUI client, the following are some characteristics of Introduction: 1. Cross-platform support for windows / linux / mac os 2. Very small, t ...

  • Hibernate II Study Notes

    11. Many-to-many Of many that can be converted to two one-to-many <set name="students" table="teacher_student"> <key column="techer_id"/> <many-to-many column="student_id"/> </set> many-to-many data only from one end of the mainten

  • Workspace run under different Eclipse

    Now do live more and more often required to use eclipse in java and ruby & rails project conducted between the tangential shear from the past, because in the rails project used a coloring Aptana preferences, the results open the java project sour ...

  • Object-oriented design principles 11

    What is object-oriented design? Contains what? The benefits of it are what? Required to pay what you do? In today's age, ask these questions seem to be foolish, because this year almost every software developer knows how to use some sort of objec ...

  • How to do a good job in the demand for change management - needs to change flow specification

    Project Leader: assessment needs to change some of the workload to determine whether it needs to change the contents of the progress on the development of an impact, if the demand to change the progress of an impact on the development, the project le ...

  • Use Ext JS to read the JsonReader complex object json

    Today was how to resolve the following complex json object to the difficult living over a long time .. did not find documentation how to read JsonReader Ways json object (possibly also because of their limited level of E the text did not correctly underst

  • RoR explained

    ROR is Ruby on Rails. Ruby is a well-known has been very good dynamic language It's dynamic language. Simple and easy. Dynamic languages are interpreted, but the performance may make a discount, but not absolute, because the application is complex, th

  • WebQQ, ExtJs + Servlet + Hibernate + Spring implementation

    Code for the development of boredom when using ExtJs + Servlet + hibernate (Ant + xdoclet generate HBM files) + spring implementation, Pure whim, but implementation has been more than chat, group chat, what's not achieve, nor how to consider the perfo

  • hibernate to use the principle of

    The use of hibernate, implementation of data persistence. Has the following several processes. One configuration database connection information. Hibernate.config 2 configuration mapping. 3 use: the use of the process are the following steps: 3.1: Ge ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries