JS Tutorial: Learning Notes of the JS class

Background: Touch JavaScript for almost two years. From the very beginning to her full of curiosity, to now learn a lot about her frame. Friends ask me: There are so many frameworks, why do you have to learn the bottom of the object-oriented? Actually this question: Another friend has answered for me. No matter how the frame changes in the future, as long as the basic understanding of the underlying principles, it is easy to learn. Well, we're starting to learn.

1, create the object:

var obj = new Object ();//The first method.

var obj = {};//the second method. Incidentally, you can create an array by using var arr = []

2. Assigning values to an object's properties

Nahao.gender = ' Male ';

Nahao.yearofbirth = 1989;

Nahao.name = ' topcss '; The properties of an object can also be called members of an object. Like ordinary variables, the properties of a JS object can be a string, an array, a number, or even an object or a function.

3, add methods to the object in fact, if the object's properties are functions, then this attribute can be called the object method

Nahao.gender = ' Male ';

Nahao.yearofbirth = 1989;

Nahao.name = ' topcss ';

Nahao.info = function () {

var str = ' Name: ' +

THIS.name + ', sex: ' +

This.gender + ', Year of birth: ' +

This.yearofbirth;

alert (str);

}

Nahao.info ();

4, we can use the following abbreviated syntax to define the above object:

var Nahao = {

Gender: ' Male ',

yearofbirth:1989,

Name: ' Topcss ',

Info:function () {

var str = ' name: ' + this.name + ', sex: ' + This.gender + ', Year of birth: ' + This.yearofbirth;

alert (str);

}

};//If you call Nahao.info (), you will get the same result as above. Note that the attributes are separated by commas, and there is no comma after the last attribute.

5. Constructor constructors can help us to reduce the amount of code. First, the constructor is also a function. The prototype is as follows:

function person () {}/is no different from defining normal functions. Here's what to add to the person constructor:

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 + ', sex: ' + this.gender

+ ', Year of birth: ' + This.yearofbirth + ' website: ' + this.site;

alert (str);

}

}//Thus, the constructor is complete. We can now define multiple objects using the following statement:

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 ', ' Don't know ', ' confidential ', ' bbs.blueidea.net ');

Nahao.info ();

Gaoshou.info ();

Wudi.info ();

Note: In the above constructor, the name of the parameter and the name of the object property are the same, for example:

THIS.name = name; Although this is legal, if you want to define a private property it's not going to happen (later), and it looks like a bit confusing. So it's a good idea to modify 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 + ', sex: ' + this.gender

+ ', Year of birth: ' + This.yearofbirth + ' website: ' + this.site;

alert (str);

}

}

6, static method What is static method? is a property or method that is added directly to an object, and it is valid only for one object, for example:

Nahao.skill = ' will point Xhtml,css, now also can say JavaScript '; After adding this statement, Nahao has the skill attribute. However, Gaoshou and Wudi that originate from the same constructor are unaffected. Of course, we can add this attribute to them as well:

Gaoshou.skill = ' Proficient in html,css,js,flex,php,.net,linux programming, perl,ruby,xxx ... ';

Wudi.skill = ' can use beer caps and sand hand-polished PC basic components such as CPU. ';

Similarly, we can add a static method to a constructor, but this also does not affect objects that are defined using the constructor. For example:

Person.showname = function () {

alert (this.name);

};

Person.showname ();

Nahao.showname ()//We define a showname function for person, but it is useful only for the constructor person itself (but it has no practical meaning), if this method is invoked on the Nahao object, it will be an error.

7. Define objects that private members expose to objects? All of the objects defined above are exposed, are accessible, and even modified to the point. For example, we can directly access the object's name and so on by Nahao.name properties. If we want an attribute to be externally confidential, we can define private properties for the object:

function Person (namearg,genderarg,yearofbirtharg,sitearg,privacyarg) {

......

var privacy = Privacyarg;

......

}

var Nahao = new Person (' top css ', male,1989, ' www.javava.org ', ' with 10 toe head ');

