Chapter 5 object-oriented basics-JavaScript skills

Objects are the basis of JavaScript. At the most basic level, an object is a set of attributes. 1. Object-oriented Basics
Objects are the basis of JavaScript. At the most basic level, an object is a set of attributes.
1. Object Creation

<Script type = "text/javascript"> // create a new Object and store it in the obj variable var obj1 = new Object (); // set the attribute obj1.value = 5; obj1.click = function () {alert ("Hello");} // define an object in another way, using key/value) to define the attribute var obj2 = {value: 5, click: function () {alert ("Hello") ;}}; script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

I believe many of my friends have been familiar with the object creation methods many times.
2. Use of Objects
Unlike other object-oriented languages, JavaScript has no class concept. In JavaScript, any function can be instantiated as an object.

<Script type = "text/javascript"> // a simple function that accepts the name and puts it into the current context function User (name) {this. name = name;} var me = new User ("cssrain"); // specify a name to create a new object for this function, alert (me. name); // "cssrain" alert (me. constructor = User); // true // if the User is treated as the function User ("peter"); alert (window. name); // because its this context object is not set, it is the global window object script by default.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

This Code uses new User () to create a new object of a function. The new object has the name attribute, and the construtor attribute points to the function that creates it.
3. Public Methods
Common methods are accessible to users in the context of objects. To implement this method, you need to use the prototype property.
The prototype of the object is still the object. After attributes are added to a prototype object, each object instantiated by the prototype can access these attributes, that is, these attributes are all public.

<Script type = "text/javascript"> // a simple function that accepts the name and puts it into the current context function User (name) {this. name = name;} // Add a new function to the prototype object of this object. prototype. getName = function () {return this. name;} var me = new User ("cssrain"); // specify a name to create a new object alert (me. getName (); // "cssrain" script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

4. Private Method
This is easy to understand. It can only be accessed internally.

<Script type = "text/javascript"> // a simple function that accepts the name and puts it into the current context function User (name) {this. name = name; function disp () {alert ("User () function private") ;}// you can only call disp () internally ();} var me = new User ("cssrain"); // specify a name to create a new object for this function. // me. disp (); // cannot call // disp (); // cannot call script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

5. Privileged Methods
It accesses private variables in a public way.

<Script type = "text/javascript"> function User (name, age) {// Private variable var year = (new Date ()). getFullYear ()-age; // create a privileged method that can access the year variable and is public to access this. getBornYear = function () {return year ;}} var me = new User ("cssrain", 22); // specify a parameter to create a new object of this function, alert (me. getBornYear (); // "1986" script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

In essence, the privileged mode is dynamically generated. Because they are added to the object at runtime, instead of being generated at the first compilation of the Code.
This ability to dynamically generate code cannot be underestimated. It is very useful to generate code based on the variables you want. Let's take a look at the example of the dynamic generation method below:

<Script type = "text/javascript"> function User (users) {for (var I in users) {// traverses all attributes (function (method) {var p = I; method ["get" + p] = function () {// create a READ function for this attribute return users [p];} method ["set" + p] = function (val) {// create a setting function users [p] = val ;}}) (this) ;}} for this attribute );}} var me = new User ({name: "cssrain", age: 22}); // specify a parameter to create a new alert (me. getname (); // "cssrain" alert (me. getage (); // "22" me. setname ("changeCssRain"); me. setage (23); alert (me. getname (); // "changeCssRain" alert (me. getage (); // "23" script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

6. Static Method
The essence of static methods is no different from that of common functions. Static methods can ensure the cleanliness of object namespaces.

<Script type = "text/javascript"> function User (name, age) {this. name = name; this. age = age;} // Add the static method User to a User object. cloneUser = function (user) {// create and return a new User object return new User (user. name, user. age);} var u = User. cloneUser ({name: "cssrian", age: 22}); alert (u. name); // "cssrain" alert (u. age); // 22 script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Ii. Summary
It is very important to understand the concepts and content described in this chapter. This is the starting point to fully master professional JavaScript.