alert (nahao.privacy); After making a certain modification to the constructor, we add a privacy property to the Nahao object, and the undefined is displayed if we try to alert its value.

Now let's look at the private method, if we make the following modifications to the person constructor:

function Person (namearg,genderarg,yearofbirtharg,sitearg,privacyarg) {

function Insideonly () {

Alert (' I can only call it inside the Object! ');

}

}//then insideonly will not be accessible externally, and an error will occur if you attempt to execute this function. It is important to note that the private method is not bound to the object, nor does its this keyword point to the object. If you need to refer to an object within a private method, you can use the following methods:

function Person (namearg,genderarg,yearofbirtharg,sitearg,privacyarg) {

......

var myowner = this;

function Insideonly () {

alert (myowner.name);

}

}//first defines a Myowner variable in the constructor, assigns the This keyword to it, and can then use the variable in the private function to access the object itself.

8. Privileged methods Private members cannot access external objects, what is the use of inaccessible objects? We can use privileged methods to access these private properties. The so-called privileged method is a function defined using the This keyword, for example:

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 ', ' with 10 toe head ');

Nahao.showprivacy ();

We first added a showprivacy privilege method to the person constructor, using the value of the private variable privacy. Finally, we call the method on the Nahao object, and the result is as follows:

9, prototype first, we want to negate the above sentence "Changes to Person.prototype will also affect the use of person-defined objects." "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);

What will the output of alert be? Based on the experience above, before alert, the last modification to Person.prototype assigns its mark attribute to ' Person.newproto '. But the actual output result: Person.proto

It's not a bug, and it's the same in every browser. The reason analysis is as follows:

Person.prototype = {

Mark: ' Person.proto '

}

A paragraph first creates an object literal and assigns it to Person.prototype, which we call the object literal as Proto.

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

When you create a Nahao object and follow the constructor to initialize the object, you silently set an internal property for the Nahao object, which we will name XXX for the time being. and assign it to the value of Person.prototype, that is, the object literal mentioned above Proto,javascript dynamic inheritance is implemented by this XXX. (The inner implementation of this javascript is not what I thought it would be, and it was mentioned in an article by Netscape's staff, and the process is also documented below.) Then

Person.prototype = {

Mark: ' Person.newproto '

}

Here we will create another object literal Newproto and assign it to Person.prototype. Here it is obvious that, although we have modified the person.prototype, it does not affect the Nahao object. When we visit the Nahao.mark, it first in their own internal search, can not find it will go to find xxx, naturally found the proto, rather than Newproto. So what is the key to the implementation of the dynamic inheritance of XXX? In Firefox it is __proto__, with the following code as proof. As for IE in the xxx is what I have not found.

Person.prototype = {

Mark: ' Person.proto '

}

var Nahao = new Person (' topcss ', ' Male ', 1989, ' www.nahao8.com ');

Nahao.prototype = {

Mark: ' Person.newproto '

}

alert (Nahao.mark);

alert (Nahao.__proto__.mark);//Two The results of alert are the same, all Proto.

alert (nahao.__proto__===person.prototype);//struct is true.

The above code has been tested for Firefox and Chrome. Netscape should also be able to, ie not.

Personal point of view: The best way to Person.prototype = {} is to use it only once when defining a constructor, and to follow the constructor to write and then use Person.prototype.protertyA = ' when modifying prototype. Valuea ' form.

10, the last constructor we see above to define the object, and to set this and modify its properties, we can define properties in the constructor, can define (static) properties outside the object, or define attributes in the object's prototype. Here is the approximate format I use:

function Person (namearg,genderarg,yearofbirtharg,sitearg,privacyarg) {

Public properties

THIS.name = Namearg;

This.gender = Genderarg;

This.yearofbirth = Yearofbirtharg;

This.site = Sitearg;

Private property

var privacy = Privacyarg;

Privileged methods

This.showprivacy = function () {

};

}

Person.prototype = {

Public method

Info:function () {

},

Func:function () {

}

}